Bill One Entry*1グループの秋山です。 1. はじめに 2010年代前半に登場したReactやVue.jsに代表される宣言的UI実装は、大規模なSPAの構築を可能にしました。その一方、フロントエンド領域に新たなアーキテクチャが導入されたことで、それまでWebアプリケーション開発で定石とされたテスト手法を適用しづらいケースが増え、新たなベストプラクティスが求められるようになりました。 その要請に応える形で、2010年代後半にはフロントエンドのテスト手法に緩やかなパラダイムシフトがありました。この記事ではそのパラダイムシフトを振り返りながら、フロントエンドで必要なテストについて考察し、最後にChromaticを用いたビジュアルリグレッションテストを紹介します。 2. Testing Pyramid と フロントエンド テストを語る際によく持ち出されるメタファとして、Testing

はじめに フロントエンドのテスト手法の 1 つに Visual Regression Testing（以下、VRT）があります。 これは、アプリケーションの画面を画像として保存し、画像の差分比較をすることで意図せぬ変更が生じていないかテストする方法です。 ここ数年で広く普及し、用語としても一般的になったように思います。 私も以前、とある OSS に reg-suit & Storycap を使った VRT を導入したことがあるのですが、その後もいくつか VRT のためのライブラリが登場したもののキャッチアップできていませんでした。 そこで今回は知識のアップデートを目的として、ここ最近登場した（と思われる）VRT のライブラリをいくつかご紹介します。 なお、今回紹介するツールはすべてこちらのリポジトリで試しています。 具体的な設定ファイルや動作結果を確認できるようになっていますので、ご興味が

こんにちは、THECOO株式会社のpoteboyと申します。普段は現職１人目のWEBフロントエンド開発者としてFaniconというファンコミュニティサービスの開発を行っております。 弊社では私が入社する以前までフロントエンド専任の開発者がおらず、サーバーサイドの開発者やAndroidの開発者がフロントエンドの開発業務を兼務していました。 専任がいなかったのは、Faniconが元々ネイティブベースのアプリで、WEBアプリの開発優先度を下げていたためです。 そのため、フロントエンドの開発環境に関しても万全とは言えず、2022年6月に私が入社し、9月には2人目のフロントエンド開発者となるTomoya氏が入社したタイミングで、2人で協力してFaniconフロントエンドの大改修を行なうこととなりました。 フロントエンド改修業務にはTypeScriptの導入、既存コンポーネントのVue３化、単体テスト

現在着手中の案件ではReactを使ったtoC向けのWebアプリの開発を行なっています。かなりデザインに重点を置いているため、一定間隔でデザインチームとアプリのデザイン周りのフィードバック会を設けるのですが、STG環境をフィードバックの対象にするとThemeの切り替えやユーザーデータの更新をAPI越しに行う必要があり面倒な場面が出てきます。 そこでThemeやデータを柔軟に切り替えて確認できるStorybookをChromaticを使って簡単にチームメンバーと共有できるようにしました。 CI環境 案件ではGithub Actionsを使ってアプリのビルド、デプロイが終わったタイミングでスクリプトを流してChromatic上にStorybookをデプロイしています。 Chromaticとは Chromaticは、UIフィードバックの収集、ビジュアルテスト、ドキュメンテーションを自動化することで

このようにさまざまなデコレータが用意されていますが、今回はサンプルで利用するデコレータに絞って説明します。他のデコレータについては、NestJSの公式ドキュメントなどを参照してください。 依存性注入（DI） 依存性注入（DI、Dependency Injection）とは、クラスの依存関係を解決する仕組みです。NestJSでは、依存性注入を使ってクラスの依存関係を解決します。 クラスの依存関係とは、クラスが他のクラスに依存している関係のことです。例えば、次のようなクラスAがあったとします。このクラスは他のクラスに依存していません。@Injectable()デコレータを使って、サービスを定義します。 @Injectable() class A { constructor() {} } そして、次のようなクラスBがあったとします。このクラスは、@Inject()デコレータを使って依存性を注入し

1/29に行われた東京チャレンジマラソンに出場し、完走した。 2021年から始めた毎日10キロ走り続ける生活も1年を超えたが、ひとまずフルマラソン完走という目標を達成できて感無量である。 35キロの壁は分厚かった フルマラソンを完走して最初に思った事の一つは「世の中には体験しないと理解できない世界があるんだなぁ」という事であった。 僕はそれまで人間の限界というのは心肺機能によるものであり、疲れてしまってもう一歩も動けないというのはゼーハーゼーハー言って、ヘトヘトの状態になるものだと思っていた。 だがフルマラソンにおける限界は心肺機能によるものではなかった。 心肺はむしろ余裕シャキシャキである。じゃあ何が僕を追い込んだかというと、脚である。 マラソンの世界では35キロの壁という概念がある。 これは35キロ地点ぐらいから途端にシンドくなるぞという警告であり、それをもって多くのベテランは 「最初