🛠️第0章 環境構築とプロジェクトセットアップ
テスト駆動開発を始める前に、開発環境を整え、CIパイプラインの準備をしましょう。 この章では、Next.js 15 (App Router)、TypeScript、Jest、GitHub Actionsを使った モダンな開発環境の構築方法を学びます。
📖はじめに
この教材では、Kent Beck氏の提唱するテスト駆動開発(TDD)の手法を学びながら、 モダンなWebアプリケーションフレームワークであるNext.js 15 (App Router)、 プログラミング言語TypeScriptを使い、実際にTODOアプリを開発します。 さらに、GitHub Actionsを用いたCI/CDパイプラインの構築も体験し、 開発プロセス全体の自動化を目指します。
🔬テスト駆動開発(TDD)とは?
「動作するきれいなコード」。Ron Jeffriesのこの簡潔な言葉が、テスト駆動開発(TDD)のゴールだ。
テスト駆動開発にはこの2つのシンプルなルールしかないが、個人とグループの振る舞いに次のような技術的影響を及ぼす。
・自動化されたテストが失敗したときのみ、新しいコードを書く。
・重複を除去する。
💡なぜTDDを学ぶのか?
私たちは、不安を抱えて考え込んでしまうのをやめにして、代わりに自動化されたテストによって開発を推し進める。
その理由は「勇気」にある。テスト駆動開発は、プログラミング中の不安をコントロールする手法だ。
💪自信の向上
細かいステップでテストと実装を繰り返すことで、コードが期待通りに動作することへの自信が深まります。
🏗️設計の改善
テストしやすいコードを書こうとすることで、自然と疎結合で凝集度の高い、より良い設計につながります。
🐛バグの早期発見
実装直後にテストを実行するため、バグを早期に発見し、修正コストを低減できます。
🔄リファクタリングの容易化
包括的なテストスイートがあれば、安心してコードのリファクタリング(振る舞いを変えずに内部構造を改善すること)を行えます。
📚ドキュメントとしてのテスト
テストコードは、コードがどのように動作すべきかを示す生きたドキュメントとなります。
⚙️CI/CDとの連携
自動テストはCI/CDパイプラインの核となり、品質を維持しながら迅速なリリースを可能にします。
📚学習の流れ(基礎編)
🔄第1章:TDDの基本サイクル
レッド・グリーン・リファクタリングの実践
📝第2章:TODOアイテムの表示
Client ComponentをTDDで開発
⚖️第3章:等価性とテスト
三角測量によるテスト手法
🔒第4章:プライベート化
意図を語るテストの作成
📋第5章:複数のTODOタイプ
原則をあえて破るときの判断
🔍第6章:テスト不足への対処
等価性の一般化と安全性確保
💭第7章:疑念をテストに翻訳
不安を具体的なテストケースに変換
🎯この教材で学ぶこと・作れるもの
学習内容
- • テスト駆動開発の基本的なサイクル(レッド・グリーン・リファクタリング)の実践方法
- • Next.js 15 (App Router)とTypeScriptを使った基本的なWebアプリケーション(TODOアプリ)の構築方法
- • React Server Components (RSC)とClient Componentsのテスト戦略の基礎
- • Server ActionsやAPI Route Handlersのテスト手法
- • JestとReact Testing Libraryを使ったフロントエンドテスト
- • GitHub Actionsを用いた基本的なCIパイプラインの構築(テストの自動実行)
作成するTODOアプリの機能
- • TODOアイテムの追加
- • TODOアイテムの一覧表示
- • TODOアイテムの完了/未完了切り替え
- • TODOアイテムの削除
- • (発展) Server ActionsまたはAPI Route Handlersを用いたデータ永続化
📚TDDガイド章一覧
📖第1編:基本編 (第1章〜第7章)
🏗️第2編:設計編 (第8章〜第12章)
👥対象読者
- ✓TypeScriptおよびReactの基本的な知識がある方
- ✓Next.js (App Router)に興味がある、または基本的な使い方を知っている方
- ✓テスト駆動開発を学んでみたい、実践してみたい方
- ✓ユニットテストの書き方に慣れたい方
- ✓GitHub Actionsを使ったCIの基礎を学びたい方
⚙️必要なもの
- •Node.js (LTS版を推奨、18.18.0以上)
- •npmまたはyarn
- •Git
- •GitHubアカウント
- •お好みのテキストエディター(Cursorなど)
- •ウェブブラウザー
📦1. Node.js, npm/yarn, Gitの確認
ターミナル(またはコマンドプロンプト)を開き、以下のコマンドを実行して、各ツールがインストールされているか、バージョンは適切かを確認してください。
node -v
npm -v # または yarn -v
git --version
もしインストールされていない場合は、公式サイトからダウンロードしてインストールしてください。
- • Node.js: https://nodejs.org/ (npmはNode.jsに同梱されています)
- • Yarn (オプション): https://yarnpkg.com/
- • Git: https://git-scm.com/
⚛️2. Next.js 15プロジェクトの作成 (TypeScript, App Router)
任意の作業ディレクトリーで、以下のコマンドを実行して新しいNext.js 15プロジェクトを作成します。
npx create-next-app@latest todo-app-tdd-ts
cd todo-app-tdd-ts
create-next-appの質問には以下のように答えてください:
- • Would you like to use TypeScript? Yes
- • Would you like to use ESLint? Yes
- • Would you like to use Tailwind CSS? Yes
- • Would you like to use `src/` directory? No
- • Would you like to use App Router? (recommended) Yes
- • Would you like to customize the default import alias (@/*)? No (デフォルトの `@/*` を使用)
プロジェクトが作成されたら、開発サーバーを起動してみましょう。
npm run dev
ブラウザーで `http://localhost:3000` を開くと、Next.js 15のスターターページが表示されるはずです。
🧪3. テストフレームワークの導入 (Jest, React Testing Library)
Next.js 15プロジェクトでTypeScriptのテストを書くために、Jest、React Testing Libraryを導入します。
npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom @types/jest
Jestの設定ファイル作成
Next.js 15では `next/jest` を使うのが推奨されています。プロジェクトのルートに `jest.config.js` を作成します。
const nextJest = require('next/jest')
const createJestConfig = nextJest({
// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
dir: './',
})
// Add any custom config to be passed to Jest
/** @type {import('jest').Config} */
const customJestConfig = {
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
testEnvironment: 'jest-environment-jsdom',
moduleNameMapping: {
// Handle module aliases (this will be automatically configured for you soon)
'^@/components/(.*)$': '<rootDir>/components/$1',
'^@/app/(.*)$': '<rootDir>/app/$1',
// 他のエイリアスも必要に応じて追加
},
}
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)
Jestセットアップファイル作成
プロジェクトのルートに `jest.setup.js` を作成します。
// Optional: configure or set up a testing framework before each test.
// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
// Used for __tests__/testing-library.js
// Learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom'
package.jsonのスクリプト追加
`package.json` の `scripts` にテスト実行用のコマンドを追加します。
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "jest",
"test:watch": "jest --watch"
}
}
🐙4. GitHubリポジトリーの作成と連携
- 1.GitHub上で新しいリポジトリーを作成します(例: `todo-app-tdd-ts-next15`)。
- 2.ローカルのプロジェクトディレクトリーでGitを初期化し、リモートリポジトリーに接続します。
git init git add . git commit -m "Initial commit: Setup Next.js 15 (TypeScript, App Router) and Jest" git branch -M main git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPOSITORY_NAME.git git push -u origin main
`YOUR_USERNAME` と `YOUR_REPOSITORY_NAME` は適宜置き換えてください。
🔄5. GitHub Actions CIワークフローの作成
プッシュやプルリクエストのたびにテストを自動実行するCIワークフローを作成します。 プロジェクトのルートに `.github/workflows` ディレクトリーを作成し、その中に `ci.yml` というファイルを作成します。
name: Node.js CI
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [18.x, 20.x] # テストしたいNode.jsのバージョン
steps:
- uses: actions/checkout@v4
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: 'npm' # npmのキャッシュを有効化
- name: Install dependencies
run: npm ci # npm installより高速で確実
- name: Run linters
run: npm run lint
- name: Run tests
run: npm test
このファイルをコミットしてプッシュすると、GitHub Actionsが自動的に設定されます。
git add .github/workflows/ci.yml
git commit -m "ci: Add GitHub Actions workflow for automated testing"
git push
🎉 これで、TypeScriptとApp Routerを使い、GitHub ActionsでCIを行うモダンな開発環境の準備が整いました!
次の章からTDDのサイクルを体験していきましょう。