メインコンテンツへスキップ
レッスン一覧に戻る

atom.web-builder.install-claude-code-and-verify

Claude Codeを導入して確認する

Claude Codeを導入して確認する このレッスンでは、あなたのパソコンに「Claude Code(クロードコード=文章で指示するとコードを書いてくれるAIアシスタント)」を入れて、ちゃんと動くところまでを15...

install-claude-code-and-verifyinstall-claude-code-and-verifyClaude Code を PC にインストールして動作確認できる状態を作れます。
想定時間未設定公開状態: draft
学習メモ

成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: code_snippet検証: basic_manual_check_v1

証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。

test_result

メディアメディアレッスン内に出てくる図や動画のスロットです。実際の画面やイメージで理解を補助します。

diagramscreen_capture

レッスン本文

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 のような緑/白い文字で終わっている
  • 悪い例: EACCESpermission denied が赤字で出ている → 権限不足なので、少し時間を置いて再実行するか、前提レッスンの「Node/pnpmの入れ直し」を参照してください

ログインする

続けて、ターミナルで次を実行します。ブラウザが自動で開き、Anthropicのログイン画面が表示されます。

claude

初回はログインを求められるので、画面の指示にしたがってメールアドレスでログインしてください。ログインが終わるとターミナルに戻り、対話の入力欄が出てきます。

初回ログイン画面と対話プロンプト

動作確認する

対話入力が出たら、次の短い質問を日本語で打ってEnterを押します。これは「ちゃんと会話できるか」を確かめる試運転です。

こんにちは。今の作業フォルダの中身を日本語で一覧にしてください。

Claude Codeが、現在のフォルダにあるファイルを日本語の箇条書きで返せば成功です。返事が来ない・止まっている場合は、一度Ctrl+C(コントロールキーとCキーを同時押し)で中断し、ターミナルを閉じて開き直してから claude をもう一度実行してください。

  • 良いプロンプトの例: 「このフォルダに README.md があるか確認して、中身を3行で要約してください」
  • 悪いプロンプトの例: 「よろしく」だけ(何をしてほしいか伝わらず、AIが戸惑います)

つまずきやすいポイント

  • command not found: claude と出る: インストールは成功したのに呼び出せない状態です。ターミナルを一度閉じて開き直すと読み込み直されて解決することが多いです
  • ブラウザのログイン画面が開かない: 手動でAnthropicのログインページを開き、同じメールアドレスでログインしてからターミナルに戻ってください
  • 会社のパソコンで止まる: 社内ネットワークが外部通信を制限していることがあります。自宅回線やテザリングで試すと切り分けできます

確認できたら記録する

最後に、先ほどClaude Codeが返してくれた「フォルダ一覧」のテキストを、そのままメモ帳やドキュメントにコピーして保存しておきます。これがこのレッスンの成果物(=できるようになった証拠)です。次のレッスンで「自分の手元でAIが動いた状態」を前提にして進められます。

成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: code_snippet

検証: basic_manual_check_v1

証跡とメディア

証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。

test_result

メディア

diagramscreen_capture
学習完了