AIとつくる はじめてのWeb開発実践講座完全無料
超初級編のカリキュラムへ

超初級編約30分

番外編 自分のPCでClaude Codeを動かす

ブラウザ版に慣れたら。自分のPCを“開発環境”にするステップアップ回

②〜④の講座は、ブラウザだけで完結します。でも、本格的に開発を続けるなら自分のPCにClaude Codeを入れるのが定番装備。この番外編では、プロと同じ“ローカル環境”を一度だけ整えて、AIにファイルを作ってもらうところまでやります。

今日のゴール（これだけ）

「Claude Codeを自分のPCで動かし、頼んでファイルを1つ作ってもらう」——ここだけに集中します。欲張らないのが続けるコツ。所要30分くらい、休み休みでOK。

環境構築は“最初の崖”。でも一度だけ

ここが一番つまずきやすい場所です。でも、この設定は最初の1回だけ。今日越えれば、次回からはずっと作る側に回れます。うまくいかなくても落ち込まないで——下に“つまずき対策”を用意しています。

STEP0：あなたのPCはMac？ Windows？

ここから先は、お使いのPCで手順が少し違います。下のタブを自分のPCに切り替えてください。以降のSTEPも、このタブの選択に合わせて読み進めればOKです。

Macの人は、最初から入っている「ターミナル」という黒い画面を使います（前回までで概念は学びましたね）。LaunchpadやSpotlight検索（⌘＋スペース）で「ターミナル」と打つと開けます。

ターミナルを開いておこう

この先のコマンドは、すべてこの黒い画面に打ち込みます。開きっぱなしにしておきましょう。

STEP1：コードを見るための「VS Code」を入れる

まずは前回学んだコードエディタ・VS Codeを入れます。AIが作ったファイルを“見る”ための道具です。

  1. ブラウザで「VS Code ダウンロード」と検索し、公式サイト（code.visualstudio.com）を開く。
  2. 「Mac」用をダウンロード。
  3. ダウンロードしたファイルを開き、出てきたアイコンを「アプリケーション」フォルダにドラッグ。
  4. アプリケーションからVS Codeを起動できればOK。

今は“入れるだけ”でOK

VS Codeの使い方は今日は気にしなくて大丈夫。あとでAIが作ったファイルを開いて「中身ってこうなってるんだ」と眺めるために使います。

STEP2：土台の「Node.js」を入れる

前回学んだNode.js（JavaScriptをPCで動かす土台）を入れます。Claude Codeもこの上で動きます。

  1. ブラウザで「Node.js」と検索し、公式サイト（nodejs.org）を開く。
  2. 「LTS」と書かれた方（安定版）をダウンロード。
  3. ダウンロードしたファイルを開き、案内に沿って「続ける」を押していくだけ。

入ったか確認しましょう。ターミナルに次のコマンドを打ってEnter。これはあなたの“人生初コマンド”かもしれません（前回ターミナルの概念は学びましたね）。

node -v

✅ ここが最初の“勝利ポイント”

v20.11.0 のような数字が表示されたら成功！数字は人によって違ってOK。これでPCに土台が入りました。出ない場合は、下の「つまずいたら」を見てください。

STEP3：主役「Claude Code」を入れる

いよいよ主役の登場。Node.jsのnpm（前回学んだ“部品のお取り寄せ”）を使って、Claude Codeを入れます。ターミナルに次を打ってEnter。

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

少し時間がかかります（文字がたくさん流れますが、止まるまで待てばOK）。終わったら、次を打って起動します。

claude

初回はログインを求められます。画面の案内に従って、ブラウザでAnthropicのアカウントにログイン（または登録）してください。Claudeの利用プランが必要な場合があります。

Windowsで `npm` が使えない時

「npm が見つかりません」と出たら、STEP2のNode.jsインストール後にターミナルを開き直していないのが原因のことが多いです。一度閉じて開き直してから、もう一度試してください。

STEP4：はじめての“お願い”をする

準備完了！最後に、AIにファイルを1つ作ってもらいます。まず、今日の作業をするフォルダを用意しましょう。ターミナルに順番に打ってEnter（mkdir＝フォルダを作る、cd＝そこへ移動、は前回学びました）。

mkdir hello-ai
cd hello-ai
claude

Claude Codeが起動したら、日本語でこう頼んでみてください（コピペでOK。〇〇は自分の名前に変えて）。

hello.html というファイルを作って。中身は、大きな見出しで「こんにちは、〇〇です」と表示するシンプルなWebページにして。

Claude Codeが「このファイルを作っていい？」と確認してきたら、承認（y など）します（前回学んだ“危険な操作は承認制”の実践です）。hello.htmlが生まれたら大成功！

第1回との答え合わせ

生まれたhello.htmlをVS Codeで開いてみてください。**第1回であなたが手で打った<h1>が、今度はAIの手で書かれている**はず。「これがAIと作るってことか！」を、ぜひ目で確かめてください。

STEP5：ブラウザで自分の名前を見る

最後に、できたページを表示します。hello-aiフォルダの中のhello.htmlをダブルクリックすれば、ブラウザで開けます（または、VS Codeでファイルを右クリック→表示）。画面に「こんにちは、〇〇です」が大きく出たら——

おさらい：今日使った“言葉”

node -v
Node.jsが入ったか、バージョン番号で確認するコマンド。
npm install -g …
部品（パッケージ）をPC全体で使えるように入れる。
mkdir / cd
フォルダを作る／そのフォルダへ移動する。
claude
Claude Codeを起動する合言葉。

番外編・完成チェック

0 / 5

つまずいたら（よくある3つ）

①「command not found / 見つかりません」→ インストール後にターミナルを開き直す。②「permission denied / 権限がありません」→ 会社・学校のPCだと制限のことが。個人PCで試すのが確実。③それでも詰まったら、エラー文をまるごとコピーしてClaudeに貼り、「このエラーの直し方を教えて」と聞く（前回の“黄金手順”ですね）。

お疲れさまでした！

一番の難所「環境構築」を越えました。これであなたは、ブラウザでもPCでも作業できる二刀流。講座の続き（③以降）はブラウザ版のまま進められますが、大きなプロジェクトや細かい作業では、今日のローカル環境が強い味方になります。