CLAUDE CODE CAMP

URLをコピーしました！

このページはプレミアム会員限定です。

対象コース：AIコース

会員コースを見るゲームの紹介・遊び方は下でご覧いただけます。

CLAUDE CODE CAMP — 詳細ガイド

このツールは、Anthropic社のターミナル型AIコーディングエージェント「ClaudeCode」を、読んで・書いて・触って体系的に学べるブラウザ完結型の学習プラットフォームです。以下に、その設計思想から各機能の使い方、学習の進め方までを詳しく解説します。

1. ツールの概要と設計思想

1-1. これは何を学ぶツールか

ClaudeCodeは「ターミナルの中でClaudeと対話しながら開発を進める」エージェント型のツールです。従来のAIコード補完(入力中の行の続きを提案するタイプ)とは根本的に異なり、計画立案→ファイル探索→コード編集→コマンド実行→テスト→Git操作までを一連のタスクとして自律的に実行できます。

しかし、この「自律性」は諸刃の剣です。使いこなせば開発速度が飛躍しますが、指示の出し方や権限管理を知らないと、的外れな大量編集やセキュリティ上のリスクにつながります。本ツールは、この「エージェントを指揮する側のスキル」を基礎から応用まで段階的に身につけることを目的としています。

1-2. 設計上の3つの原則

①実践的な順番で学べる
「インストール→基本操作→実践→自動化」という実際の習得順序に沿って16のレッスンを構成。知識が次のレッスンで必ず使われるように配置しています。

②インプットとアウトプットの往復
読むだけ(レッスン)で終わらせず、確認チェック・演習ドリル・クイズ・フラッシュカードという4種類のアウトプット装置を用意。認知科学的に定着率が高いとされる「検索練習(思い出す行為)」を重視しています。

③記録が残る
XP(経験値)・レベル・実績バッジ・進捗率をすべてブラウザに自動保存。昨日の続きから再開でき、学習の「見える化」が継続を後押しします。

1-3. 技術的な特徴

項目	内容
構成	単一のHTMLファイルのみ。サーバー・ビルド・インストール不要
依存ライブラリ	なし(外部依存はGoogleFontsのみ)
データ保存	ブラウザのlocalStorageに自動保存
レスポンシブ	スマホ〜デスクトップ対応
アクセシビリティ	キーボード操作対応、`prefers-reduced-motion`対応

ファイルをダブルクリックしてブラウザで開くだけで、インターネット接続なしでもほぼ全機能が動作します(フォント読み込み時のみ通信が発生)。

2. 対象者

初心者エンジニア：ClaudeCodeの名前は知っているが、まだ触ったことがない人
補完系AIからの移行組：GitHubCopilotなどは使っているが、エージェント型は未経験の人
チームリーダー：チームにClaudeCodeを導入する前に、自分自身で体系的に理解したい人
復習したい経験者：既に使っているが、フック・MCP・CI連携などの応用知識を整理したい人

前提知識としては、ターミナル(コマンドライン)を触ったことがある程度で十分です。レッスンは「Node.jsのバージョン確認」から始まります。

3. 画面全体の構造

ページは上から順に以下の9つのブロックで構成されています。ヘッダーのナビゲーションから任意のセクションへジャンプできます。

ヘッダー（常時固定）
├─ロゴ・ナビゲーション（8セクション）
└─進捗リング・レベル・XP表示

00.ヒーロー…デモターミナル＋ツール紹介
01.レッスン…16講座（本編）
02.コマンド事典…50件のリファレンス
03.プロンプト集…12種のテンプレート
04.演習ドリル…6問の記述練習
05.クイズ…20問の4択テスト
06.フラッシュカード…24枚の用語カード
07.ロードマップ…5ステージ26項目の実践チェック
08.実績…12種のバッジコレクション

最上部にはスクロール進捗バー(オレンジ〜緑のグラデーション)があり、ページ全体のどこまで読んだかが一目でわかります。

4. 各機能の詳細解説

4-1. ヒーロー：インタラクティブ・デモターミナル

ページを開くと最初に表示されるのが、実際に操作できる擬似ターミナルです。ここは単なる飾りではなく、ClaudeCodeの操作感を最初に体感するための教材になっています。

自動デモの流れ
起動すると、次のようなデモが自動再生されます：

npminstall-g@anthropic-ai/claude-code—インストールの疑似実行
claude—セッション起動、ウェルカムバナー表示
/init—CLAUDE.md生成の疑似体験
バグ修正依頼→ファイル読み込み・編集・テスト実行の一連の流れ

