📄
概念 📚 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 を参照してください。

📚 beginner-stepup 全 53 章
導入編 13 章 ● この編を閲覧中
  1. 1. 📄Web とは何か
  2. 2. 📄URL を打ってから画面が表示されるまで
  3. 3. 📄ネットワーク基礎（TCP/IP・DNS・HTTPS）
  4. 4. 📄【発展】物理層から通信が成立するまで（電力・Ethernet・Wi-Fi・Bluetooth）
  5. 5. 📄WSL2・Docker セットアップ詳細（Windows 向け）
  6. 6. 📄環境構築の段階的導入（macOS / Windows）
  7. 7. 📄カリキュラム全体マップ（Week × 教材 × 参照ブランチ × 要求チェックリスト）
  8. 8. 📄このカリキュラムの使い方（SQL・Python・Dify経験者向け）
  9. 9. 📄シェル・ターミナル基礎
  10. 10. 📄Windows で完全にゼロから始める開発環境構築（Week 1）
  11. 11. 📄Git基礎
  12. 12. 📄GitHubワークフロー
  13. 13. 📄パッケージ管理（pnpm workspace）
応用編 16 章
  1. 1. 📄AWSインフラ基礎
  2. 2. 📄AWS Budget Alert の設定（Month 5 Week 17）
  3. 3. 📄環境変数管理
  4. 4. 📄Bastion EC2 と SSH ProxyJump（Month 5 Week 18）
  5. 5. 📄CI/CD基礎
  6. 6. 📄ECR への Docker イメージ push と App EC2 デプロイ（Month 5 Week 19）
  7. 7. 📄テスト設計の基本
  8. 8. 📄CloudFront + S3 + ALB で公開する（Month 5 Week 20）
  9. 9. 📄CLAUDE.md・プロジェクト設定
  10. 10. 📄PR レビュー 5 観点ルーブリック（全 Week 共通）
  11. 11. 📄タスク分解・仕様の書き方
  12. 12. 📄Playwright で E2E テスト（Month 6 Week 22）
  13. 13. 📄生成コードのレビュー・デバッグの勘所
  14. 14. 📄Trivy で脆弱性スキャン（Month 6 Week 23）
  15. 15. 📄CloudWatch Logs の読み方と運用（Month 6 Week 23）
  16. 16. 📄PDF ポートフォリオの自動生成（Month 6 Week 24）