Windows Starter Guide

Claude Code で
スマホ・ウェブアプリ開発を
ゼロから始める

開発環境が何も入っていない Windows PC からスタート。順番どおりに進めるだけでセットアップ完了。

Windows 10 / 11 Claude Code Codex CLI ゼロから OK

0 このガイドについて

このリポジトリは Claude Code（Anthropic の AI 開発支援ツール）と Codex CLI（OpenAI の CLI エージェント）を組み合わせた スマホ・ウェブアプリ開発の Windows 向けスターターキット です。

Node.js・Git・VS Code・GitHub CLI も未インストールの状態から、 すべての手順をこのガイドでカバーします。

✅

PowerShell（管理者）を使って進めます。 スタートメニューで「PowerShell」と検索し、右クリック →「管理者として実行」で開いてください。

Windows PowerShell（管理者）
Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved. PS C:\Users\user>
ℹ️

コマンド内の # コメント で始まる行は説明文です。まとめてコピーしても動作に影響はありません。

1 必要なツール一覧

この手順でインストールするツールとアカウントの全体像です。

Node.js 必須

Claude Code・Codex CLI の実行環境

Git 必須

バージョン管理ツール

VS Code 必須

コードエディタ

GitHub CLI 必須

gh コマンド。GitHub 操作に使用

Python 任意

バナー画像生成のみ使用

Claude アカウント 必須

Pro / Max プラン（claude.ai）

ChatGPT アカウント 必須

Codex CLI 認証用。無料 OK

GitHub アカウント 必須

コード管理・テンプレート作成

2 Step 1 　winget を確認する

Windows には winget（Windows Package Manager）という標準ツールがあり、 コマンド一発でアプリをインストールできます。まず使えるか確認します。

PowerShell（管理者） 
winget --version

実行するとこのような結果が返ります。

Windows PowerShell（管理者）
PS C:\Users\user> winget --version v1.8.1911 PS C:\Users\user>

バージョン番号（v1.x.xxxx）が表示されれば OK です。

⚠️

「コマンドが見つからない」と表示された場合：Microsoft Store で「アプリ インストーラー」を検索して更新するか、Windows Update を実行してから再試行してください。

3 Step 2 　開発ツールを一括インストールする

以下のコマンドをまとめてコピー＆ペーストして実行します。インストール済みのものは自動的にスキップされます。

PowerShell（管理者） 
# Node.js LTS
winget install -e --id OpenJS.NodeJS.LTS

# Git
winget install -e --id Git.Git

# GitHub CLI（gh コマンド）
winget install -e --id GitHub.cli

# VS Code
winget install -e --id Microsoft.VisualStudioCode

# Python（バナー生成が不要なら省略可）
winget install -e --id Python.Python.3.12
Windows PowerShell（管理者）— winget 実行中
PS C:\Users\user> winget install -e --id OpenJS.NodeJS.LTS 見つかりました Node.js LTS [OpenJS.NodeJS.LTS] バージョン 20.18.1 このアプリケーションのライセンスはそのソース条項に従い付与されます。 ダウンロード中 https://nodejs.org/dist/v20.18.1/node-v20.18.1-x64.msi ████████████████████ 100% インストールが完了しました。 PS C:\Users\user> winget install -e --id Git.Git 見つかりました Git [Git.Git] バージョン 2.47.1 ████████████████████ 100% インストールが完了しました。
⚠️

インストール後は必ず PowerShell を閉じて開き直してください。新しくインストールしたコマンドは、再起動しないと認識されません。

インストール確認

PowerShell を開き直してから以下を実行します。

node --version
npm --version
git --version
gh --version
code --version
Windows PowerShell（管理者）— バージョン確認
PS C:\Users\user> node --version v20.18.1 PS C:\Users\user> npm --version 10.8.2 PS C:\Users\user> git --version git version 2.47.1.windows.1 PS C:\Users\user> gh --version gh version 2.62.0 (2024-11-14) PS C:\Users\user> code --version 1.95.3

すべてにバージョン番号が表示されれば OK です。

4 Step 3 　VS Code をセットアップする

VS Code はコードを読み書きするメインのエディタです。ターミナルも内蔵しているので、Claude Code もここから起動します。

Visual Studio Code
CLAUDE.md
README.md
package.json
📁
🔍
🧩
🐙
エクスプローラー
▾ MY-APP
▾ .claude
▸ skills
▾ docs
📄 index.html
📄 CLAUDE.md
📄 README.md
📄 package.json
# CLAUDE.md

## このリポジトリについて
phoneapp-dev-harness は個人開発アプリの開発
サイクルを回すための Skills 一式...
ターミナル
出力
問題
PS C:\Users\user\my-app> claude ✓ Claude Code v1.x.x が起動しました
1