自分で操作する
デモ再生後はカーソルが入力欄に移動し、自由に入力できます。試せるコマンドの例：

入力	動作
`help`	利用可能なコマンド一覧
`claude`	ClaudeCodeセッションへ入る
`ls`	ファイル一覧(疑似)
`/help/init/status/model/cost/compact`	それぞれの疑似応答
`/exit`	シェルに戻る
`clear`	画面クリア
`sudorm-rf/`	🚫危険コマンドとして拒否(教育的イースターエッグ)

プロンプト記号はシェルモードでは緑の$、Claudeモードではオレンジの>に変わり、モードの概念が自然に身につきます。

その他のヒーロー要素

ローテーションTIPS：12本の小技が約4.6秒ごとに自動で切り替わります
統計パネル：レッスン・クイズ・コマンド・カード・プロンプトの総数が表示されます
コマンドティッカー：/initPLANMODEclaude-pなどの重要キーワードが横スクロールで流れます

4-2. レッスン(セクション01)

学習の中核です。4コース・16講座で構成され、左側の目次と右側の本文という2カラム構成になっています。

コース構成

コース	内容	講座数
A入門	ClaudeCodeとは何か/インストール/最初のセッション/コンテキストウィンドウ	4
B基本操作	ショートカット/権限と安全/CLAUDE.md/対話の技術	4
C実践	プロンプト技法/Gitワークフロー/デバッグとTDD/大規模リファクタリング	4
D応用	カスタムコマンド/サブエージェント/MCP/フック・CI・チーム展開	4

各レッスンの構成要素

到達時間：「⏱約12分」のような目安表示
本文：見出し・本文・コード例(シンタックスハイライト付き)・注意ボックスで構成
3種の注意ボックス：💡チップ(緑)=コツ、⚠️警告(赤)=やってはいけないこと、📝ポイント(青)=補足知識
SUMMARY：レッスン末尾の要点まとめ
CHECK(確認チェック)：レッスン直後に1問の4択問題が出題され、即座に正誤と解説が表示されます

コード例のハイライト
すべてのコードブロックには自動シンタックスハイライトが適用され、コメント(灰色)・文字列(緑)・CLIキーワード(オレンジ)・フラグ(青)・スラッシュコマンド(オレンジ太字)が色分けされます。実物のターミナルに近い視認性で読めます。

進捗管理

各レッスン下の「✓完了にする」ボタンで完了マーク(+30XP)
目次にはコースごとの達成数(例:「2/4」)が表示されます
本文上部のオレンジのバーが全体の進捗率を示します
「前へ/次へ」ボタンで連続学習が可能

目次パネル
画面スクロールに追従(スティッキー)するため、長いレッスン中でも常に現在地がわかります。完了済みレッスンは緑のチェックが付きます。

4-3. コマンド・ショートカット事典(セクション02)

50件のコマンド・ショートカット・フラグ・環境変数を収録した検索可能なリファレンスです。学習中も実務中も、何度も戻ってくることになるセクションです。

4つのカテゴリ

カテゴリ	件数	内容
スラッシュ	24件	`/init/compact/review/mcp`などセッション内コマンド
ショートカット	8件	`EscEsc×2Shift+Tab@#!`などキー操作
CLI	14件	`claude-cclaude-pclaudemcpadd`など起動オプション
環境変数	5件	`ANTHROPIC_API_KEY`などの設定変数

使い方

検索：コマンド名だけでなく日本語の説明でも検索できます(例:「圧縮」で/compactがヒット)
カテゴリ絞り込み：チップボタンで4カテゴリにフィルタ
コピー：各カードの使用例をワンクリックでコピー(コピー10回で実績解放)
キーボード：ページ上のどこからでも/キーで検索欄にフォーカス可能

4-4. 実戦プロンプト集(セクション03)

コピペしてすぐ使える12種のプロンプトテンプレートを収録。実際の開発現場で頻出するタスクを網羅しています。

タグ	テンプレート名	想定シーン
バグ修正	エラーログ起点のデバッグ	原因特定→最小修正→回帰テストまで含む依頼文
機能追加	受け入れ条件付き実装	計画承認ゲート付きの安全な実装依頼
リファクタ	挙動を変えない整理	段階的進行＋テスト報告義務付き
テスト	テストスイートの拡充	正常系・境界値・例外系の観点指定
レビュー	差分レビュー依頼	重要度付け＋修正案提示の形式指定
オンボーディング	初見コードベースの理解	新規参画時の全体像把握
パフォーマンス	計測駆動の最適化	「推測ではなく計測値で」の縛り付き
移行	バージョンアップ移行	破壊的変更の棚卸し→計画→検証
ドキュメント	README生成	「実コードと食い違う記述は禁止」の制約
設計	PlanModeでの計画	読み取り専用モードでの設計依頼
セキュリティ	セキュリティレビュー	4観点＋「場所/深刻度/再現/修正案」形式
多言語化	i18n対応	要件明示＋承認後実装

