フロントエンドのテスト手法
- Static Test（静的解析）
- コードを実行せずに、「書かれたコードそのもの」をチェックする工程です。
- 文法ミス、型の不一致、コーディングルールの違反を見つける
- Unit Test（単体テスト）
- 関数やコンポーネントなど、「最小単位」が正しく動くかを確認します。
- 例）「この関数にAを入れたらBが返るか？」「ボタンを押したら関数が呼ばれるか？」を検証する。
- Integration Test（結合テスト）
- 複数の部品（コンポーネントや関数）が「組み合わさった時」に正しく動くかを確認します。
- 例）「フォームに入力して送信ボタンを押した時、バリデーションが表示され、APIリクエストが送られるか？」といった一連の流れを検証
- End-to-End Test (E2Eテスト)
- 「ユーザーの操作」をブラウザ上でシミュレートして、システム全体を確認
- 実際にブラウザを立ち上げ、ログインから買い物完了まで、本物のデータベースやAPIを使ってテストする
代表的なツール
単体テスト
- Vitest
- Jest
- React Testing Library
E2Eテスト
- Playwright
- Cypress
React開発での具体例
- ユニットテストはコンポーネントや関数単位でする
- 結合テストはユニットテストを複数まとめてすること
QAエンジニアとは？ウェブ開発における品質保証のプロと8つのテスト観点
ウェブアプリケーション開発において、「QAエンジニア（Quality Assurance Engineer）」の存在感が高まっています。QAエンジニアとは、単に出来上がった製品のバグを探す「テスター」ではありません。製品の要件定義や設計段階から関わり、プロダクトの品質担保とユーザー体験の向上に責任を持つ「品質保証のプロフェッショナル」です。
開発者が「仕様通りに動くものを作る」ことに注力する一方で、QAエンジニアは「ユーザーがどのような状況で使っても問題が起きないか」「システム全体として破綻していないか」という多角的な視点からプロダクトを検証します。
QAエンジニアが駆使する「テスト設計」の視点
QAエンジニアの腕の見せ所となるのが、網羅的かつ効率的なテスト設計です。彼らが機能試験設計書を作成する際、どのようにシステムを分解し、品質を検証しているのか。代表的な8つのテスト観点をご紹介します。
UI確認テスト
デザインの再現性だけでなく、ユーザーにとっての「使いやすさ」を検証します。表示崩れの有無、ボタンの配置やサイズ、スマートフォンなどの異なるデバイスでのレスポンシブ表示など、ユーザーの目に触れるすべてのインターフェースが適切かを確認します。
機能テスト
システムが要件定義通りに正しく動作するかを確認する、ベースとなるテストです。後述するような特殊な条件に当てはまらない、一般的な機能の振る舞いや正常系の標準的な操作を網羅し、基本機能の品質を担保します。
境界値テスト
バグが最も潜みやすい「境界となる値」をピンポイントで狙い撃ちします。
- 入力フォームの文字数制限における上限ピッタリの文字数や、上限＋1文字の入力
- 数値入力における最大値・最小値の振る舞い
- ファイルアップロード時の容量制限ギリギリのファイル
制御フローテスト
特定の条件によって、システムの結果や処理がどう分岐するかを検証します。
- 「データ作成から48時間を超えて操作するとエラーメッセージを表示する」といった時間経過による分岐
- 特定のアクションを行った回数や、ユーザーの権限レベルによる処理の分岐
遷移テスト
画面から画面への移動が、ユーザーの意図通りに正しく行われるかを確認します。単純なページ遷移だけでなく、モーダルウィンドウやダイアログの開閉、エラー発生時に正しい画面へ復帰できるかなど、UI上のあらゆる動線を含みます。
状態遷移テスト
特定のアクションによって、システムやデータの「状態（ステータス）」が矛盾なく切り替わるかを検証します。
- 「イベント停止ボタン」を押下した際、対象イベントのステータスが確実に「稼働中」から「停止」に切り替わり、それに伴う付随処理が正しく実行されるか
内部結合テスト
システム内の複数の機能やコンポーネントが、フロントエンドとバックエンドの境界を越えて正しく連携しているかを確認します。
- ユーザー追加ダイアログで新規ユーザーを登録した結果が、画面をリロードすることなく即座に「イベント詳細画面」の参加者リストに反映されるか
外部結合テスト
自社システムが、外部システムやサードパーティAPIと正しく連携・通信できるかを検証します。
- 動画配信システムなどで、払い出したRTMP URLを使用してOBSなどの外部エンコーダーから正常に映像データを受信できるか
- 外部の決済サービスや認証プロバイダとの間で、データの欠損なく通信できるか
まとめ
QAエンジニアは、これらの多角的な視点を組み合わせてテストを設計・実行することで、予期せぬ不具合を未然に防ぎます。ユーザーが安心して使える高品質なプロダクトを継続的に届けるために、現代の開発現場においてQAエンジニアは欠かせない存在です。
