01 環境構築

この章では、ハンズオンを動かすための環境を用意し、「テストが実行できる」「アプリがブラウザで見える」ことを確認します。

ℹ️ TODO（アプリ実装後に確定）: 以下のコマンド・ポート番号・パスは、sections/ のアプリ実装に合わせて確定します。現時点では「こう動かす予定」という前提で読んでください。 の箇所は実装時に更新します。

必要なもの

ツール	用途	備考
Docker Desktop	コンテナでアプリ／テストを動かす	Compose 同梱。これが本命
エディタ	コードを読む・書く	VS Code など何でも
Node.js（任意）	Docker を使わずホストで直接動かす場合	補足。詳細は `HOST.md`（予定）

このハンズオンは Docker を前提にします。手元の Node のバージョン差や OS 差を気にせず、全員が同じ環境で進められるようにするためです。

Docker での起動手順（予定）

# 1. リポジトリのルートで起動
docker compose up        # <!-- TODO: 実際のサービス名・構成に合わせて更新 -->

# 2. 別ターミナルでコンテナに入る
docker compose exec app sh   # <!-- TODO: サービス名は実装で確定 -->

# 3. 取り組むレクチャーのディレクトリへ移動
cd sections/02-experience/01-messy-no-test

各レクチャーは独立した npm プロジェクト（それぞれ package.json を持つ）です。レクチャーごとにそのディレクトリで作業します。

動作確認

1. テストが実行できること

# Node 標準のテストランナー
node --test          # <!-- TODO: package.json の test スクリプトに合わせる -->

node:test は Node.js に標準で入っているため、追加インストールは不要です（このハンズオンの方針）。実行して、サンプルのテストが緑（パス）になることを確認します。

2. アプリがブラウザで見えること

# 開発サーバを起動（予定）
npm start            # <!-- TODO: 起動スクリプト・ポートを確定 -->

ブラウザで http://localhost:3000（）を開き、トップページ（商品一覧・検索フォーム）が表示されればOKです。

SQLite の確認

データは SQLite に入っています。「DB を開いて税率を変更する」体験（02 章）のために、DB の場所と開き方を知っておきます。

# DB ファイルの場所（予定）
ls sections/02-experience/01-messy-no-test/data/shop.db   # <!-- TODO -->

# コンテナ内で SQLite を開く（予定）
sqlite3 data/shop.db
sqlite> .tables
sqlite> SELECT * FROM config;     -- standard_tax_rate などの設定が見える想定

初期データ（薄力粉などの商品）は seed スクリプトで投入します。

つまずきポイント

ポートが既に使われている: 別プロセスが 3000 番などを使っていると起動に失敗します。停止するか、ポートを変更してください。
DB を初期状態に戻したい: 税率を変えて壊した後など、やり直したいときは DB を作り直します（seed の流し直し）。
コンテナ内と手元でファイルが同期しない: Compose のボリューム設定を確認してください。

準備ができたら、いよいよ本編です。

次へ: 02 テストコードの体験 →