各テンプレートは[]の部分を自分の状況に書き換えるだけで使えます。「良いプロンプトの型」を写経的に学べるのも意図された効果です。

4-5. 演習ドリル「PROMPT DOJO」(セクション04)

このツール独自の目玉機能です。6つの現場シナリオに対し、自分でプロンプトを考えてから模範解答と照合する、記述型の練習問題です。

出題形式
各ドリルは3段構成：

SITUATION(状況)：「先輩から”ログインまわり、なんか遅いから直して”と頼まれた」のような具体的な現場描写
YOURTASK(課題)：「目的・前提・完了条件を含むプロンプトに書き直してください」
MODELANSWER(模範解答)：ボタンで開く。実際の指示文全文＋💡解説

6問のラインナップ

番号	テーマ	学べること
EX.01	曖昧な依頼を書き直す	計測値・目標値・承認ゲート・完了条件の付与
EX.02	受け入れ条件を書く	仕様を条件として明文化する技術
EX.03	初見リポジトリの最初の3手	まず「説明させる」オンボーディング手順
EX.04	修正の検証を依頼する	回帰テスト＋全体実行＋横展開確認の3段検証
EX.05	PlanModeで大きな変更	計画→承認→実行のゲート設計
EX.06	繰り返し指示をコマンド化	カスタムコマンド($ARGUMENTS含む)の自作

模範解答を初めて開くと+5XP。3問開くと実績「演習始め」が解放されます。

4-6. クイズ(セクション05)

全20問・4択の理解度テスト。レッスン1〜16の内容からまんべんなく出題されます。

進行

スタート画面：ベストスコア(保存済みなら)を表示
問題画面：4択から選択→「解答する」→即座に正誤と解説を表示→次へ
結果画面：正答率ゲージがアニメーションで伸び、スコアに応じてメッセージが変化

スコア別のメッセージ

100%：「PERFECT!」＋紙吹雪の演出
80〜99%：「GREAT!」実務レベル
60〜79%：「GOOD」復習推奨
0〜59%：「KEEPGOING」レッスンに戻ろう

記録

正解1問につき+5XP(満点で100XP)
ベストスコアは永続保存
受験回数・ベストスコアは実績判定にも使用

4-7. フラッシュカード(セクション06)

24枚の用語カードで、重要語彙を定着させます。

操作方法

カードをクリック(またはSpaceキー)で3Dアニメーションで裏返り、用語の意味が表示されます
←→キーまたはボタンで前後移動
「★覚えた」ボタン(またはMキー)で習得マーク。初回習得で+5XP
「⇄シャッフル」で出題順をランダム化

収録用語の例
ClaudeCodeCLAUDE.md/init/compactPlanMode@ファイル名#プレフィックスEscEsc×2Shift+Tabclaude-cclaude-pカスタムコマンドサブエージェントMCPHookspermissionsgitworktree$ARGUMENTS.mcp.json--output-formatjsonなど。

注意点：キーボード操作は、カードのセクションが画面内に表示されている間のみ有効です(他の場所での誤動作防止のため)。

4-8. スキルロードマップ(セクション07)

知識を「実務でできた」に変換するための実践チェックリストです。5ステージ・全26項目。

ステージ	テーマ	項目の例
1	セットアップと基礎	Node.js導入、インストール、/init実行など5項目
2	基本操作	Esc×2の体験、@指定、権限選択など6項目
3	プロンプト実践	完了条件付き指示、PlanMode体験など5項目
4	拡張	自作コマンド、サブエージェント、MCP、Hooksなど5項目
5	エキスパート	ヘッドレス自動化、CI統合、SDK、チーム共有など5項目

チェックを入れると各+10XP。ステージごとの進捗バーと、完了時の緑バッジで達成感が可視化されます。ステージ5の全項目達成が「卒業」の目安です。

4-9. 実績コレクション(セクション08)

学習の節目で自動的にアンロックされる12種の実績バッジ。各+15XP。

