「フロントエンド開発のためのテスト入門」の感想
同じ時期に Jest 本（Jest ではじめるテスト入門）を書いていたので、他の方はどのようにテストについて書くのか気になったので読んでみました。
Jest 本との比較
Jest 本と比較し、「フロントエンド開発のためのテスト入門（歯車本と呼ぶそうです）」は Jest の説明など重複している部分はありましたが、特徴が全く違うと感じました。
Jest 本では、CircleCI で働いていたのが大きいのですが「テストを機能させるにはどうすればいいのか？」というのを強く意識して書いていました。そのため、Jest でテストを書くために必要な情報以外に、ブランチモデルや CI、プロジェクトへのテストを導入する際のアプローチなどを紹介しています。そして、寄り道が多いです。JavaScript の仕様や Jest の歴史、CircleCI での体験談などのコラムが充実しています。全然意識していたわけではなかったのですが、入門書でこれほど寄り道する本は良いか悪いかは別にして少ない気がしました。
歯車本では、フロントエンドのテストに特化しており Jest 本ではさらっとしか触れていない Testing Library や Storybook、Playwright についての利用の仕方を細かく説明しています。さらに、すぐに実践できるフロントエンド周りのテストの知見が多くまとめられています！フロントエンドのテストの事例をまとめている本は他に見たことがないので、フロントエンドエンジニアの方でまだテストを書いたことがないという方は読むことをお勧めします。Jest 本にはない情報が沢山あります。
結論としては、2 つとも意識しているところや説明している範囲など全然違うので、どちらも読んだ方がいいと思います！！！（これが言いたかった。）
感想
第 1 章から第 6 章までは、テストをまだ書いたことがない方向けに、テストについて、図を多く使い、内容を絞って説明しています。第 5 章ではフロントエンドならではの MPA と SPA の違いに関する話や Web アクセシビリティについての説明、簡単な UI コンポーネントのテストがあり、小さい単位で進められるので、フロントエンドの経験が無い方でも概要を理解することができると思います。
逆に第 7 章からは、なるべく実践に近い構成でサンプルプロジェクトが作られており、Next.js や、Docker などを利用することが前提となっているため、サンプルコードを理解するには一定の知識が必要だと感じました。しかし、これは今現在フロントエンドで活躍されている方向けの内容だと思うので、すでに十分に知識があれば、問題なく進められると思います。サンプルプロジェクトは簡単に動くものを作ってみたという感じではなく、なるべく本番に近い形でしっかり作られています。具体的に今プロジェクトにテストが必要な場面では、サンプルコードを真似してすぐに自分のプロジェクトへ転用できそうでした。
第 1 章に登場する、「テストはどのように書けばよいのか？」という問いについて、**「上達への近道は、実装例をたくさん見て練習することです。」**と書かれていることからも、サンプルコードの品質に力を入れているのだと感じました。入門書では、あえて詳細を話さないことがあると思っているので、本書ではさらっと書いていることでも、サンプルプロジェクトのコードを深く確認することで、本書で書かれていること以上のことを学ぶことができると感じました。
さらに第 7 章以降では Testing Library や Storybook、reg-suit を利用したビジュアルリグレッションテスト、Playwright を利用した E2E テストについての具体的な例や使い方の解説があります。これは Jest 本では軽くしか触れられていない部分なので非常に勉強になりました。
もう 1 つ印象的だったのが、数年前と比べて Web アクセシビリティの重要性が大きくなっていることです。Storybook や静的解析などで Web アクセシビリティのチェックを行っていることからも、当たり前に準拠することの 1 つなのだと強く感じました。
全体の感想として、フロントエンド周りのテストを他の方がどうやって実践しているのかの一部を覗くことができてよかったです。
どこまで実践するかはチームやプロダクトによって異なると思いますが、試してみたいテクニックが多くありました。これからフロントエンド周りのプロダクトのテストを追加していきたいという方にはお勧めできる 1 冊です。
Discussion