Claude Code ハンズオン講義

事前準備（Nice to have）

当日までに済ませておけるとベストな準備事項。済んでいなくても講義冒頭で一緒に進めるので、余裕のある方だけ読み進めてください。

ハンズオンで使う PC の準備です。全部が終わっていなくても OK。講義冒頭に時間を取って一緒にセットアップしますが、先に済んでいれば本編がスムーズに始められます。

Windows 10/11 もしくは macOS の PC を持参（管理者権限があるもの）

会場の Wi-Fi か、モバイルルータ等のネット接続手段

Claude Code CLI 本体は Node.js を必要としません（スタンドアロンバイナリで動作）が、ハンズオンで扱うサンプル課題で Node.js を使う可能性があるため、入れておきます。

Windows（winget 推奨）

winget install OpenJS.NodeJS.LTS

macOS（Homebrew）

brew install node

インストール確認:

node --version
npm --version

Node.js LTS のインストール確認

Windows

winget install Git.Git

macOS

xcode-select --install

Git のインストール確認（git —version）

公式ドキュメントに沿ってインストール＆サインインします。URL は講義前日までに最新版へ更新しますが、現時点は Anthropic 公式サイトの Claude Code セクションを参照してください。

Claude Code CLI がインストールでき、claude --version が通る

ファイルビューア・ターミナル・Git が 1 画面に収まるため推奨。

Windows

winget install Microsoft.VisualStudioCode

macOS

brew install --cask visual-studio-code

VS Code の起動確認

上記すべて、講義冒頭で 15 分ほど一緒にセットアップ時間を確保します。余裕があれば済ませておいてください。

何か詰まったら、講師または運営までお気軽にご連絡ください。

このステップを完了しました（サイドバーの進捗率に反映されます）

このページで使える対話部品（コピー・進捗チェック・画像拡大・動画）のデモ。カリキュラム確定後に差し替え予定。

教材サイトに組み込まれている 対話部品（コードコピー・進捗チェック・画像拡大・動画）が正しく動くかを講義前に確認できるステップです。カリキュラム本編の内容は別途差し込みます。

右上の “Copy” ボタンを押すとクリップボードにコピーされます。

echo "Hello, Claude Code!"

// TypeScript のサンプル
function greet(name: string): string {
  return `Hello, ${name}!`;
}
console.log(greet('Claude Code'));

チェックを入れてページを再読込しても状態が保持されます。

最初のコマンドを実行してみた claude コマンドを起動してみた公式ドキュメントを一度眺めた

サイドバー下の「進捗をクリア」ボタンで全リセットできます。

画像をクリックすると拡大表示されます（Esc で閉じる）。ここでは SVG のプレースホルダを置いています。カリキュラム確定後、実スクリーンショットに差し替えてください。

YouTube・ローカル MP4 のどちらにも対応しています。本番ではデモ動画を差し込みます。

ここから先は、カリキュラム設計フェーズで具体的な講義内容を埋めていきます。

このステップを完了しました（サイドバーの進捗率に反映されます）