バッジ	解放条件
🚀初回起動	ツールを開く(最初のボーナス)
🎯はじめの一歩	最初のレッスン完了
📚折り返し地点	レッスン8つ完了
👑全講座制覇	レッスン16全て完了
🧠クイズデビュー	クイズを完走
🏹腕利き	クイズ正答率80%以上
💯フルマーク	クイズ満点
🃏カードマスタ	カードを10枚習得
✍️演習始め	演習ドリルを3つ開く
🗺️道を開く者	ロードマップ・ステージ1制覇
🏔️全踏破	ロードマップ全26項目達成
📋コマンダー	コマンド等を10回コピー

未解放のバッジはグレーの鍵付きで表示され、コレクション心を刺激します。

4-10. XP・レベルシステム

すべての学習行動がXP(経験値)として蓄積されます：

アクション	獲得XP
レッスン完了	+30
クイズ正解	+5/問
カード習得	+5
ロードマップ項目	+10
演習ドリル開示	+5
実績アンロック	+15

150XPごとにレベルアップ。ヘッダー右のリングはレッスン進捗率、Lv表示とXP値はヘッダー・実績セクション下部のステータスバーで確認できます。理論上の最大値は約1,100XP(Lv.8前後)で、全てをやり込めば自然に到達する設計です。

5. 学習の進め方(推奨フロー)

5-1. 最短ルート(約3〜4時間)

レッスン1〜3を読む(導入・インストール・初回セッション)
実際にClaudeCodeをインストールし、デモターミナルと見比べながら起動
レッスン4〜8で基本操作を習得(この時点でロードマップ・ステージ2を消化し始める)
クイズを1回受験→弱点のレッスンだけ再読
実プロジェクトで使い始め、困ったらコマンド事典とプロンプト集を参照

5-2. 完全マスターコース(1〜2週間)

レッスン1〜16を順に全て完了(確認チェックも全問正解を目指す)
演習ドリル6問を、模範解答を開く前に自分で書いてから照合
クイズで満点が出るまで再受験
フラッシュカード24枚全てに★を付ける
ロードマップを実プロジェクトで1項目ずつ消化(ここが最長)
実績12種コンプリートを確認

5-3. チーム導入での使い方

チームリーダーが先に完全マスターコースを走り、その後メンバーには「レッスン1〜8+クイズ1回」をオンボーディング課題として割り当てる、という使い方ができます。ブラウザだけで動くため、このHTMLファイルを社内共有ドライブやリポジトリに置くだけで配布できます。

6. データの保存とプライバシー

保存先：ブラウザのlocalStorageのみ(キー名ccCampusV2)
保存内容：XP・レベル・完了レッスン・クイズベスト・カード習得状況・ロードマップ・実績・コピー回数
外部サーバーへの送信は一切ありません。学習データがツール提供者に伝わることはありません
ブラウザのキャッシュ削除・プライベートモード使用時はリセットされます
リセットしたい場合：開発者ツールでlocalStorage.removeItem('ccCampusV2')を実行

7. キーボードショートカット一覧

キー	動作
`/`	コマンド事典の検索欄にフォーカス
`Space`	フラッシュカードをめくる(カード表示中)
`←→`	フラッシュカードの前後移動
`M`	フラッシュカードを「覚えた」にマーク
`Tab`	フォーム要素間の移動

8. 免責事項と正確性について

本ツールは非公式の学習教材です。レッスン・コマンド・設定例は、ClaudeCodeの一般的な仕組みに基づいて教育目的で簡略化・構成したものであり、特定のバージョンの正確な仕様を保証するものではありません。実際の利用時は、必ず以下の一次情報と照合してください：

Anthropic公式ドキュメント(ClaudeCode関連ページ)
/release-notesコマンドで確認できる実際のリリースノート
claude--help/helpの実際の出力

特に権限設定・セキュリティ関連の記述は概念説明であり、本番環境の設定は公式ガイドラインに従ってください。

9. まとめ

このツールの価値は、単なる知識の羅列ではなく、「読む→確認する→書いてみる→テストする→実践でチェックする」という学習ループ全体を1ファイルに閉じ込めたことにあります。

ClaudeCodeのようなエージェント型ツールは、知識よりも「指示の出し方の癖」と「安全意識」が成果を分けます。演習ドリルで書き、クイズで試し、ロードマップで実践する——この3段階を回したとき、あなたはAIに「使われる側」ではなく「使いこなす側」になっているはずです。

ブラウザで開いて、まずはレッスン1の「▶」から始めてみてください。

URLをコピーしました！