自然言語でアプリを組み上げる Vibe Coding（バイブコーディング） をさらに一段上のレベルに引き上げるために、Claude Codeが提供する6つの拡張機能が裏側でどう連携しているのか、初心者でもイメージしやすいように実践的な具体例を交えながら深掘りしていきます。
1. CLAUDE.md — 常にオンの「プロジェクト憲法」
「AIへの申し送り書」です。最大の特徴は、常にオン（Always-on）のコンテキスト であること。セッションを開いている間、Claudeは常にこのファイルの内容を意識し続けます。
仕組みと使い方
実はCLAUDE.mdには階層があります。
-
~/.claude/CLAUDE.mdに置けば全プロジェクト共通の グローバルルール - 開発ディレクトリ直下に置けば、そのプロジェクト専用の ローカルルール
すべてをここに書き込むとトークン（AIの記憶容量）を無駄に消費するため、「絶対に破ってはいけない原則」に絞る のがコツです。
具体例
# プロジェクトルール
- フロントエンドは必ず React Native と Expo Go を使用すること
- バックエンドは Node.js と Supabase で構成。DB操作は必ず Supabase クライアント経由
これで「Car Trip Concierge」のようなアプリ開発時、毎回「React Nativeで…」と前置きする手間が消えます。
2. Commands — よく使う指示の「ショートカット」
毎回入力する長文プロンプトや定型処理を、/（スラッシュ）から始まる短いコマンドとして登録する機能です（最近のアップデートで Skills として統合・拡張される流れも進行中）。
具体例
-
/db-sync→ Supabase の最新の型定義を引っ張ってきて Node.js 環境に適用 -
/review→ 事前に定めたコーディング規約に沿ってコードレビュー
複雑な指示を毎回手打ちするのは非効率なので、テンプレ化で劇的にショートカットできます。
3. Subagents — 並行作業する「専門の部下たち」
メインのClaudeとは別の 独立した思考空間（コンテキスト） を持つClaudeを立ち上げ、裏方の重い作業を任せる機能です。
なぜ重要か
AI開発の最大の敵は コンテキストの肥大化。1つのチャットで50個のファイルを読み込ませると、AIは過去の重要なルールを忘れやすくなります。
Subagentsを使えば、メインの会話履歴をクリーンに保ったまま、重い調査や別作業を切り離せます。
具体例
メインAIとUIデザインの調整中に、「車中泊スポットを検索する外部APIの仕様書を全部読んで使い方を要約してきて」と Subagent に投げる。Subagent は裏で膨大な仕様書を読み、メインAIには 結論だけ を報告します。
4. Skills — 必要な時だけ開く「専門書」
特定のタスクのための 手順書 や 知識パック です。
- CLAUDE.md = 常に意識する憲法
- Skills = 状況に応じて必要な時だけ（On-demand）開くマニュアル
仕組み
.claude/skills/ フォルダに Markdown 形式で保存します。最大の特徴は、スラッシュコマンドのように手動で呼び出せるだけでなく、Claude自身が「今このスキルが必要だ」と判断して自動的に参照 してくれる点。必要な時だけ読み込まれるので、トークン節約に絶大な効果を発揮します。
具体例
SKILL.md に「React Native での地図コンポーネント（マップビュー）の最適な実装手順」を書いておく。普段Claudeはこれを忘れていますが、「周辺の駐車場を地図にピン留めしたい」と指示した瞬間、自動的にこのスキルを引っ張り出してベストプラクティスに基づくコードを生成します。
5. Hooks — 裏側で監視する「自動チェック機関」
特定のイベント（ファイル保存、Gitコミット等）をトリガーに、自動で処理やAIチェックを走らせる機能です。
人間が明示的に指示しなくても、設定したタイミングでAIが勝手に動き、プロジェクトの品質を担保する 門番 の役割を果たします。
具体例
コミット直前（Pre-commit）にHook発動 → Claudeが変更差分を読み「このNode.jsコード、エラーハンドリングが1箇所抜けています」と警告 → 修正するまでコミットを一時停止。
6. Plugins — チームで共有する「最強のパッケージ」
「Commands」「Subagents」「Skills」「Hooks」を1つのフォルダにまとめてバンドル化し、他プロジェクトや開発コミュニティで簡単に使い回せる仕組みです。
.claude-plugin/plugin.json を中心に独自のカスタマイズをパッケージ化します。
具体例
「React Native + Supabase用の完璧な Vibe Coding 環境設定」が完成したら、それをプラグイン化。次に新しいアプリを作る際、そのプラグインをインストールするだけで、初日から 自分好みに極限までチューニングされた最高のAIアシスタント がセットアップされた状態で開発をスタートできます。
まとめ
| 機能 | 役割 | 読み込みタイミング |
|---|---|---|
| CLAUDE.md | プロジェクト憲法 | 常時オン |
| Commands | 定型指示のショートカット | 手動呼び出し |
| Subagents | 並行作業する部下 | タスク委譲時 |
| Skills | 専門書（自動参照） | 必要時のみ自動 |
| Hooks | 自動チェック門番 | イベント発火時 |
| Plugins | 全部まとめて配布 | インストール時 |
この6つを組み合わせることで、Vibe Codingは 「思いつきで打つAI指示」 から 「設計された開発環境」 へと進化します。