📄
概念 📚 beginner-stepup

Windows で完全にゼロから始める開発環境構築(Week 1)

Windows 10/11 でまだ何もインストールしていない状態から、Git Bash・Node.js・pnpm・VS Code・Claude Code・GitHub 連携までを 1〜2 時間で完了させる完全手順

このドキュメントは Windows 10/11 にまだ何もインストールしていない状態 から、SNS clone プロジェクトの pnpm install が成功するところまでを一気通貫で案内します。Week 1 のセッションまでに完了させてください。

前提:

  • Windows 10 バージョン 1809 以降 / Windows 11
  • 管理者権限(インストーラ実行のため一時的に必要)
  • インターネット接続
  • GitHub アカウント(未作成ならこちらで作成)

完了までの所要時間: 1〜2 時間(ダウンロード時間含む)

Week 1-2 ではシェルに Git Bash のみを使用します。WSL2 は Week 3 で Docker を導入するときに初めて必要になります。Week 1 の時点では WSL2 のことは忘れてください。


全体像:1 時間で入れるもの

┌─────────────────────────────────┐
│ 1. Windows Terminal             │ ← 作業用のターミナル
│ 2. Git for Windows (Git Bash)  │ ← シェル・git コマンド
│ 3. Node.js LTS (via winget)    │ ← JavaScript 実行環境
│ 4. pnpm (via corepack)          │ ← パッケージマネージャ
│ 5. VS Code                      │ ← エディタ
│ 6. Claude Code 拡張             │ ← AI コーディング
│ 7. SSH 鍵 + GitHub 連携         │ ← 認証
│ 8. リポジトリ clone + pnpm      │ ← 動作確認
└─────────────────────────────────┘

各ステップで「完了の確認コマンド」を実行し、期待どおりの出力が出ることを確かめてから次に進んでください。


1. Windows Terminal をインストール

Windows 標準の「コマンドプロンプト」ではなく、Windows Terminal を使います。タブ機能があり、後で Git Bash をタブのひとつとして常駐させられます。

インストール手順

  1. スタートメニューから Microsoft Store を開く
  2. 検索ボックスに Windows Terminal と入力
  3. Microsoft 公式の「Windows ターミナル」を選び、入手 ボタンを押す
  4. インストール完了後、スタートメニューから Windows Terminal を起動

Windows 11 では標準でインストール済みです。

確認

Windows Terminal を起動し、画面上部に「PowerShell」と書かれたタブが開いていれば OK です。


2. Git for Windows(Git Bash 同梱)をインストール

Git Bash は Git と一緒にインストールされる Bash 風のシェルです。lscdcatgrep などの Linux/macOS と同じコマンドが使えます。

ダウンロード

  1. https://git-scm.com/download/win を開く
  2. 「64-bit Git for Windows Setup」をクリックしてダウンロード
  3. ダウンロードした .exe を実行

インストーラの選択肢(重要)

画面が 10 枚ほど続きます。以下の選択以外は デフォルトのまま「Next」 で問題ありません。

画面選択内容
Select Components「Windows Explorer integration」「Git Bash Here」にチェック(デフォルトで ON のはず)
Choosing the default editorUse Visual Studio Code as Git’s default editor(VS Code インストール後に反映されます)
Adjusting the name of the initial branchOverride the default branch name for new repositoriesmain を入力
Adjusting your PATH environmentGit from the command line and also from 3rd-party software(推奨デフォルト)
Choosing the SSH executableUse bundled OpenSSH(デフォルト)
Choosing the HTTPS transport backendUse the OpenSSL library(デフォルト)
Configuring the line ending conversionsCheckout Windows-style, commit Unix-style line endings(Windows では必須)
Configuring the terminal emulator to use with Git BashUse MinTTY(デフォルト)
Choose the default behavior of git pullDefault (fast-forward or merge)
Choose a credential helperGit Credential Manager(デフォルト)
Configuring extra optionsEnable file system caching にチェック(デフォルト)

