Wiz テックブログ

Wizは、最新のIoTやICTサービスをお客様に届ける「ITの総合商社」です。

【Laravel】DDDで、テストの時はDBを使わないリポジトリに差し替える

LaravelでDDDを採用しテストを書くさいに、DBを使わないリポジトリに差し替える方法について書きました。

良いコードの書き方

こんにちは! フロントエンドエンジニアの松本です。 本日は「良いコードの書き方」と言うテーマでお話しさせていただきます。 コードサンプルはJavaScriptを採用しています。 本質的にはどの言語にも通ずるものがあるので、ぜひ最後までご覧ください。 そも…

Vue.js + TSXの方法とそのメリット・デメリット

Vue3.0におけるTSXの活用法とそのメリット・デメリットについて簡単にまとめました。

SSRのバックエンドをServerlessFramework Laravelで構築する

アーキテクチャ セットアップ serverless.yml デプロイ 他の必要リソースをTerraformで構築 クライアントマシンからAuroraへ接続 メール送信設定 最後に こんにちは。バックエンドエンジニアの高橋です。 SSR(Serverless Next.js)のバックエンドを Serverl…

記事及び求人ページに構造化データを導入

担当メディアで記事及び求人ページの構造化データを導入した実例を元に構造化データの導入例を紹介します。 構造化データとは 検索エンジンがページ内容を理解しやすくなるデータ形式のことです。 正しく記述することで検索エンジンがページの内容をより理解…

useReducerの活用法について

useReducerは様々な場面で活用でき、可読性・パフォーマンス向上に大いに役立ちます。本記事では、useReducerの基本的な使い方と様々な活用法について説明したいと思います。

LaravelでStrategyパターン & Factory Methodパターン

LaravelでStrategyパターンとFactory Methodパターンを実装してみました。 単純なif分岐をデザインパターンを使ってリファクタリングしていくという流れでやってみました。

イージングでスムーズなアニメーションを作ろう

ド派手なアニメーションからUIのモーションまで、幅広く応用できるイージングについての記事です。

コードレビュー会はじめました。

3月からフロントエンド一部のチームで取り組み始めたコードレビュー会についての紹介になります。

データベースの正規化(第1〜第3正規形)

新入社員の方に「データベースの設計」について研修を行いました。中でも重要であった正規化について、第1正規形〜第3正規形までを改めてまとめてみました。

第3回LT会を行いました。

第3回LT会レポ 「経験学習」について考える PlantUMLを使おう 〜UMLは友達〜 情報セキュリティに関して 第3回LT会レポ 今回のLT会の内容は 発表者: 3名 制限時間: 自由 テーマ: 自由 コメントツール:CommentScreen で行いました。 それでは1つずつ発表を紹…

Next.jsのCSR(SPA),SSR,SSG,ISRのまとめ&メリットデメリットについて

はじめまして。最近無性に海外旅行に行きたいと思っているフロントエンドエンジニアの内田です。 Next.jsってページごとに色々なレンダリング方法を柔軟に切り替える事が出来て便利ですよね。 ですが、利用する際にはきちんとそれらレンダリング方法のメリッ…

コロナ禍での他職種とのコミュニケーションについて

こんにちは、フロントエンドエンジニアの柳田です。 2020年、新型コロナウイルスの影響で、リモートワーク環境になった方は少なくないと思います。 弊社も同様にリモートワークになり、当初はコミュニケーションが取りづらくなることを懸念していましたが、…

E2Eテストの取り組みについて

