← 学習キットトップへ戻る
Step 1｜セットアップガイド

インストール
チェックリスト

各手順をクリックして✓を付けながら進めましょう。
全ての手順が完了したら開発スタートです！

0 / 0 ステップ完了 0%
① Git のインストール
ファイルの変更履歴を管理するツール。GitHubを使うために必要です。
✓
インストーラーをダウンロードする
下のボタンをクリックしてGitのインストーラーをダウンロードします。
⬇ Git for Windows をダウンロード
✓
インストーラーを実行する
ダウンロードされた「Git-XX.X.X-64-bit.exe」をダブルクリックして実行します。
全ての画面で「Next」→ 最後に「Install」をクリックするだけでOKです。
✓
インストールを確認する
コマンドプロンプトを開いて以下を入力：
git --version
「git version 2.XX.X」と表示されればOKです！
✓
ターミナルを開く
「Launchpad」→「その他」→「ターミナル」を開きます。
または ⌘ + スペースで「ターミナル」と検索してもOKです。
✓
Homebrewをインストールする
macOSのパッケージ管理ツールをインストールします：
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
⚠️ パスワードを聞かれたらMacのログインパスワードを入力（入力中は何も表示されませんが正常です）。
✓
Gitをインストールして確認する
ターミナルで以下を順番に実行します：
brew install git
git --version
「git version 2.XX.X」と表示されればOKです！
② Node.js のインストール
JavaScriptを動かすための実行環境。Next.js開発に必須です。
✓
Node.js（LTS版）をダウンロードする
「LTS」と書かれたボタン（安定版）をクリックしてダウンロードします。
⬇ Node.js をダウンロード
⚠️ 「Current（最新版）」ではなく「LTS（安定版・推奨）」を選んでください。
✓
インストーラーを実行して確認する
ダウンロードされたファイルをダブルクリックし、全て「Next」→「Install」。
コマンドプロンプトを再起動後に確認：
node --version
npm --version
両方ともバージョン番号が表示されればOKです！
✓
Node.jsをインストールして確認する
Homebrewを使ってインストールします：
brew install node@20
node --version
npm --version
両方ともバージョン番号が表示されればOKです！
③ Python のインストール
MCPサーバーなど一部のAIツールで必要になります。
✓
インストーラーをダウンロードする
⬇ Python をダウンロード
✓
「Add Python to PATH」に必ずチェックを入れる
インストーラー起動後、画面下部の「Add Python to PATH」にチェックを入れてから「Install Now」をクリックします。
⚠️ このチェックを忘れると、コマンドプロンプトからPythonが使えなくなります！
✓
インストールを確認する
python --version
「Python 3.XX.X」と表示されればOKです！
✓
Pythonが入っているか確認する
Macには最初からPythonが入っていることがあります：
python3 --version
「Python 3.X.X」と表示された場合は次の章に進んでOKです。表示されない場合は `brew install python` を実行してください。
④ VS Code のインストール
コードを書く場所（エディター）。Claude Code拡張機能もここで動きます。
✓
VS Codeをダウンロードしてインストールする
下のボタンからダウンロードし、インストーラーを実行します。
「デスクトップ上にアイコンを作成」と「PATHへの追加」にチェックを入れておくと便利です。
⬇ VS Code をダウンロード
✓
VS Codeをダウンロードしてインストールする
ダウンロードしたzipを解凍し、「Visual Studio Code.app」を「アプリケーション」フォルダへドラッグ&ドロップします。
⬇ VS Code をダウンロード
✓
VS Codeを起動して日本語化する
VS Codeを起動 → 左側の四角が4つのアイコン（拡張機能）をクリック →「Japanese」で検索 →「Japanese Language Pack for VS Code」をインストール → VS Codeを再起動。
⑤ Anthropicアカウントの作成
Claude Codeを使うためのアカウントです。
✓
Anthropicのサイトでアカウントを作成する
🌐 claude.ai を開く
Googleアカウントやメールアドレスで登録できます。
✓
有料プランに加入する（推奨）
サイト右上のメニューから「Upgrade」を選択。フル機能には有料プランが必要です。
💡 まず無料プランで試してみてもOKです。Proプランは月額約20ドル（約3,000円）です。
⑥ Claude Code 拡張機能のインストール
VS CodeにAIアシスタントを追加します。
✓
VS Codeで拡張機能を開く
左側のメニューの「四角が4つのアイコン」をクリック、または：
Ctrl + Shift + X
⌘ + Shift + X
✓
「Claude Code」を検索してインストールする
検索欄に「Claude Code」と入力。作者が「Anthropic」となっているものを選んで「インストール」をクリックします。
✓
Anthropicアカウントでサインインする
左側のClaudeアイコン →「Sign in」→ ブラウザが開くので⑤で作ったアカウントでログインします。
✓
動作確認：「こんにちは」と入力してみる
Claudeアイコンをクリック → チャット欄に「こんにちは」と入力してEnter。
✅ Claudeが返事をしてくれれば成功です！
⑦ GitHubアカウントの作成
コードを保管・管理するクラウドサービスのアカウントです。
✓
GitHubにアカウントを作成する
🌐 GitHub アカウント作成
無料プランで十分です。クレジットカード不要で登録できます。
✓
GitのユーザーIDとメールを設定する
「あなたの名前」と「登録したメールアドレス」を自分のものに変えて入力してください：
git config --global user.name "あなたの名前"
git config --global user.email "your@email.com"
⑧ 最終動作確認
全てのインストールが正しく完了したか確認します。
✓
全ツールのバージョンを一括確認する
git --version
node --version
npm --version
全て数字のバージョンが表示されればセットアップ完了！
✓
VS CodeでClaude Codeが使えるか確認する
VS Codeを開き、Claudeアイコンをクリックしてチャット欄に「はじめまして！」と入力してみましょう。
🎉 これで開発の準備が全て整いました！

セットアップ完了！

全ての手順が完了しました。
次はマニュアルで基礎知識を学び、理解度チェックで確認しましょう！

📖 マニュアルを読む ✅ 理解度チェックへ