VS Code を起動する

スタートメニューで「Visual Studio Code」と検索して起動します。

2

日本語化する（任意）

左サイドバーの拡張機能アイコン（🧩）をクリックし、Japanese Language Pack を検索してインストール。再起動後に日本語化されます。

3

ターミナルを開く

Ctrl + `（バッククォート）でターミナルが開きます。ここから claude コマンドを実行します。

5 Step 4 　GitHub をセットアップする

GitHub アカウントを作成する

github.com でアカウントを作成します。すでにある場合はスキップしてください。

gh コマンドでログインする

gh auth login

対話式の選択肢が表示されます。矢印キーで選んで Enter を押します。

Windows PowerShell — gh auth login
PS C:\Users\user> gh auth login ? What account do you want to log into? > GitHub.com GitHub Enterprise Server ? What is your preferred protocol for Git operations on this host? > HTTPS SSH ? How would you like to authenticate GitHub CLI? Paste an authentication token > Login with a web browser ! First copy your one-time code: A1B2-C3D4 Press Enter to open github.com in your browser...

ブラウザが開きます。表示された 8 桁のコードを入力して GitHub にログインします。

github.com/login/device
デバイスのアクティベーション
GitHub CLI があなたのアカウントにアクセスする権限を求めています。
ターミナルに表示されたコードを入力して認証してください。
ワンタイムコード
A1B2-C3D4
✓ 続行

認証が完了するとターミナルに戻ります。

Windows PowerShell — gh auth 完了
✓ Authentication complete. ✓ Logged in as toshiki1995 PS C:\Users\user>

Git のユーザー情報を設定する

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

6 Step 5 　Claude Code をインストールする

⚠️

Claude Pro または Max のサブスクリプションが必要です。claude.ai でプランに加入してからインストールしてください。

npm install -g @anthropic-ai/claude-code

起動と初回ログイン

VS Code のターミナル（Ctrl + `）で実行します。

claude
VS Code — ターミナル（Claude Code 起動）
PS C:\Users\user\my-app> claude ██████╗██╗ █████╗ ██╗ ██╗██████╗ ███████╗ ██╔════╝██║ ██╔══██╗██║ ██║██╔══██╗██╔════╝ ██║ ██║ ███████║██║ ██║██║ ██║█████╗ ✓ Claude Code v1.x.x ブラウザが開きます。claude.ai でログインしてください… ✓ ログイン完了 ╭─────────────────────────────────────────╮ │ ✻ Welcome to Claude Code! │ │ 何でも話しかけてください │ ╰─────────────────────────────────────────╯ ?
✅

