SESSION 02

環境構築ハンズオン

事前にインストールしたVSCodeを起動し、Node.jsとClaude Codeをセットアップします。ターミナルの最低限の操作もここで覚えます。

9:20 - 9:50(30分)
実践
STEP 1 / 10 MIN
ターミナルの基本操作と作業フォルダの作成

事前にインストールしたVSCodeを起動してください。VSCode(Visual Studio Code)の中にあるターミナルを使って、研修の作業フォルダを準備します。覚えるコマンドは3つだけです。

HANDS-ON

VSCodeでターミナルを開く

  1. VSCodeを起動する
  2. 上部メニューから「ターミナル」→「新しいターミナル」をクリック
  3. 画面下部にターミナルが表示されます
VSCodeがまだ入っていない方へ

code.visualstudio.com からダウンロードしてインストールしてください。設定は初期値のままで進めて問題ありません。日本語化したい方は Ctrl+Shift+X で拡張機能を開き「Japanese」で検索してインストールしてください。

cd(移動する)

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

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

ls(一覧を見る)

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

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

mkdir(フォルダを作る)

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

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

Windowsの場合の補足

PowerShellでは lsdir も使えます。cdmkdir はWindows/Mac共通です。

EXERCISE

作業フォルダを作成する

  1. ターミナルで cd Desktop と入力してEnter
  2. mkdir training と入力してEnter
  3. cd training と入力してEnter
  4. ls と入力してEnter(まだ何も表示されないのが正常です)
達成条件

ターミナルの現在ディレクトリが training になっていれば成功です。パスの末尾に Desktop/training と表示されていることを確認してください。うまくいかない方は講師に声をかけてください。

STEP 2 / 5 MIN
Node.js をインストールする

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

HANDS-ON

Node.js のインストール

  1. nodejs.org にアクセスする
  2. 「LTS」と書かれた緑のボタンをクリック(推奨版です)
  3. ダウンロードされたインストーラーをダブルクリック
  4. インストーラーの指示に従って進める(すべて初期値でOK)
  5. インストール完了後、VSCodeのターミナルを閉じて開き直す
インストールの確認

ターミナルで以下を実行してください。

node --version // v22.x.x のようなバージョン番号が表示されれば成功です
達成条件

node --version を実行してバージョン番号(v22.x.x など)が表示されていれば成功です。

バージョンが表示されない場合

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

STEP 3 / 15 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: command not found」と表示される場合は、VSCodeを完全に閉じて再起動してください。再起動後に再度 cd Desktop/training で作業フォルダに戻ることを忘れずに。

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

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

Security Tips ── 認証情報の取り扱い

ログインに使うアカウント情報やAPIキーは、パスワードと同じ機密情報です。画面共有中にターミナルへAPIキーを入力する場面では、共有を一時停止してください。スクリーンショットを撮る際も、キーやトークンが映り込んでいないか確認する習慣をつけてください。

動作確認

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

こんにちは。動作確認です。今日の日付を教えてください。
達成条件

Claude Codeに「こんにちは」と送り、日本語の応答が返ってくれば成功です。これで環境構築は完了しました。

REFERENCE
画面の見方と基本操作
VSCode画面構成 ファイルツリー エディタ領域 ターミナル(Claude Code)

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 です。