環境構築の段階的導入（macOS / Windows）

本カリキュラムでは 環境構築を 2 段階 に分けて導入します。

フェーズ	OS 環境	扱う対象
初期セットアップ段階	Git Bash（Windows）/ Terminal（macOS）	Node.js, pnpm, VS Code, Claude Code, Git/GitHub, React（ローカル開発のみ）
DB 導入段階	WSL2 + Docker Desktop（Windows）/ Docker Desktop（macOS）	PostgreSQL コンテナ, Hono API のローカル DB 接続

理由: Windows でいきなり WSL2 を導入すると「仮想化レイヤ」「Linux コマンド」「Windows ⟷ WSL のファイル共有」など学ぶべき概念が増えすぎます。Docker を使わない初期段階は Git Bash のみで十分です。DB を扱い始めるタイミングで WSL2 を追加します。

Windows 向けの手順（推奨）

初期段階 — Git Bash + Node.js + pnpm

詳細な一次情報は b01b-windows-setup-zero を参照してください。 ゼロから 1 時間で環境を整える完全ガイドです。

要点のみ：

# 1. winget で Node.js LTS を入れる（PowerShell 管理者）
winget install OpenJS.NodeJS.LTS

# 2. Git for Windows（Git Bash 同梱）を GUI でインストール
# https://git-scm.com/download/win

# 3. Git Bash で pnpm を有効化
corepack enable
pnpm --version

# 4. VS Code + Claude Code 拡張をインストール

# 5. SSH 鍵を生成して GitHub に登録
ssh-keygen -t ed25519 -C "your@email.com"
cat ~/.ssh/id_ed25519.pub  # GitHub Settings に貼り付け
ssh -T git@github.com

# 6. リポジトリを clone
git clone git@github.com:subaru-hello/fullstack_typescript_curriculum.git
cd fullstack_typescript_curriculum

# upstream の main で依存関係を確認
git switch main

# 受講生用の作業ブランチを作る場合の例
git switch -c yourname/main

# 初期段階の依存関係を検証
pnpm install

DB 導入段階 — WSL2 + Docker Desktop を追加導入

Docker を使い始めるタイミングで WSL2 を追加します。既に入れた Git Bash は引き続き使えますが、Docker コマンドは WSL2 の Ubuntu 側で実行するのが一般的です。

1. WSL2 と Ubuntu のインストール

PowerShell を 管理者として実行：

wsl --install

PC を再起動し、スタートメニューから「Ubuntu」を起動。初回はユーザー名とパスワードを設定します。

2. Docker Desktop for Windows のインストール

https://www.docker.com/products/docker-desktop/ からインストーラをダウンロード
インストール後、Docker Desktop を起動
Settings → Resources → WSL Integration を開く
Enable integration with my default WSL distro を ON
Ubuntu を ON にして Apply & Restart

3. Ubuntu 側で Node.js と pnpm をインストール

WSL2 の Ubuntu は Windows とは別の Linux 環境なので、Node.js も改めて入れます。

Ubuntu ターミナルで：

# nvm で Node を管理（Ubuntu では nvm が扱いやすい）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install --lts
node --version
corepack enable
pnpm --version

# Docker が WSL 統合で使えるか確認
docker --version
docker compose ps

4. リポジトリを WSL2 側にも clone

Windows 側の C:\Users\...\dev と WSL2 側の ~/dev は 別のファイルシステム です。パフォーマンスの観点から、Docker を使う作業は WSL2 側で clone した方が速いです。

# Ubuntu ターミナル
mkdir -p ~/dev
cd ~/dev
git clone git@github.com:subaru-hello/fullstack_typescript_curriculum.git
cd fullstack_typescript_curriculum
pnpm install
docker compose up -d postgres

Tips: VS Code は WSL 拡張 を入れると「Ubuntu の中のフォルダを Windows 側の VS Code で直接開ける」ようになります。拡張機能から Remote - WSL を検索してインストールしてください。

macOS 向けの手順

初期段階 — Homebrew で一括導入

# 1. Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# 2. Node.js
brew install node
corepack enable
pnpm --version

# 3. VS Code
brew install --cask visual-studio-code

# 4. SSH 鍵
ssh-keygen -t ed25519 -C "your@email.com"
cat ~/.ssh/id_ed25519.pub  # GitHub Settings に貼り付け

# 5. リポジトリを clone
git clone git@github.com:subaru-hello/fullstack_typescript_curriculum.git
cd fullstack_typescript_curriculum

# upstream の main で依存関係を確認
git switch main

# 受講生用の作業ブランチを作る場合の例
git switch -c yourname/main

# 初期段階の依存関係を検証
pnpm install

DB 導入段階 — Docker Desktop for Mac を追加

brew install --cask docker
open -a Docker  # 初回起動
docker --version

macOS は WSL2 不要です。Docker Desktop を起動するだけで使えます。

cd fullstack_typescript_curriculum
docker compose up -d postgres

共通：動作確認コマンド

# 初期段階で最低限確認するもの
git --version       # 2.40+
node --version      # v20+
pnpm --version      # 8+
code --version      # （VS Code のバージョン）
ssh -T git@github.com  # "Hi USERNAME!" が返る

# DB 導入段階で追加確認するもの
docker --version    # 24+
docker compose version  # v2+

よくある問題

Git Bash で `pnpm: command not found`

corepack enable を実行する前に Node.js のインストールが完了しているか確認してください。Windows Terminal を完全に閉じて再起動すると PATH が反映されます。

Docker Desktop が起動しない（Windows）

BIOS で「Virtualization Technology (VT-x / AMD-V)」が有効か確認
Windows の機能の有効化または無効化 で「Hyper-V」「仮想マシンプラットフォーム」「Windows ハイパーバイザープラットフォーム」にチェック
再起動

WSL2 Integration が効かない

Docker Desktop → Settings → Resources → WSL Integration で Ubuntu が ON になっているか再確認し、「Apply & Restart」を押してください。

ポート 3000 / 3001 が既に使われている

# Git Bash / WSL2 で
netstat -ano | grep :3000
# 出てきた PID を覚えて：
taskkill //F //PID <PID>   # Windows (Git Bash で //F と // が必要)

# macOS
lsof -i :3000
kill -9 <PID>

参考リソース

b01b-windows-setup-zero — Windows ゼロスタート完全ガイド
Homebrew 公式: https://brew.sh/ja/
Git for Windows 公式: https://git-scm.com/download/win
winget: https://learn.microsoft.com/ja-jp/windows/package-manager/winget/
WSL2: https://learn.microsoft.com/ja-jp/windows/wsl/install
Docker Desktop: https://docs.docker.com/desktop/
pnpm: https://pnpm.io/ja/
nvm: https://github.com/nvm-sh/nvm

この章で手を動かすときの確認

この章は導入編の STEP 1にある「手を動かす」の章です。本文を読み終えたあと、次の観点だけ確認すると次へ進みやすくなります。

この章で確認すること:

自分の OS に合った初期セットアップ手順を選べる
初期セットアップ段階と DB 導入段階で必要な環境の違いを理解する

次に活きる章:

シェル・ターミナル基礎
WSL2・Docker セットアップ詳細（Windows 向け）

補助参照:

学習の入口と開発環境を整える