VS Code のターミナルから起動するのがおすすめです。Ctrl + ` でターミナルを開き、claude と入力するだけで起動できます。

7 Step 6 　Codex CLI をインストールする

このスターターキットでは実装（コーディング）を Codex CLI に委任します。ChatGPT アカウントで認証するので API キーは不要です。

npm install -g @openai/codex
codex login

ブラウザが開くので ChatGPT（OpenAI）アカウントでログインします。

codex login status
Windows PowerShell — codex login status
PS C:\Users\user> codex login status Logged in using ChatGPT PS C:\Users\user>

Logged in using ChatGPT と表示されれば OK です。

⚠️

「Failed to create session」エラーが出た場合：PowerShell（管理者）で以下を実行してから再試行してください。

icacls "$env:USERPROFILE\.codex" /grant "$env:USERNAME:(OI)(CI)F"

8 Step 7 　MCP サーバーを登録する

MCP（Model Context Protocol）は Claude Code が外部ツールと連携するための仕組みです。 Codex MCP サーバーをマシンに一度だけ登録すると、 このテンプレートから作ったすべてのプロジェクトで自動的に使えるようになります。 

claude mcp add codex -s user -- codex mcp-server

登録確認

claude mcp list
PS C:\Users\user> claude mcp list ✔ codex — Connected (codex mcp-server) 1 server connected

codex が ✔ Connected になっていれば OK です。

ℹ️

Connected にならない場合は Claude Code を再起動してください。登録直後はセッションに読み込まれていないことがあります。

9 Step 8 　Playwright をセットアップする（任意）

app-release-promo スキルでリリース告知バナー画像を生成する場合のみ必要です。告知素材を使わない場合はスキップしてください。

# スキルのディレクトリへ移動
cd .claude\skills\app-release-promo

# 仮想環境を作成
python -m venv .venv

# Playwright をインストール
.venv\Scripts\pip install playwright

# Chromium ブラウザをインストール
.venv\Scripts\python -m playwright install chromium

# プロジェクトルートに戻る
cd ..\..\..

10 全体の開発フロー

このスターターキットは 5 つのフェーズで開発を進めます。Claude Code と Codex の役割分担がポイントです。

Phase 1

要件定義

機能の目的・受け入れ基準を整理し docs/dev-workflow/<機能名>/requirements.md に保存。

Claude Code
Phase 2

設計

アーキテクチャ・API 設計・Codex への実装指示を含む設計書を作成。

Claude Code
Phase 3

実装（Codex に委任）

設計書の実装指示を Codex に渡してコードを書かせる。差し戻しも同じスレッドで継続。

Codex
Phase 4

評価

受け入れ基準の突き合わせ・コードレビュー・セキュリティチェック。不合格なら Phase 3 へ差し戻し。

Claude Code
Phase 5

リリース準備

CHANGELOG・PR 説明の下書き。SNS 告知素材が必要なら app-release-promo スキルへ委譲。

Claude Code

11 含まれるスキル

🔄

dev-workflow

トリガー：「〇〇機能を実装したい」「この要件で開発を進めて」などで自動起動

  • 要件定義→設計→Codex 委任→評価→リリース準備を一気通貫で管理
  • 各フェーズで成果物を docs/dev-workflow/ に自動保存
  • 評価で不合格なら自動的に差し戻しループを実行
  • セキュリティレビュー（OWASP Top 10 視点）を標準搭載
📢

app-release-promo

トリガー：「リリース告知素材作って」「SNS 投稿文作って」などで自動起動

  • Instagram / Threads 向け投稿文を複数案生成
  • アプリアイコン＋キャッチコピーの告知バナー画像（PNG）を生成
  • Codex CLI 経由で AI コンセプト画像を生成（オプション）
  • 生成物は release-assets/<アプリ名>/<日付>/ に保存

12 実際の使い方

新規プロジェクトを作成する

GitHub でこのリポジトリの 「Use this template」 ボタンから新しいリポジトリを作成します。

gh repo create my-app --template toshimaru-dev/phoneapp-dev-harness --clone
cd my-app
npm install

Claude Code を起動して話しかける

Claude Code
my-app — dev-workflow スキル
ログイン機能を実装したい。メールアドレスとパスワードで認証して JWT を返す API を作ってほしい。
👤
✻
🔄 Phase 1 — 要件定義
承知しました。要件を整理します。

機能名： ログイン API
目的： メール・パスワードで認証し JWT を発行する

受け入れ基準を確認させてください：
① 正しい認証情報で 200 + JWT を返す
② 誤ったパスワードで 401 を返す
③ トークンの有効期限は 24 時間

この内容で合っていますか？
合っています。進めてください。
👤
✻
🔄 Phase 2 — 設計
設計書を作成しています…
✅

フェーズごとに Claude Code が確認を求めます。要件の認識違いをフェーズ初期に潰せるので手戻りが大幅に減ります。

13 Tips & ベストプラクティス

場面ポイント
要件定義受け入れ基準は「〇〇した時に△△になる」の形で書くほど、評価フェーズがスムーズになる
差し戻しCodex への修正指示は必ず同じ threadId で送る。新しいセッションを立てると文脈が失われる
ループが収束しない評価→差し戻しが 3 回を超えたら設計書の粒度を疑う。「設計を見直して」と Claude Code に伝える
CLAUDE.md の活用触ってほしくないファイルや使ってはいけないパッケージがあれば CLAUDE.md に明記する
VS Code との併用Claude Code のターミナルと VS Code を並べておくとコードの確認・手動編集がしやすい

14 トラブルシューティング

症状対処
winget が認識されないMicrosoft Store で「アプリ インストーラー」を更新するか Windows Update を実行
node / git / gh が認識されないインストール後に PowerShell を開き直していない。閉じて再起動してから再確認
claude が認識されないnpm install -g @anthropic-ai/claude-code を再実行してターミナルを再起動
mcp__codex__codex が見当たらないclaude mcp add codex -s user -- codex mcp-server を実行後に Claude Code を再起動
codex: command not foundnpm install -g @openai/codex を実行
Codex ログインで権限エラーPowerShell（管理者）で icacls "$env:USERPROFILE\.codex" /grant "$env:USERNAME:(OI)(CI)F"
gh auth login でブラウザが開かないgh auth login --web を試す
Playwright で ModuleNotFoundError.venv\Scripts\python 経由で実行しているか確認。グローバルの python は使わない
Codex が指示と違う実装をした新しいセッションを立てず、mcp__codex__codex-reply で同じ threadId に修正指示を送る