はじめまして、フロントエンドエンジニアの菅野です。 今回は、E2Eテスト自動化の取り組みについてお話ししたいと思います。 E2Eテストとは End to Endを略してE2Eと呼ばれています。 例えば、 CV(コンバージョン)ポイントやログイン機能の動作確認 VRT(…

Gatsby v3リリース 差分ビルド検証

先日、(2021年3月3日) Gatsby v3.0がリリースされました。 Introducing Gatsby 3.0 – Faster in Every Way that Matters いくつかの変更がありますが、特に気になった項目が V3 for Content Editors: Faster build times on any service (あらゆるサービスで…

AOP、Laravelのライブラリ紹介

AOPとは 背景 横断的関心事(Cross Cutting Concerns) 用語 Aspect(アスペクト) Advice(アドバイス) Join Point(ジョインポイント) Point cut(ポイントカット) その他 Laravelのライブラリ 個人的な印象 Laravelの機能との差 Middleware Listener, …

GatsbyJsでWordPressをHeadless CMSとしてサイト構築deployまで試してみました。

はじめに GatsbyJsとは何か GatsbyJs導入install WordPressと連動 GatsbyJs側の処理 config設定 記事一覧ページ 記事テンプレート作成 NetlifyでDeploy Netlifyとは何か デプロイ手順 参考イメージ まとめ はじめに 皆さんこんにちは、フロントエンドエンジ…

gitでpushする前にコミットを整理する

git

こんにちは。バックエンドエンジニアの河内です。 今回は、コミットを整理する方法のうち、個人的に使用頻度が高いものについて書きます。 前提方針 コミットログを整えるために編集を加えるのは、ローカルリポジトリのコミットだけとします。 逆に言うと、…

輪読会を開催した話とその感想

はじめまして、フロントエンドエンジニアの髙橋です。 バーチャルオフィス導入の影響もあり、Wiz社内でのオンラインのLT会やもくもく会などイベントが増えてきております。 その一環でWizでは今期から毎週輪読会を行っており、その内容や感想などをご紹介し…

バーチャルオフィスという働き方

はじめに 皆様こんにちは、フロントエンドエンジニアの松本です。 本日はWizクリエイティブチームの働き方についてご紹介したいと思います。 現在、Wizクリエイティブチームの全職種(ディレクター、デザイナー、フロントエンド、バックエンド、ライター)は…

TerraformでCodeDeploy+CodePipeline (GitHub Ver2)を実装する

バランサーとEC2 デプロイフロー Terraformで実装 前提 ディレクトリ構成 CodeDeploy 必要なリソースのインポート ①インポートしたリソースの定義 ②デプロイアプリケーションとデプロイグループの作成 CodePipeline ①IAMロール作成とポリシーアタッチ ②S3バ…

第2回LT会を行いました。

第2回LT会レポ JSモジュールバンドラのこれからについて考える メモリーを認識したプログラム PHPのInterfaceの使いどころ TypeScript導入のススメ 第2回LT会レポ 今回のLT会の内容は 発表者: 4名 制限時間: 発表時間 5分 + 質問時間 10分 テーマ: 自由 で行…

Vue3.0における状態管理(Vuex,Provide / inject)

こんにちは、フロントエンドエンジニアの小玉です。 今回は、Vue.jsにおける状態管理についてお話したいと思います。 Vue2.x時代、多くの方はVuexを使用していたのではないでしょうか?Vue2.x、Vue3.xともに公式のドキュメントにおいても、状態管理のセクシ…

Laravelで既存画像のWebP対応

今回はPHPのLaravelで既存画像のWebP化及び切替表示について実装例を紹介してみようと思います。 目的 記事の画像をWebP化することによって記事の表示スピードを早くする。 WebP(うぇっぴー)とは 軽量の新画像形式で開発したグーグルによると、画像をWebP…

PHPのInterface -メリットと使い所-

今回はPHPのInterfaceの使い所について、例を交えつつ紹介してみようと思います。 本題に入る前にこの記事内のサンプルコードについてです。 サンプルコードは全て、フレームワークにLaravelを使用しているという前提で記述しています。 LaravelでInterface…

Next.js10新機能 next/imageを使ってみた

こんにちは、フロントエンドエンジニアの松尾です。 2020年10月27日にNext.js10がリリースされ、パフォーマンスを改善するための20個を超える新しい機能が追加されました。 nextjs.org 私たちフロントエンドチームでも、プロジェクトにNext.js10を導入してお…

Lambda@EdgeでCloudFrontの配信をコントロールしたい

Lambda@Edgeとは 設定出来るフック 例:webp画像を配信して表示速度高速化したい ①IAMロールを作成 ② Lambda関数を作成 ③関数コードを作成 ④デプロイパッケージを作成 ⑤.zipファイルをアップロード ⑥テストを行ってみる ⑦ Lambda@EdgeをデプロイしCloudFront…

Snowpack 試してみました

皆さんこんにちは、フロントエンドエンジニアの高野です。 皆さんはJSのバンドラーは何を使われていますか? 私たちフロントエンドチームでは主にwebpack、一部browserifyを使用しています。 最近はReactやVueをブイブイ使いビジネスロジックをもつことも多…

Laravel8 使ってみた。

Laravel7との違い ①ルートファイルの書き方 Laravel7では以下の様な記述でしたが、

【TypeScript】 HTMLElementに関する型推論

こんにちは。フロントエンド の仲本です。 今回はHTML要素に関する型推論について、一般的な型推論からデファルトでは型推論できない場合の対応方法までを紹介いたします。 要素に対する型推論 まずはHTML要素の一般的な型推論を紹介いたします。 <html lang='ja'> <head> <meta charset='utf-8'> <title>sample</title></meta></head></html>…