残りは Next / Install で完了です。

Windows Terminal から Git Bash を使う設定

  1. Windows Terminal 上部のタブの (下矢印)→ 設定 を開く
  2. 左ペインの「既定のプロファイル」を Git Bash に変更
  3. 保存 を押す

以降、Windows Terminal を開くと最初から Git Bash が立ち上がります。

確認

Windows Terminal で以下を実行:

git --version
# 例: git version 2.44.0.windows.1

bash --version
# 例: GNU bash, version 5.2.15(1)-release (x86_64-pc-msys)

echo "$HOME"
# 例: /c/Users/YOUR_NAME

3 つ全て表示されれば成功です。


3. Node.js LTS を winget でインストール

winget は Windows 10 (1809+) / Windows 11 に標準搭載されている公式パッケージマネージャです。

インストール手順

Windows Terminal を管理者として実行 します(タブの右クリック → 管理者として実行)。Git Bash ではなく PowerShell タブで以下を実行:

winget install OpenJS.NodeJS.LTS

インストール完了後、Windows Terminal を一度完全に閉じて、通常権限で再起動します(PATH を反映させるため)。

確認

再度 Git Bash を開いて:

node --version
# 例: v20.13.1(v20 以上であれば OK)

npm --version
# 例: 10.5.2

もし node: command not found が出たら:

  • Windows Terminal を完全に閉じて開き直す
  • それでもダメなら PC を再起動
  • 再起動しても出ないなら、スタートメニューで「環境変数」を検索 → 「システム環境変数の編集」→ PathC:\Program Files\nodejs\ が含まれているか確認

4. pnpm を corepack で有効化

corepack は Node.js 16.9+ に同梱されているパッケージマネージャ管理ツールです。pnpm を個別にインストールせず、corepack 経由で有効化するのがモダンな方法です。

Git Bash で以下を実行

corepack enable
pnpm --version
# 例: 9.15.0(最初に 'Installing...' と表示されるかもしれない)

もし command not found: corepack が出たら Node.js のインストールが失敗している可能性があります。Step 3 をやり直してください。


5. Visual Studio Code をインストール

ダウンロード

  1. https://code.visualstudio.com/download を開く
  2. 「Windows」ボタンからインストーラをダウンロード
  3. 実行

インストーラの選択肢(重要)

画面選択内容
追加タスクの選択全てにチェック
・デスクトップ上にアイコンを作成する
・エクスプローラーの “Code で開く” を追加
・サポートされているファイルの種類のエディターとして、Code を登録
・PATH への追加(これが最重要)

「インストール」→「完了」。

確認

Git Bash で:

code --version
# 例: 1.88.1

6. Claude Code 拡張をインストール

VS Code を起動し:

  1. 左サイドバーの 拡張機能 アイコン(四角形が4つ)をクリック
  2. 検索ボックスに Claude Code と入力
  3. Anthropic 公式の「Claude Code」拡張を Install
  4. インストール後、左サイドバーに Claude Code のアイコン(C マーク)が出現
  5. クリックしてサインイン案内に従う(初回のみ)

サインインには Anthropic アカウントが必要です。まだ持っていない場合は初回セッションで一緒に作成します。


7. SSH 鍵を作って GitHub に登録

7-1. SSH 鍵を生成

Git Bash で(メールアドレスは GitHub に登録したものを使用):

ssh-keygen -t ed25519 -C "your-email@example.com"

3 回プロンプトが出ますが、全て Enter で空のまま通す で OK です。

Enter file in which to save the key ... → Enter
Enter passphrase ... → Enter
Enter same passphrase again ... → Enter

7-2. 公開鍵を表示してコピー

cat ~/.ssh/id_ed25519.pub

出力される ssh-ed25519 AAAAC3...your-email@example.com1 行すべて を選択してコピー(右クリック → コピー、または Shift+Ctrl+C)。

