atom.web-builder.install-claude-code-and-verify
Claude Codeを導入して確認する
Claude Codeを導入して確認する このレッスンでは、あなたのパソコンに「Claude Code(クロードコード=文章で指示するとコードを書いてくれるAIアシスタント)」を入れて、ちゃんと動くところまでを15...
成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。
証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。
メディアメディアレッスン内に出てくる図や動画のスロットです。実際の画面やイメージで理解を補助します。
レッスン本文
Claude Codeを導入して確認する
このレッスンでは、あなたのパソコンに「Claude Code(クロードコード=文章で指示するとコードを書いてくれるAIアシスタント)」を入れて、ちゃんと動くところまでを15分で確認します。料理で例えるなら、新しい調理道具を箱から出してコンセントに挿し、試運転でお湯を沸かすところまで、というイメージです。ここを越えると、以降のレッスンで「AIに頼んで手を動かしてもらう」体験が一気にスムーズになります。

前提を確認する
- あなたのパソコンにNode.js(ノード=JavaScriptを動かすための土台ソフト)とpnpm(ピーエヌピーエム=ソフトの部品をまとめて入れる道具)が入っていること
- ターミナル(=文字で命令を打ち込む黒い画面)を一度でも開いたことがあること
- Anthropicのアカウント(=Claudeを提供している会社のログイン情報)を用意できること
まだNode.jsやpnpmが入っていない場合は、先に前提レッスンを済ませてから戻ってきてください。
インストールする
ターミナルを開いて、次の1行をコピペして実行します。これは「世界中で共有されているソフトの棚から、Claude Codeというソフトを取ってきて、どこからでも呼べるように登録してね」という意味のおまじないです。
npm install -g @anthropic-ai/claude-code
数十秒待つと、「added ○ packages」のような表示が出ます。エラーメッセージが赤字で出なければ成功です。
- 良い例: 最後の行が
added N packages in Xsのような緑/白い文字で終わっている - 悪い例:
EACCESやpermission deniedが赤字で出ている → 権限不足なので、少し時間を置いて再実行するか、前提レッスンの「Node/pnpmの入れ直し」を参照してください
ログインする
続けて、ターミナルで次を実行します。ブラウザが自動で開き、Anthropicのログイン画面が表示されます。
claude
初回はログインを求められるので、画面の指示にしたがってメールアドレスでログインしてください。ログインが終わるとターミナルに戻り、対話の入力欄が出てきます。

動作確認する
対話入力が出たら、次の短い質問を日本語で打ってEnterを押します。これは「ちゃんと会話できるか」を確かめる試運転です。
こんにちは。今の作業フォルダの中身を日本語で一覧にしてください。
Claude Codeが、現在のフォルダにあるファイルを日本語の箇条書きで返せば成功です。返事が来ない・止まっている場合は、一度Ctrl+C(コントロールキーとCキーを同時押し)で中断し、ターミナルを閉じて開き直してから claude をもう一度実行してください。
- 良いプロンプトの例: 「このフォルダに
README.mdがあるか確認して、中身を3行で要約してください」 - 悪いプロンプトの例: 「よろしく」だけ(何をしてほしいか伝わらず、AIが戸惑います)
つまずきやすいポイント
command not found: claudeと出る: インストールは成功したのに呼び出せない状態です。ターミナルを一度閉じて開き直すと読み込み直されて解決することが多いです- ブラウザのログイン画面が開かない: 手動でAnthropicのログインページを開き、同じメールアドレスでログインしてからターミナルに戻ってください
- 会社のパソコンで止まる: 社内ネットワークが外部通信を制限していることがあります。自宅回線やテザリングで試すと切り分けできます
確認できたら記録する
最後に、先ほどClaude Codeが返してくれた「フォルダ一覧」のテキストを、そのままメモ帳やドキュメントにコピーして保存しておきます。これがこのレッスンの成果物(=できるようになった証拠)です。次のレッスンで「自分の手元でAIが動いた状態」を前提にして進められます。
種類: code_snippet
検証: basic_manual_check_v1
証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。
メディア