1. テストの粒度と分類
ソフトウェアテストは 粒度（テストの対象範囲） に応じて 5 つ に分類されます。
各粒度に関連する具体的なテストとツールを以下に整理します。
| テストの種類 | 目的 | スコープ | 関連するテスト | 代表的なツール |
|---|---|---|---|---|
| 単体テスト（Unit Test） | 個々の関数やコンポーネントの動作を検証 | 関数・メソッド・クラス | ユニットテスト | Jest, JUnit, PyTest, RSpec |
| 結合テスト（Integration Test） | 複数のモジュールや API の連携を検証 | モジュール・API 間 | 統合テスト | JUnit, TestNG, Mocha, Supertest |
| 機能テスト（Functional Test） | システムの特定の機能が仕様通りに動作するかを検証 | 特定の機能単位 | API テスト, UI テスト | Postman, Playwright, Cypress |
| システムテスト（System Test） | システム全体が期待通り動作するかを検証 | システム全体 | E2E テスト, 負荷テスト | Playwright, Selenium, JMeter |
| ユーザによるテスト（UAT） | 実際のユーザー操作の検証 | エンドユーザー視点 | 受け入れテスト, A/B テスト | 手動テスト, Google Optimize |
✅ ポイント
- 単体テスト → 結合テスト → 機能テスト → システムテスト → UAT の順でテスト範囲が広がる。
- GitHub Actions を利用するのは主に 1〜4（単体テスト・結合テスト・機能テスト・システムテスト）。
2. GitHub Actions を利用したフロントエンドの CI/CD
GitHub Actions では .github/workflows/ に CI/CD 用の .yml ファイルを配置し、
コードの変更時に 自動でテスト & ビルド を実行できます。
Vercel でデプロイする場合
| 方法 | 仕組み | 使うべきケース |
|---|---|---|
| Vercel の Git 連携 | Vercel の管理画面で GitHub を接続し、main にプッシュすると自動デプロイ |
シンプルな運用で問題ない場合 |
GitHub Actions の vercel-action |
main にマージされた後など、特定の条件でデプロイを実行 |
デプロイのタイミングを細かく制御したい場合 |
✅ Vercel の Git 連携が有効なら vercel-action は不要！
✅ vercel-action を使うなら Vercel の Git 連携をオフにする！
3. コード例
以下は、フロントエンドの CI/CD ワークフローを定義した GitHub Actions の設定ファイル の例です。
name: CI # ワークフローの名前
on:
push:
branches: [main] # mainブランチへのpush時に実行
pull_request:
branches: [main] # mainブランチへのプルリク作成時にも実行
jobs:
build-and-test:
runs-on: ubuntu-latest # 実行環境をUbuntuに設定
steps:
- name: Checkout repository
uses: actions/checkout@v3 # リポジトリのコードを取得
- name: Setup Node.js
uses: actions/setup-node@v3 # Node.jsのセットアップ
with:
node-version: "20" # 使用するNode.jsのバージョン
cache: "npm" # npmのキャッシュを有効化（ビルド時間短縮）
- name: Install dependencies
run: npm ci # 依存関係のインストール（`npm install` より高速）
- name: Run Linter
run: npm run lint # ESLintを実行（コードスタイルのチェック）
- name: Type Check
run: npm run type-check # TypeScriptの型チェックを実行
- name: Run Unit Tests
run: npm test # Jestなどで単体テストを実行
- name: Run End-to-End Tests
run: npm run test:e2e # Playwright/Cypressを用いたE2Eテスト（オプション）
- name: Build
run: npm run build # Next.jsのビルドを実行し、エラーがないか確認
4. おまけ：バックエンドのテストを追加する場合
フロントエンドとは 別の CI ファイル（例:backend-ci.yml） を作成し、バックエンドのテストを並行して実行 できます。
name: Backend CI # バックエンド用のワークフロー
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
test-and-build:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v3 # コードを取得
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: "20"
cache: "npm"
- name: Install dependencies
run: npm ci
working-directory: backend # `backend/` ディレクトリ内で実行
- name: Run Linter
run: npm run lint
working-directory: backend
- name: Run Unit Tests
run: npm test
working-directory: backend
- name: Build Backend
run: npm run build
working-directory: backend
以上です。
Discussion