2024.12.05
Webアプリにおける「フロントエンド」は、ユーザーが直接目にする部分です。フロントエンドにバグがあれば、ユーザー体験に重大な影響を与えかねません。
フロントエンドのバグを検出し、快適なユーザー体験を保証するためには、適切なテストが不可欠です。
今回は、Webアプリのフロントエンドテストに関して、基本をまとめてお伝えします。フロントエンドテストに役立つツールも紹介しますので、ぜひ参考にしてください。
- もくじ
1. フロントエンドテストの主な種類
フロントエンドテストには、主に「静的解析」「単体テスト」「結合テスト」「E2Eテスト」の4種類があります。
まずは、それぞれの概要を把握しましょう。
1-1 静的解析
「静的解析」は、Webアプリのコードを実行するのではなく、コードそのものを解析するテスト手法です。
構文の書き方やコードの記述順序、コード全体の構造などを解析し、構文エラーや規約違反などがないかチェックします。
静的解析の実施には、専用の静的解析ツールを用いることが一般的です。
コードを実行する前にテストを実施することで、早期にバグを検出できます。また、コードの書き方をチーム内で標準化できるメリットもあります。
ただし、コードの実行時に発生するデータの不整合といった問題は検出できません。
1-2 単体テスト
「単体テスト」は、個々のプログラム要素が想定どおりに動作するかを検証するテスト手法です。
関数やコンポーネントに入力データを与えて実行し、出力データが期待値と一致するか、内部の処理分岐が正しいかなどをチェックします。
プログラムの全てが完成している必要はなく、実装と並行して早期にバグを検出することも可能です。テストの規模が小さいため実施の手間が少ないメリットもあります。
ただし、検出できるバグの範囲は個々のプログラム要素内に限定されます。
単体テストについては以下の記事で解説しています。
1-3 結合テスト
「結合テスト」は、複数のプログラム要素が想定どおりに動作するかを検証するテスト手法です。
テスト対象の関数やコンポーネントを含む機能を画面単位で実行し、プログラム要素同士のデータのやり取りや、タイミングなどに問題がないかをチェックします。
結合テスト対象のプログラム要素は、単体テストがすべて完了していることが前提です。
フロントエンドの結合テストはブラウザ上で実施できるため、テスト手順に沿った操作を行いやすく、結果の確認がしやすいでしょう。
ただし、テスト対象の組み合わせが多くなるとテストケースも増大するため、網羅的なテスト実施は難しくなります。
結合テストについては以下の記事で解説しています。
1-4 E2Eテスト
「E2E（End to End）テスト」は、フロントエンド・バックエンドを含めたWebアプリ全体が想定どおりに動作するかを検証するテスト手法です。
ユーザーと同等の条件下でWebアプリを操作し、挙動や画面表示が仕様どおりとなっているかをチェックします。
E2Eテストの実施はすべてのプログラム要素に対して、単体テスト・結合テストが完了していることが前提です。
E2Eテストはユーザーが利用する際のシナリオに沿って実施するため、実際のユーザー視点で不具合を検出できます。
ただし、テストの規模が大きくなりやすく、実施には多くの手間がかかるでしょう。また、E2Eテストを開始できるのは開発の終盤になるため、開発期間の猶予が少ない場合など、不具合への対処が難しいケースもあります。
2. フロントエンドテストの主なテスト観点
フロントエンドテストを適切に実施するためには、テストすべき観点を知ることが重要です。
フロントエンドテストの主なテスト観点4つを知っておきましょう。
2-1 表示・デザイン
フロントエンドテストでは、Webアプリの表示・デザインが想定どおりかのチェックが不可欠です。
ボタンやアイコン、ラベルといった画面項目の表示位置・配色・形状・フォント、Webページ全体のレイアウトなどが仕様に沿っているかをチェックします。
また、Webアプリの表示やデザインは端末によっても変わるでしょう。
パソコンやスマートフォンなど、端末ごとの表示・デザインが問題ないかのチェックも必要です。表示・デザインの問題を確実に検出し、見た目に優れたWebアプリを実現しましょう。
2-2 動的な要素
フロントエンドテストでは、Webアプリに盛り込まれた動的な要素が想定どおりに動作するかのチェックも重要です。
ボタンやフォームを操作した際の挙動、オブジェクトのアニメーションなどが仕様に沿っているかをチェックします。
応答速度といったパフォーマンス面、不正な入力や操作に対するエラー処理のチェックも欠かせません。動的な要素の問題を検出し、ユーザー体験の低下を防ぎます。
2-3 ページ遷移
フロントエンドテストでは、Webアプリのページ遷移が想定どおりかのチェックも必要です。
ユーザーからのリクエスト（要求）や特定のイベントに応じて、仕様に沿ったWebページへ遷移するかをチェックします。
遷移先ページの表示内容やURLはもちろん、遷移速度やブラウザバック時の挙動などもチェックしましょう。認証機能やセッション管理などに関するセキュリティ上の不備は、ページ遷移まわりで発生するケースが少なくありません。
2-4 バックエンドとの連携
フロントエンドテストでは、バックエンドとの連携もチェックが求められます。フロントエンドからのリクエストがバックエンドで適切に処理され、バックエンドからのレスポンス（応答）がフロントエンドで適切に処理されるかをチェックします。
送受信されるデータの内容や形式に不整合がないか、タイムアウトなどの異常時に適切なエラー処理が行われているかのチェックも不可欠です。
バックエンドとの連携に関するバグを確実に検出し、Webアプリ全体の信頼性を高めましょう。
3. フロントエンドテストの主なテスト戦略
適切なテスト戦略を適用することで、フロントエンドテストの効率や成果の向上につながります。
フロントエンドテストに採用される主なテスト戦略は、次の2つです。
3-1 テストピラミッド
「テストピラミッド」は、マイク・コーン氏が考案したテスト戦略です。ピラミッドの形でテストのリソースを配分するため、このように呼ばれます。
具体的には、上から順にUIテスト・結合テスト・単体テストをピラミッド型に配置します。下層に位置する単体テストほど、テストの比重が高くなることが特徴です。
テストの中でも序盤に実施し、規模が小さい単体テストでは、コストを抑えつつ早期にバグを検出できます。
低負荷な単体テストを最も手厚くすることで、効率的にWebアプリのバグ検出を図るのがテストピラミッドです。コストパフォーマンスを重視したい場合に有効なテスト戦略といえます。
「Succeeding with Agile: Software Development Using Scrum」：Mike Cohn
3-2 テストトロフィー
「テストトロフィー」は、ケント・C・ドッズ氏が考案したテスト戦略です。トロフィーの形でテストのリソースを配分するため、このように呼ばれます。
具体的には、上から順にE2Eテスト・結合テスト・単体テスト・静的解析をトロフィー型に配置します。
トロフィーの中央部分に位置する結合テストが最も比重が高く、底部分に静的解析があるのが特徴です。
Webアプリの機能や画面の多くは、複数のプログラム要素を組み合わせるため、単体テストだけでは機能単位での検証が十分に行えません。
とはいえ、E2Eテストではテストのコストが大きくなりがちです。
そこで、バランスの良い結合テストを最も手厚くし、効率的に機能単位でのテスト実施を図るのがテストトロフィーです。
The Testing Trophy and Testing Classifications｜Kent C. Dodds
4. フロントエンドテストを効率化・自動化する代表的なツール
フロントエンドテストを手動で実施するのは手間がかかりやすいうえに、人的ミスも発生しやすくなります。そこで、フロントエンドテストを効率化・自動化するツールの活用が効果的です。
ここでは、フロントエンドテストを効率化・自動化する代表的なツールを4つ紹介します。
4-1 ESLint
出典：ESLint
「ESLint」は、フロントエンド開発の基本的なプログラミング言語である「JavaScript」のコードを静的解析できるツールです。
JavaScriptコードに構文などの問題がないかを自動でチェックし、問題があれば検出してくれます。
また、「Visual Studio Code」といったコードエディタとの連携も可能です。コードエディタと連携すれば、実装中にコードの問題をリアルタイムに検出でき、静的解析の効率化につながります。
4-2 Jest
出典：Jest
「Jest」は、JavaScriptコードのテストフレームワークです。テストコードを記述することで、単体テストや結合テストの実行を自動化できます。
実際の結果と期待値との比較チェックや、モック（テスト用の仮想モジュール）の作成など、多彩な機能を利用可能です。
また、「React」や「Vue.js」といった主要なJavaScriptライブラリ・フレームワークにも対応しています。幅広いフロントエンド開発チームが採用できるでしょう。
4-3 Selenium
出典：Selenium
「Selenium」は、Webアプリのブラウザ操作を自動化できるテストフレームワークです。
テストコードを記述することで、結合テストやE2Eテストの実行を自動化できます。ユーザーの利用を想定したテストシナリオを、テストコードで再現することが可能です。
主要なブラウザやプログラミング言語に対応しているため、幅広いフロントエンド開発チームが採用できるでしょう。なお、Seleniumをベースにしたツール「Selenium IDE」を使えば、コードを書かずにブラウザ操作を記録・再現できます。詳しくは、次の記事をご覧ください。
4-4 Playwright
出典：Playwright
「Playwright」は、Webアプリのブラウザ操作を自動化できるテストフレームワークです。テストコードを記述することで、E2Eテストの実行を自動化できます。ブラウザの表示に合わせて処理を待機できる「自動待機機能」など、コードの記述を効率化する機能が充実しています。
主要なブラウザやプログラミング言語に加えて、「Safari」といったモバイルブラウザのE2Eテストにも対応できるのが強みです。
なお、Playwrightについて、詳しくは次の記事をご覧ください。
まとめ
本記事では、フロントエンドテストの種類や観点、戦略、ツールを紹介しました。
フロントエンドテストは、Webアプリのユーザー体験を高めるうえで欠かせません。適切にフロントエンドテストを行うためには、こうした基礎知識を把握することが大切です。
高品質なフロントエンドテストを実施するためには多くの手間がかかるため、ツールを用いて効率化しましょう。
今回の内容を参考にして、効率的・高品質なフロントエンドテストを目指しましょう。
