Claude Code Hands-on Training
SESSION 02

環境構築ハンズオン

VSCode、Node.js、Claude Codeをインストールし、AIに話しかけられる状態を作ります。ターミナルの最低限の操作もここで覚えます。

13:20 - 14:20（60分）
実践
STEP 1 / 10 MIN
VSCode をインストールする

VSCode（Visual Studio Code）はMicrosoft社が提供する無料のエディタです。本日の研修では、この画面の中で作業を進めます。既にインストール済みの方は次の手順へ進んでください。

HANDS-ON

VSCode のダウンロードとインストール

  1. ブラウザで code.visualstudio.com にアクセスする
  2. 青い「Download for Windows」ボタンをクリック
  3. ダウンロードされた .exe ファイルをダブルクリック
  4. インストーラーの指示に従い「次へ」を押していく（設定は初期値のままでOK）
  5. 「デスクトップ上にアイコンを作成する」にチェックを入れておくと便利です
  6. インストールが完了したらVSCodeを起動する
日本語化（任意）

メニューを日本語にしたい方は、以下の手順で設定してください。

Ctrl + Shift + X を押す
拡張機能の検索パネルが開きます。
「Japanese」と入力して検索
「Japanese Language Pack for Visual Studio Code」が見つかります。
Install ボタンをクリック
インストールが始まります。数秒で完了します。
「Change Language and Restart」をクリック
VSCodeが再起動し、メニューが日本語に変わります。
STEP 2 / 10 MIN
ターミナルの基本操作

ターミナルは、テキストでPCに指示を出す画面です。Claude Codeはこのターミナル上で動きます。覚えるコマンドは3つだけです。

HANDS-ON

ターミナルを開く

  1. VSCodeの上部メニューから「ターミナル」を選択
  2. 「新しいターミナル」をクリック
  3. 画面下部にターミナルが表示されます

cd（移動する）

フォルダを移動するコマンドです。「change directory」の略。

cd Desktop // デスクトップに移動

ls（一覧を見る）

今いるフォルダの中身を表示します。Windowsでは dir でも同じです。

ls // フォルダの中身を表示

mkdir（フォルダを作る）

新しいフォルダを作ります。「make directory」の略。

mkdir training // trainingフォルダを作成

Windowsの場合の補足

PowerShellでは ls も dir も使えます。cd と mkdir はWindows/Mac共通です。

EXERCISE

実際にやってみましょう

  1. ターミナルで cd Desktop と入力してEnter
  2. mkdir training と入力してEnter
  3. cd training と入力してEnter
  4. ls と入力してEnter（まだ何も表示されないのが正常です）
ここで全員の画面を確認します

ターミナルの表示が training フォルダを指していることを確認してから次に進みます。うまくいかない方は講師に声をかけてください。

STEP 3 / 10 MIN
Node.js をインストールする

Node.jsはJavaScriptというプログラミング言語をPC上で動かすための環境です。Claude Codeの動作に必要です。

HANDS-ON

Node.js のインストール

  1. nodejs.org にアクセスする
  2. 「LTS」と書かれた緑のボタンをクリック（推奨版です）
  3. ダウンロードされた .msi ファイルをダブルクリック
  4. インストーラーの指示に従って進める（すべて初期値でOK）
  5. インストール完了後、VSCodeのターミナルを閉じて開き直す
インストールの確認
node --version // v22.x.x のようなバージョン番号が表示されれば成功です
バージョンが表示されない場合

VSCodeを完全に閉じて再起動してください。それでもダメな場合は、インストール時にPATHの設定が反映されていない可能性があります。講師に声をかけてください。

STEP 4 / 20 MIN
Claude Code をセットアップする

いよいよClaude Codeをインストールし、研修用の組織アカウントでログインします。

インストール

ターミナルに以下のコマンドを貼り付けてEnterを押してください。

// Windows (PowerShell) の場合 irm https://claude.ai/install.ps1 | iex
// Mac の場合 curl -fsSL https://claude.ai/install.sh | sh

「Claude Code has been installed」と表示されたらインストール完了です。次のコマンドで確認してください。

claude --version // バージョン番号が表示されれば成功
ログイン
claude と入力してEnter
Claude Codeが起動し、ログイン方法の選択画面が表示されます。
「Claude account with subscription」を選択
矢印キーで選択し、Enterで決定します。「Anthropic API key」は選ばないでください。
ブラウザで認証する
自動的にブラウザが開きます。研修事務局から届いた招待メールで作成したアカウントでログインしてください。
「Authorize」をクリック
組織の選択を求められた場合は「ClaudeCodeTutorial」を選択してください。
VSCodeに戻ってEnterを何度か押す
利用規約の確認を経て、入力待ち状態になれば完了です。
動作確認

Claude Codeの入力欄に以下を入力してEnterを押してください。

こんにちは。動作確認です。今日の日付を教えてください。
応答が返ってきたら成功です

Claude Codeが日本語で応答すれば、セットアップは完了です。お疲れさまでした。

REFERENCE
画面の見方と基本操作

VSCode画面の構成

  • 上半分 = エディタ領域（ファイルの中身を表示）
  • 下半分 = ターミナル領域（Claude Codeとの対話）
  • 左サイドバー = ファイルツリー（フォルダ構成）

Claude Code の基本コマンド

  • テキスト入力 + Enter = メッセージ送信
  • Shift + Enter = 改行（送信しない）
  • /clear = 会話をリセット
  • /help = ヘルプを表示
  • /exit = Claude Codeを終了
  • Ctrl + C を2回 = 強制終了
許可を求められたら

Claude Codeがファイルを作成・編集する際に「Allow」や「Yes」と表示されることがあります。研修中は許可して進めてください。

TROUBLESHOOTING
困ったときは

claude コマンドが見つからない

VSCodeを完全に閉じて再起動してください。それでもダメな場合はPATHの設定が必要です。講師に声をかけてください。

ブラウザが自動で開かない

ターミナルに表示されるURLをコピーしてブラウザに貼り付けてください。 c キーでURLがクリップボードにコピーされます。

認証がターミナルに反映されない

VSCodeのウィンドウに戻り、数秒待ってください。反映されない場合は Ctrl+C を押してから claude を再実行してください。

メッセージに応答しない

インターネット接続を確認してください。Ctrl+C を押してから claude を再実行してください。改善しない場合は講師に声をかけてください。

参考リンク
Claude Code 公式ドキュメント VSCode ダウンロード Node.js 公式サイト
COMPREHENSION CHECK
理解度チェック
Q1. ターミナルで「training」フォルダを作成するコマンドはどれですか
Acd trainingcd はフォルダを移動するコマンドです。新しいフォルダを作るには mkdir を使います。
Bmkdir training正解です。mkdir（make directory）で新しいフォルダを作成できます。
Cls trainingls はフォルダの中身を一覧表示するコマンドです。フォルダの作成には使えません。
Q2. Claude Code のログインで選択すべきオプションはどれですか
AAnthropic API keyAPIキーは個人の開発用です。研修では組織のサブスクリプションを利用するため、こちらは選ばないでください。
BClaude account with subscription正解です。研修用組織「ClaudeCodeTutorial」のサブスクリプションを利用してログインします。
CSkip loginログインをスキップするとClaude Codeが使えません。組織アカウントでのログインが必要です。
Q3. Claude Code の会話をリセットするコマンドはどれですか
A/exit/exit はClaude Codeを完全に終了するコマンドです。会話のリセットには /clear を使います。
B/clear正解です。/clear で会話履歴がリセットされ、新しい状態からやり直せます。
C/help/help はヘルプ情報を表示するコマンドです。会話のリセットは /clear です。