7-3. GitHub に登録

  1. ブラウザで GitHub にログイン
  2. 右上のアイコン → Settings
  3. 左メニュー SSH and GPG keys
  4. New SSH key ボタン
  5. Title: 任意(例: My Windows Laptop
  6. Key: コピーした公開鍵を貼り付け
  7. Add SSH key

7-4. 接続確認

Git Bash で:

ssh -T git@github.com

初回は「The authenticity of host … Are you sure you want to continue connecting (yes/no)?」と聞かれるので yes と入力。

成功すると:

Hi YOUR_GITHUB_USERNAME! You've successfully authenticated, but GitHub does not provide shell access.

が表示されます。

7-5. Git のユーザー情報を設定

git config --global user.name "あなたの名前"
git config --global user.email "your-email@example.com"

8. リポジトリを clone して pnpm install

メンターからリポジトリの URL を受け取ってから実行してください。

作業ディレクトリを用意

mkdir -p ~/dev
cd ~/dev

リポジトリを clone(—single-branch で kinoshita/main のみ取得)

カリキュラムでは main / arch/ddd 等の上流ブランチは受講者には不要なので、clone 時に絞ります:

git clone --single-branch --branch kinoshita/main \
  git@github.com:subaru-hello/fullstack_typescript_curriculum.git
cd fullstack_typescript_curriculum

必要なブランチ種別だけを tracking 対象に追加

# kinoshita/week-* と reference/week-* を fetch 対象に追加
git remote set-branches --add origin 'kinoshita/week-*'
git remote set-branches --add origin 'reference/week-*'
git fetch origin

この時点で git branch -r は以下のみを表示します:

  • origin/kinoshita/main
  • origin/kinoshita/week-*(push 済みの Week 分だけ)
  • origin/reference/week-*(push 済みの Week 分だけ)

origin/mainorigin/arch/ddd は見えません。

reference/week-1 ブランチに切り替え

git checkout reference/week-1

依存パッケージをインストール

pnpm install

初回は 30 秒〜1 分かかります。最後に Done と出れば成功です。

注意: Week 1 では Docker / PostgreSQL / pnpm dev はまだ試しません。Week 3 で DB を導入するタイミングで追加インストールします。


9. 完了チェックリスト

全て OK になったら Week 1 のセッション準備は完了です。

  • ☐ Windows Terminal が Git Bash を既定プロファイルで起動する
  • git --version が 2.40 以上を表示する
  • node --version が v20 以上を表示する
  • pnpm --version が 8 以上を表示する
  • code --version がバージョンを表示する
  • ☐ VS Code の左サイドバーに Claude Code アイコンが出ている
  • ssh -T git@github.comHi YOUR_USERNAME! を返す
  • ~/dev/fullstack_typescript_curriculum にリポジトリが clone され、reference/week-1 ブランチで pnpm install が成功している

よくあるトラブルと対処

winget: command not found

Windows が古い可能性があります。Windows Update で最新に更新するか、App Installer を Microsoft Store からインストールしてください。

Git Bash で日本語が文字化けする

Windows Terminal の設定で、Git Bash プロファイルの「外観」→ フォントMS GothicCascadia Mono に変更してください。

会社 PC でプロキシが必要

以下を Git Bash で実行(プロキシ URL は情シスに確認):

git config --global http.proxy http://proxy.example.com:8080
npm config set proxy http://proxy.example.com:8080

SSH 接続で Permission denied (publickey)

  • 公開鍵の登録内容が正しいか再確認(ssh-ed25519 で始まっているか、最後まで貼り付けたか)
  • ~/.ssh/id_ed25519(秘密鍵)が存在するか(ls -la ~/.ssh
  • 存在しない場合は Step 7-1 をやり直し

pnpm install が失敗する

  • Node.js のバージョンが v20 未満 → 再インストール
  • プロキシ環境 → 上記「会社 PC でプロキシが必要」を参照

参考

Week 3 で Docker を導入する際の手順は b00-env-setup の「WSL2 + Docker Desktop」セクションを参照してください。

生きているコード

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

  • 対応 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)