はてなブックマーク

はじめに 業務でPlaywrightの環境構築及びCI/CD連携担当したことから、E2EテストとVRTのベストな構成をずっと悩んでいました。 自分の中である程度納得できる形まで落とし込めたので、その知見を残しておきます。 🎭Playwrigth Microsoftが開発したテストツールです。複数ブラウザ対応、自動待機機能、並列処理などによりE2Eテストを実施します。また、スクリーンショットの比較によるテスト(VRT:Visual Regression Testing)により視覚的変更も検出可能です。元々Puppeteerを作っていたチームにより開発が行われているようです。 ツールの比較対象にcypressがありますが、最近の週間ダウンロード数はPlaywrightが上回っているようです。 (他にはSeleniumやベンダー提供の有料E2Eテストツールなどもあります) また、Playwri

現在クラウドリフトの作業をしていて、ECS(またはEC2)の前段にALBを配置し、ALBをSSLの終端としている。 これはAWSでパブリックなアプリケーションを作成する際によく取られる構成だが、HTTP Strict Transport Security(HSTS)は仕様上HTTPSの経路でのみレスポンスに付与される。 この仕様により、ALBをSSLの終端に設定するとレスポンスにHSTSが付与されない。 この問題を解決するためにはECSに乗せているアプリケーション上で、ALBに到達した際のプロトコルを見るように修正する必要があり、その元のプロトコルがX-Forwarded-Proto (XFP) に入ってくる。 この対応を行う上で調べた内容をメモしておく。

この記事について 私がWebアプリケーションの設計をするときは、プレゼンテーション層、ドメイン層(ビジネスロジック層)、データアクセス層の3つを基本的なレイヤーとして構えることが多いです。 そしてリポジトリパターンを使用して依存の向きを逆転させ、ドメイン層をアプリケーションの中心に構えます。 ドメイン部分を中心に据え、変更の多いレイヤーを外側に持っていく考え方は、オニオンアーキテクチャやクリーンアーキテクチャでも採用されています。 ですが、これらのアーキテクチャを忠実に再現せずとも、最低限DIPにより処理の中心をドメイン層に据え、ビジネスロジックを疎結合で高凝集なクラス設計にすることで、中規模以上の開発にも十分耐えることができると思っています。 Source 今回使用したコードはこちらに置いています。 workspace npmのworkspaceの機能を使用し、上述した設計を作っていきま

この記事について 私はWeb基盤を提供している企業でWebアプリケーションエンジニアをしています。 インフラや顧客基盤など複数のバックエンドAPIが動いており、それらを結合したアグリゲーション(BFF)の作成とフロントエンドの実装を担当することが多いです。 言語はTypeScriptとC#を選択する事が多く、フロントエンドではReact.jsとVue.jsを使用しています。これらをコンテキストとして私が「良いコード」を書くために日頃意識しているTipsを投稿していきます。 やらないこと インデントを揃える、命名基礎、アクセス修飾子などの基礎的な内容は割愛しています。 コードはTypeScriptで書いています。ですが特定の言語に特化した内容にはしていません。 プログミング全般に掛かかった内容であり、フロントエンドやバックエンドなど特定のレイヤーに特化した内容にはしていません。 良いコードと

この記事について 実際にフォームを使用するときは、バリデーションライブラリと合わせて実装することが多いと思います。 こちらの記事で再描画を抑えるためにはReactHookForm(以下 RHF)を使用するのが良いと投稿しました。 今回の記事では、タイプセーフなバリデーションライブラリ「Zod」とRHFを使用した実践的なフォームを作成していきます。 RHFとZodは以下のresolverを使用すると簡単に組み合わせることができます。 ですが愚直に実装しても、1つのコンポーネントにすべての関心事が詰め込まれ、ファットなコンポーネントになってしまうでしょう。 今回は、フォーム処理における関心事をカスタムフックに切り出し、交換可能(プラガブル)なフックを作成していきます。 画面 以下のようなフォーム画面を実装しています。 InputFieldコンポーネント 以降で使用しているInputFieldの

この記事について 以下でReactの再描画の仕組みと抑制方法をスクラップしました。 折角なので、記事にしてまとめておきます。 再描画の確認方法 Chromeデベロッパーツールを使用すると、いつ再描画が行われているか確認することができます。 該当箇所の外枠が発光し、再描画されていることを教えてくれます。また、負荷がかかるほど外枠が黄色に近い色に変わっていきます。 再描画の基本 React Hooksではコンポーネント内で定義されているStateが更新されたとき、そのコンポーネントの再描画が行われます。 そのコンポーネントがいくつかの子コンポーネントを持つとき、それら全てが再描画の対象となります。 Inputコンポーネント 以降で使用しているInputコンポーネントです。 基本的にはinputタグをラップしているだけなので、読み進める分には飛ばしてOKです。 Input.tsx export