🚀 Claude Code の基礎をまとめて学べる日本語のワークショップを公開しました！ 🚀
このブログでは、ワークショップの概要と、取り組む前に知っておくと理解が深まるトピックをご紹介します。
ワークショップの概要
このワークショップでは、AWS の EC2 上にデプロイされた Code Editor サーバーにアクセスして進めていきます。
Code Editor サーバーは Amazon CloudFront の背後にある Linux インスタンス上でブラウザベースの VS Code エディタを実行しており、既に Node.js、Yarn、Git、Claude Code CLI がインストールされています。Claude Code は Amazon Bedrock 経由で Claude モデルを呼び出す構成になっているため、参加者はブラウザで URL を開くだけでコーディングを始められ、ローカル PC に何かをインストールする必要はありません。
このワークショップの特徴は、オープンソースのホワイトボーディングツール Excalidraw をそのまま題材にしていることです。
GitHub で数万スターを獲得している本物のコードベースに Claude Code を使用して機能追加を行うことで、実務で Claude Code を使うときに役立つ、以下のようなタスクを一通り経験できます。
- 見知らぬコードベースの構造を素早く把握する
- どのファイルに手を入れるべきかを特定する
- 動作確認とフィードバックループを回す
- Git 履歴に残して良い形でコミットする
ワークショップの構成
ワークショップは以下 3 つのモジュールで構成されています。
以降では、図の赤字で示されているトピックを順に解説します。
押さえておきたいトピック
CLAUDE.md
CLAUDE.md は、毎セッション自動で読み込む設定ファイルです。
書く内容は「Claude が自分で把握できないこと」に絞るのがコツです。
- ビルド / テスト / 実行コマンド
- コードスタイルの好み
- 重要なディレクトリや触ってほしくないレガシーコード
- ドメイン固有の用語
Plan Mode
Plan Mode は、Claude に「まず計画を立てさせ、承認してから実行させる」モードです。Shift+Tab を 2 回押すか、/plan で切り替えます。
Plan Mode を挟むことで次のメリットが得られます。
- Claude の思考プロセスが可視化される
- 問題が起きる前に軌道修正できるチェックポイントになる
- 事前に考えさせることで、出力されるコードの質が上がる
特に複数ファイルにまたがる変更や、アーキテクチャに関わる変更では効果が大きいです。
コンテキスト管理（Context Management）
コンテキストウィンドウ（Claude の RAM）には、会話、読み込んだファイル、ツール出力などがすべて保持されます。ただし容量には上限があり、上限に達すると古い情報から順に失われていくため、長時間のセッションでは意識的な管理が必要です。
| コマンド | 用途 |
|---|---|
/context |
現在のコンテキスト使用量を確認 |
/compact |
重要情報を要約して冗長な部分を削除 |
/clear |
会話を完全にリセット |
/rename |
セッションに名前を付けて後で再開可能に |
/resume |
前のセッションを再開 |
MCP（Model Context Protocol）
MCP は、Claude を外部ツールに接続するための標準規格です。
出典: MCP vs API: Model Context Protocol Explained - Norah Sakal
代表的な MCP サーバーには以下があります。
| サーバー | 機能 |
|---|---|
| Playwright | ブラウザ自動化（ページ移動、クリック、スクリーンショット） |
| Filesystem | Claude のネイティブツールを超えた拡張ファイル操作 |
| GitHub | リポジトリ操作、PR 管理 |
| PostgreSQL / MySQL | データベースへの直接クエリ |
ワークショップでは Playwright MCP を使い、実装したレインボーツールバーを Claude 自身がブラウザを開いて視覚的に確認することを体験します。
サブエージェント（Subagents）
サブエージェントは、特定のタスクに特化した「専門家」として振る舞う Claude を作る機能です。
一つのコンテキストの中で、テスト、デバッグなど様々なタスクをするのではなく、特定タスクごとにエージェント（コンテキスト）を分けて並列実行することで効率化します。
/agents コマンドから対話的に作成でき、以下のような使い分けができます。
- Debugger エージェント: エラー、テスト失敗、予期しない動作の分析に特化
- Code Reviewer エージェント: チームのコードスタイルに合わせたレビュー
- Documentation エージェント: ドキュメント生成専任
特定のタスクで繰り返し良い結果が欲しいときに強力です。
Skill
Skill は、再利用可能なワークフローをファイルとしてパッケージ化する機能です。具体的には、特定のタスクに必要なテンプレートやスクリプトなどを 1 つのフォルダにまとめたものになります。
SKILL.md ファイルを作るだけで、Claude がその説明を読んで関連するタスクで自動的に使ってくれます。
構造はシンプルで、以下のようなディレクトリを用意するだけです。
.claude/skills/
└── my-skill/
└── SKILL.md
SKILL.md のフロントマターにある description フィールドが肝で、ここに「何をするスキルか」「いつ使うか」を書いておくと、Claude が関連タスクを検知して自動適用します。
特徴的なのは Progressive Disclosure（段階的開示） という設計で、セッション開始時は各スキルの description だけが読み込まれ、依頼内容にマッチしたときに初めて本文や関連するファイルが展開されます。これにより、スキルをたくさん用意してもコンテキストを圧迫しません。
Hook
Hook は、特定のイベントで自動実行されるスクリプトです。Claude がツールを使う前、完了した後、セッション開始時など、ワークフローの特定の瞬間に発火します。
発火タイミングは複数用意されており、例えば以下のようなものがあります。
| フック | 発火タイミング |
|---|---|
| PreToolUse | Claude がツールを使用する前 |
| PostToolUse | ツール完了後 |
| SessionStart | Claude Code 起動時 |
| Stop | セッション終了時 |
この他にも様々なタイミングが用意されており、詳細は公式ドキュメントを参照してください。
代表的な使い方は「ファイル編集のたびに Prettier で自動フォーマット」「テストファイル変更後に自動でテスト実行」といった自動化です。~/.claude/settings.json に設定するか、/hooks コマンドで対話的にセットアップできます。
Plugin
Plugin は、スラッシュコマンド、事前構築されたエージェント、MCP サーバー設定、Hook を 1 回のインストールでまとめて導入できる仕組みです。
| コマンド | 機能 |
|---|---|
/plugin list |
インストール済みプラグインの一覧 |
/plugin install <name> |
プラグインを追加 |
/plugin remove <name> |
プラグインを削除 |
まとめ
今回紹介したトピックは、いずれもワークショップ内で実際に手を動かしながら体験できます。 Claude Code は機能のアップデートが激しく、コンテンツも古くなりやすいので、内容について気になる点やフィードバックがあればぜひ教えてください。 いただいた声をもとに、今後もアップデートしていきます！
この Publication に投稿している記事は、アマゾン ウェブ サービス ジャパン合同会社または Amazon Web Services, Inc. 所属社員による個人の見解であり、所属する組織の公式見解ではありません。参加したい従業員の方は、Sugiyama Suguru までお知らせください。
Discussion