📄
概念 📚 beginner-stepup

環境構築の段階的導入(macOS / Windows)

本カリキュラムは Week 1-2 を最小構成で開始し、Docker が必要になる Week 3 で WSL2 を追加導入する段階的アプローチを採用する

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

フェーズOS 環境扱う対象
Week 1-2Git Bash(Windows)/ Terminal(macOS)Node.js, pnpm, VS Code, Claude Code, Git/GitHub, React(ローカル開発のみ)
Week 3 以降WSL2 + Docker Desktop(Windows)/ Docker Desktop(macOS)PostgreSQL コンテナ, Hono API のローカル DB 接続

理由: Windows でいきなり WSL2 を導入すると「仮想化レイヤ」「Linux コマンド」「Windows ⟷ WSL のファイル共有」など学ぶべき概念が増えすぎます。Docker を使わない Week 1-2 は Git Bash のみで十分です。Docker が必要になる Week 3 で WSL2 を追加します。


Windows 向けの手順(推奨)

Week 1 — 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(kinoshita/main だけを取得)
git clone --single-branch --branch kinoshita/main \
  git@github.com:subaru-hello/fullstack_typescript_curriculum.git
cd fullstack_typescript_curriculum

# 必要なブランチ種別だけを tracking に追加
git remote set-branches --add origin 'kinoshita/week-*'
git remote set-branches --add origin 'reference/week-*'
git fetch origin

# Week 1 の参照ブランチで pnpm install 検証
git checkout reference/week-1
pnpm install

Week 3 — WSL2 + Docker Desktop を追加導入

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

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

PowerShell を 管理者として実行

wsl --install

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

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

  1. https://www.docker.com/products/docker-desktop/ からインストーラをダウンロード
  2. インストール後、Docker Desktop を起動
  3. Settings → Resources → WSL Integration を開く
  4. Enable integration with my default WSL distro を ON
  5. 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 向けの手順

Week 1 — 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(kinoshita/main だけを取得)
git clone --single-branch --branch kinoshita/main \
  git@github.com:subaru-hello/fullstack_typescript_curriculum.git
cd fullstack_typescript_curriculum

# 必要なブランチ種別だけを tracking に追加
git remote set-branches --add origin 'kinoshita/week-*'
git remote set-branches --add origin 'reference/week-*'
git fetch origin

# Week 1 の参照ブランチで pnpm install 検証
git checkout reference/week-1
pnpm install

Week 3 — 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

共通:動作確認コマンド

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

# Week 3 で追加確認するもの
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>

参考リソース

生きているコード

本ドキュメントで扱ったパターンの完全な動作コードは、メンター側リポジトリの参照ブランチで確認できます。

  • 対応 Week: W1
  • 参照ブランチ:
  • W1: reference/week-1
  • 対応 checklist 項目: (直接対応なし)

ブランチの作り方・見方は b00-curriculum-map を参照してください。

  1. 1. 📄環境構築の段階的導入(macOS / Windows)
  2. 2. 📄SNSアプリの最終インフラ構成図
  3. 3. 📄SNSクローンの全体設計(Month 1 ゴール)
  4. 4. 📄カリキュラム全体マップ(Week × 教材 × 参照ブランチ × 要求チェックリスト)
  5. 5. 📄このカリキュラムの使い方(SQL・Python・Dify経験者向け)
  6. 6. 📄シェル・ターミナル基礎
  7. 7. 📄Windows で完全にゼロから始める開発環境構築(Week 1)
  8. 8. 📄Git基礎
  9. 9. 📄GitHubワークフロー
  10. 10. 📄パッケージ管理(pnpm workspace)
  11. 11. 📄Webアプリアーキテクチャ全体像
  12. 12. 📄要求ヒアリングとユーザーストーリー(Month 2 Week 5)
  13. 13. 📄画面ワイヤーフレームと画面遷移図(Month 2 Week 6)
  14. 14. 📄HTTP・REST API基礎
  15. 15. 📄ER 図の描き方(Month 2 Week 7)
  16. 16. 📄認証・認可のパターン
  17. 17. 📄REST API 仕様書の書き方(Month 2 Week 7)
  18. 18. 📄HTML/CSS基礎とレイアウト
  19. 19. 📄JavaScript基礎(Pythonとの対比)
  20. 20. 📄TypeScript基礎(型システムとPythonとの対比)
  21. 21. 📄Reactコンポーネント設計の基礎
  22. 22. 📄状態管理の概念
  23. 23. 📄フォーム検証(React Hook Form + Zod)(Month 3 Week 11)
  24. 24. 📄バックエンドAPI設計(Hono)
  25. 25. 📄ルーティング(React Router v7)
  26. 26. 📄Hono のエラーハンドリング(Month 4 Week 13)
  27. 27. 📄データベース設計・SQL→Drizzle ORM対応
  28. 28. 📄マイグレーションの考え方
  29. 29. 📄AWSインフラ基礎
  30. 30. 📄AWS Budget Alert の設定(Month 5 Week 17)
  31. 31. 📄環境変数管理
  32. 32. 📄Bastion EC2 と SSH ProxyJump(Month 5 Week 18)
  33. 33. 📄CI/CD基礎
  34. 34. 📄ECR への Docker イメージ push と App EC2 デプロイ(Month 5 Week 19)
  35. 35. 📄テスト設計の基本
  36. 36. 📄CloudFront + S3 + ALB で公開する(Month 5 Week 20)
  37. 37. 📄CLAUDE.md・プロジェクト設定
  38. 38. 📄PR レビュー 5 観点ルーブリック(全 Week 共通)
  39. 39. 📄タスク分解・仕様の書き方
  40. 40. 📄Playwright で E2E テスト(Month 6 Week 22)
  41. 41. 📄生成コードのレビュー・デバッグの勘所
  42. 42. 📄Trivy で脆弱性スキャン(Month 6 Week 23)
  43. 43. 📄CloudWatch Logs の読み方と運用(Month 6 Week 23)
  44. 44. 📄PDF ポートフォリオの自動生成(Month 6 Week 24)