Claude Codeで実際に作る

第8回でAnthropicとNode.jsの準備、第9回でターミナルに慣れる、を済ませました。今日は最後の仕上げ、Claude Code本体のインストールと、最初の対話まで進めます。

ゴールは、自分のパソコンでClaude Codeを起動して「Hello」と返してもらうところまで。

ㅤ

ステップ1　Claude Codeを入れる

ターミナルを開いて、こう打ち込みます。

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

ターミナルで `npm install -g @anthropic-ai/claude-code` を実行中の画面。プログレスバー付き — 数十秒〜数分かかります。コーヒーでも淹れて待ちます。

「npm」というのは、Node.jsと一緒に入る、ソフト管理ツールのこと。日本語にすると「ライブラリの管理人」みたいな存在です。これを使って、Claude Codeをインストールしています。

数十秒〜数分待ちます。「added ◯ packages」のようなメッセージが出たら成功です。

ターミナルで `added 142 packages in 28s` の成功メッセージが表示された画面。ティール矢印で「成功」 — この行が出れば、インストール成功です。

エラーが出る人は、後ろに「sudo」を付けて再実行します（Mac/Linuxの場合）。

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

ターミナルで sudo付きで再実行 → パスワード入力プロンプト → 「打っても表示されないが入力されている」の注釈 — パスワードは画面に表示されません。これで正常です。

「sudo」は、「管理者として実行する」という意味の合言葉です。パスワードを聞かれたら、PCのログインパスワードを入力します。打っても画面には何も表示されませんが、ちゃんと入力されているので、最後にEnterを押します。

ㅤ

ステップ2　起動する場所を作る

何でもいいので、適当なフォルダを作ります。例えばデスクトップに「vibe-test」というフォルダを作るとします。

Finder のデスクトップに「vibe-test」フォルダが新規作成されている画面 — フォルダ名は何でもOK。今回は vibe-test にしておきます。

ターミナルで、そのフォルダに移動します。

cd ~/Desktop/vibe-test

第9回で出てきた cd コマンドの出番です。「~/Desktop/vibe-test」は「ホーム → デスクトップ → vibe-testフォルダ」の意味。 Windowsの場合は「cd C:\Users\あなたの名前\Desktop\vibe-test」のようになります。

ㅤ

ステップ3　起動する

そして、こう打ちます。

claude

ターミナルで claude コマンドを実行 → CLAUDEロゴと Welcome メッセージが表示された画面 — この瞬間、Claude Code が PC に「住んだ」状態になります。

初回はAnthropicへのログインを求められます。ブラウザが自動で開くので、画面の指示通りに「認証」をクリックします。

ブラウザが自動で開いた Anthropic OAuth認証画面。「Claude Code にアクセス権を付与」ダイアログ、ティールの「認証」ボタン — 初回だけブラウザに飛びます。「認証」を押せば終わり。

ターミナルに戻ると、Claude Codeが起動しています。

ここまで来たら、もう山は越えました。

ㅤ

ステップ4　話しかけてみる

入力欄に、こう書いてみます。

こんにちは。あなたは何ができますか？簡単に教えてください。

しばらくして、Claude Codeから返事が返ってきます。これが、最初の対話です。

Claude Code に「こんにちは」と話しかけて、Claudeが「ファイル操作・編集・実行ができます」と返答している画面 — 最初の対話。LINE と同じ感覚で話せます。

次は、こう書きます。

このフォルダに、index.htmlというファイルを作ってください。内容は「Hello, Vibe Coding」と表示するだけのシンプルなページにしてください。

Claude Code に「index.htmlを作って」と頼み、ファイル作成→完了通知が表示されている画面 — 数秒で「✓ Created index.html」の完了通知が出ます。

Claude Codeでファイルが作られた直後に、フォルダ・中身・ローカル表示を確認するターミナル画面です。

ターミナルで作業フォルダ、Claude Codeのバージョン、index.htmlの中身を確認している実画面 — 作って終わりではなく、ファイルがあるか、中身が期待どおりかを自分の目で見ます。

数秒で、Claude Codeがファイルを作ってくれます。フォルダ（FinderやExplorer）を開くと、index.htmlが本当にできているはずです。

Finder の vibe-test フォルダに index.html が新規生成されている画面。ファイルアイコンに「NEW」のティール注釈 — 自分のフォルダに、ファイルが生まれた瞬間。

ダブルクリックすると、ブラウザに「Hello, Vibe Coding」と表示されます。

ブラウザに大きく「Hello, Vibe Coding」と表示された完成画面 — Claude Code が作って動かした、最初のページ。

ここで一区切りです。お疲れさまでした。 Claude Codeに、自分のパソコンで初めて働いてもらいました。

ㅤ

よくあるつまずき、3つ

1. 「command not found: claude」と出る

Claude Codeはインストールできたのに、claude というコマンドが見つからないと言われるパターン。

PCを一度再起動してから、新しいターミナルを開いてもう一度試します。それでもダメなら、もう一度ステップ1のインストールコマンドを実行し直します。

2. 「permission denied」と出る

権限エラーです。コマンドの先頭に「sudo」を付けて再実行します（Mac/Linuxの場合）。 Windowsの場合は、PowerShellを「管理者として実行」で開き直します。

3. ログイン画面が開かない

ブラウザが自動で開かない場合は、ターミナルに表示されるURLをコピーして、自分でブラウザに貼り付けて開きます。 URLは長いですが、全部選択して、必ず最後まで含めるのがコツです。

詰まったら、Claude.aiのチャットや、ChatGPTに、エラーメッセージをそのまま貼り付けて聞きます。今のAIは、たいていの環境構築の詰まりに答えを持っています。

