Claude Code ハンズオン講義

事前準備（Nice to have）

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

このセクションについて

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

1. 使用する PC の前提

2. Node.js（LTS）をインストール

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

Windows（winget 推奨）

winget install OpenJS.NodeJS.LTS

macOS（Homebrew）

brew install node

インストール確認:

node --version
npm --version

3. Git をインストール

Windows

winget install Git.Git

macOS

xcode-select --install

4. Claude Code CLI のセットアップ

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

5. 推奨エディタ（VS Code）

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

Windows

winget install Microsoft.VisualStudioCode

macOS

brew install --cask visual-studio-code

6. 当日までに済んでいなくても大丈夫

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

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

サンプルステップ（動作確認用）

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

このサンプルの目的

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

コードブロックのコピーボタン

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

echo "Hello, Claude Code!"

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

進捗チェック（localStorage 保存）

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

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

画像の拡大（Lightbox）

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

動画の埋め込み

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

次のステップ

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