ㅤ

ChatGPTと、Claude Codeの違いを実感する

ここで一度、ChatGPTで作ったときと、Claude Codeで作ったときの違いを振り返ってみてください。

ChatGPTで作ったときは、こうでした。コードを表示してもらう → コピーする → エディタに貼り付ける → 名前を付けて保存する → ブラウザで開く。 5工程です。

Claude Codeで作ったときは、こうでした。「ファイルを作って」と頼む → ブラウザで開く。 2工程です。

ChatGPT 5工程 vs Claude Code 2工程のフローチャート横並列対比 — 同じ結果に、5工程と2工程の差。第3段の旅の収穫です。

この差が、第3段の旅の収穫です。

ㅤ

今日のまとめ

3行で振り返ります。

Claude Codeはnpmで一発インストール、sudoが必要なら付ける
claude コマンドで起動、初回はブラウザでログイン
ChatGPTで5工程だった作業が、Claude Codeでは2工程になる

ㅤ

次回予告

第11回からは、第4段「育てる」に入ります。第5回でChatGPTで作ったツールを、Claude Codeで「育てて」みます。機能を1つずつ足し、見た目を整え、最後には複数のファイルに分けていく。

第3段までで、完成形のアプリは1本できました。ここからは、それを大きくしていく工程です。

ㅤ

環境構築は、誰でも一度はつまずきます。それでも越える価値がある、半日です。

ㅤ

連載の更新は、メルマガ「おかもんだより」でもお知らせします。よかったら登録してお待ちください。

ㅤ

演習：30分の宿題

第10回は、Claude Code を実際に動かす回。所要時間20分。

宿題1：ChatGPT版と Claude Code版を、両方作って比較する（15分）

第5回でChatGPTで作った解熱薬計算ツールと同じものを、今度は Claude Code で作ってください。

cd ~/Desktop
mkdir vibe-fever-app
cd vibe-fever-app
claude

そして、Claude Code に：

子どもの体重を入れると、解熱薬の用量を計算する
シンプルな HTML ページを作ってください。

計算式：体重 × 10〜15 mg/kg
最大量：500mg/回

注意書きとして「医師の指示に従ってください」と表示。
スマホでも読みやすく。

「✓ Created index.html」が出たら、Finder で確認 → ダブルクリック → ブラウザで動くのを見る。

宿題2：体感した工程数の差を記録する（5分）

ChatGPT版（第5回）と Claude Code版（今日）、それぞれにかかった所要時間と、自分の手で動かした工程数を記録してください。

私の場合：

ChatGPT版：20分（うちコピペで5分、保存で3分）
Claude Code版：8分（うち会話で5分、ブラウザ開きで30秒）

体で違いを覚えておくと、第11回以降で「これは Claude Code の出番だな」と判断できるようになります。

医療職別実例ギャラリー：Claude Code 初心者の3つの罠

罠1：PATH が通らない（typo の可能性も）

claude コマンドを叩いても command not found が出るパターン。原因の8割は、PC の再起動が必要なだけ。残り2割は、インストール時にエラーが起きていた。

対処：PC を再起動してから、新しいターミナルで再試行。それでもダメなら、claude.ai のチャット版に「以下のエラーが出ました」とそのまま貼って聞く。

罠2：sudo 無限ループ

Mac で permission denied → sudo を付ける → また失敗 → sudo を付ける、を繰り返してしまうパターン。 npm のグローバルインストール先が /usr/local/lib/node_modules のような管理者領域だと、毎回 sudo が必要になる。

対処：nvm（Node Version Manager）を使うと、ユーザー領域に Node.js を置けるので sudo が不要になる。少し上級者向けだが、Claude Code に「nvm をインストールする手順を教えて」と聞けば、対話形式で進めてくれる。

罠3：認証ループから抜け出せない

OAuth の認証画面でブラウザが開かない、または認証後にターミナルが応答しないパターン。

対処：

ターミナルに表示される URL を全部選択してコピー
ブラウザに手動で貼り付けて開く
認証後、ターミナルに戻ると進んでいるはず

それでもダメなら、ターミナルを Ctrl+C で一度終了させて、もう一度 claude で起動し直す。

もっと深く：Claude Code の CLI 設計思想

なぜ Claude Code は「会話型」なのか。

選択肢としては、以下のようなUIが考えられました。

チャット形式：今のClaude.ai のような Web UI
コマンドフラグ形式：claude generate --type=html --content="..." のような従来 CLI
対話プロンプト形式：claude 起動 → 自由記述で対話

Anthropic は 3番目（対話プロンプト形式） を選びました。

理由は明確で、ユーザーが「何を頼みたいか」を、固定された選択肢ではなく自然言語で伝えられる方が、結果的に意図が伝わりやすいから。従来 CLI のフラグ設計（--type --content）は、開発者が想定した使い方の中でしか動けません。対話プロンプトは、ユーザーが想定外の使い方を試すことができる。

これは、Vibe Coding の思想そのものです。「事前に決めた設計の中」ではなく「いま欲しいもの」を主役にする。 CLI 設計から、その思想が貫かれています。

動画で見る

YouTube：Anthropic Claude Code 公式デモ：公式の使い方

参考・出典

Anthropic「Claude Code」公式ドキュメント https://docs.anthropic.com/claude/docs/claude-code
安野貴博「バイブコーディング超入門講座第4回 Claude Code」（YouTubeチャンネル「安野貴博の自由研究」、2026年4月）
paiza株式会社「バイブコーディング入門 Claude Code編」 https://paiza.jp/works/vibe-coding-claude-code/trial