Claude Codeでアプリ開発を始める前に整えるべき3つのこと

「Claude Codeをインストールしたけど、何から手をつければ……」
実は、Claude Codeはインストールしただけでは"半分"です。そのまま使い始めると、毎回コンテキストがリセットされたり、うっかり機密ファイルを読まれたり、大きなタスクで迷子になったりします。
結論から言うと、開発を始める前に「安全設定」「スキル導入」「記憶の仕組み」の3つを整えるだけで、Claude Codeの実用性は劇的に変わります。
この記事では、プログラミング経験が少なくてもアプリ開発を始められるように、私が実際に導入している設定を具体的に紹介します。
---
目次
- [そもそもClaude Codeとは?](#そもそもclaude-codeとは)
- [安全設定 — 「やらかし」を防ぐ3層防御](#安全設定--やらかしを防ぐ3層防御)
- [スキル導入 — Claude Codeに専門知識を持たせる](#スキル導入--claude-codeに専門知識を持たせる)
- [マルチエージェント構成 — チームで開発させる](#マルチエージェント構成--チームで開発させる)
- [セッション記憶 — 毎回ゼロから説明しなくていい](#セッション記憶--毎回ゼロから説明しなくていい)
- [その他:一緒に入るもの・知っておくと便利なこと](#その他一緒に入るもの知っておくと便利なこと)
- [まとめ](#まとめ)
---
そもそもClaude Codeとは?
Claude CodeはAnthropicが提供するAIコーディングエージェントです。ターミナル(コマンドライン)上で動き、ファイルの読み書き、コマンド実行、Git操作などを自律的に行います。
通常のチャットAI(ChatGPTやClaudeのWeb版)との最大の違いは、実際にあなたのPC上でコードを書いて動かせること。「こんなアプリが欲しい」と伝えるだけで、ファイル作成からテスト実行まで一気通貫でやってくれます。
ただし、それは「PCの中で自由に動ける存在がいる」ということでもあります。だからこそ、最初に安全設定を整えることが重要です。
---
安全設定 — 「やらかし」を防ぐ3層防御
Claude Codeは強力なぶん、設定なしで使うとリスクがあります。以下の3層で防御するのがおすすめです。
第1層:settings.json(技術的な制御)
.claude/settings.json で、Claude Codeが実行できるコマンドを3段階に分けます。
| レベル | 意味 | 具体例 |
|---|---|---|
| **allow** | 確認なしで実行OK | `git status`, `git diff`, `npm run dev` |
| **ask** | 毎回確認を求める | `git push`, `git commit` |
| **deny** | 完全にブロック | `rm -rf`, `git push --force`, `.env`の読み取り |
特に deny に入れるべきもの は以下です:
{
"deny": [
"Bash(rm -rf)",
"Bash(git push --force)",
"Bash(printenv)",
"Bash(env)",
"Read(.env*)",
"Read(*.keystore)",
"Read(*.jks)",
"Read(**/google-services.json)"
]
}
ポイント: Bashのルールはプレフィックスマッチ(前方一致)です。rm -rf と書けば rm -rf / も rm -rf ./src もブロックされます。
第2層:CLAUDE.md(運用ルール)
プロジェクトのルートに CLAUDE.md を置くと、Claude Codeが毎回読み込む「行動指針」になります。
# プロジェクトルール
## アクセス禁止
- .env ファイルの内容を読まない
- 認証情報を含むファイルに触れない
## 作業前の確認
- ファイルの作成・変更・削除の前に作業計画を報告する
- 承認を得てから実行する
## 禁止操作
- rm -rf による一括削除
- git push --force による強制プッシュ
CLAUDE.mdは「AIへの申し送り事項」です。人間の新人に渡すマニュアルのようなものだと思ってください。
第3層:sandbox(環境分離)
/sandbox コマンドで、ファイルシステムやネットワークのアクセスをプロジェクト内に限定できます。信頼できないコードを試すときの「保険」です。
⚠️ 注意: 2026年4月時点で、sandbox機能はmacOS/Linux向けです。Windowsでは利用できません。Windowsユーザーは第1層・第2層をしっかり設定することで代替しましょう。
会話内容についての注意
Claude Codeの会話内容はAnthropicのサーバーに送信されます。deny 設定でファイル読み取りをブロックしても、自分で会話にコピペした情報は防げません。APIキーやパスワードは絶対に会話に貼り付けず、「.envファイルの構造について教えて」のように構造だけを議論する形にしましょう。
---
スキル導入 — Claude Codeに専門知識を持たせる
「スキル」とは、Claude Codeに特定の知識やワークフローを教えるための設定ファイルです。スキルを入れると、Claude Codeが「このタスクにはこの手順で対応しよう」と判断できるようになります。
awesome-claude-skills
GitHub: ComposioHQ/awesome-claude-skills
コミュニティが作った31個のスキルが集まったリポジトリです。アプリ開発、文書処理、デザインなど幅広いカテゴリがあります。
インストール方法 は、スキルのフォルダを ~/.claude/skills/ にコピーするだけです。
# リポジトリをクローン
git clone https://github.com/ComposioHQ/awesome-claude-skills.git
# 使いたいスキルをコピー
cp -r awesome-claude-skills/skills/mcp-builder ~/.claude/skills/
私がインストールしているスキル(12個)
31個の中から、アプリ開発とコンテンツ制作に使えるものを選んで導入しています。
開発・ツール連携
| スキル名 | 何をしてくれるか |
|---|---|
| **artifacts-builder** | React + Tailwind CSS + shadcn/ui でUIコンポーネントを高速プロトタイピング。「こんな画面が欲しい」で動くデモが出る |
| **mcp-builder** | MCP(Model Context Protocol)サーバーの作成ガイド。Claude CodeからGitHubやSlack、データベースなど外部サービスに接続する仕組みを作れる |
| **changelog-generator** | gitのコミット履歴からリリースノートを自動生成。技術的なコミットメッセージを、ユーザー向けの分かりやすい変更履歴に変換する |
| **langsmith-fetch** | LangChain/LangGraphエージェントの実行トレースを取得してデバッグ。AIエージェントの動作確認に使える |
デザイン・メディア
| スキル名 | 何をしてくれるか |
|---|---|
| **canvas-design** | ポスターやビジュアルデザインをPNG/PDFで作成。スライドの表紙やSNS投稿画像にも使える |
| **image-enhancer** | スクリーンショットや画像の解像度・シャープネスを向上。ドキュメントやプレゼン用の画像準備に便利 |
| **brand-guidelines** | ブランドカラーやタイポグラフィを成果物に一貫して適用。デザインの統一感を自動で保てる |
ビジネス・リサーチ
| スキル名 | 何をしてくれるか |
|---|---|
| **lead-research-assistant** | ターゲット企業の調査・分析。営業やマーケティングの下準備に使える |
| **competitive-ads-extractor** | Facebook、LinkedIn等の広告ライブラリから競合の広告を分析。どんなメッセージが効いているかを調べる |
| **internal-comms** | 社内文書(ステータスレポート、リーダーシップ更新等)のテンプレートに沿った作成を支援 |
| **domain-name-brainstormer** | プロジェクトに合うドメイン名候補を生成し、.com/.io/.dev等の空き状況を一括チェック |
スキル管理
| スキル名 | 何をしてくれるか |
|---|---|
| **skill-creator** | 自分だけのスキルを作るためのガイド。「こういう作業を毎回やる」をスキル化して再利用できるようにする |
どれから入れるべき?
最初の一歩としておすすめなのはこの3つです:
- mcp-builder — GitHubやSlackとの連携は、開発が進むと必ず必要になる。早めに仕組みを知っておくと楽
- artifacts-builder — 「こんな画面が欲しい」と伝えるだけでUIのプロトタイプが出る。非エンジニアの強い味方
- skill-creator — 自分の業務に特化したスキルを作れるようになると、Claude Codeの実用性が一段上がる
---
マルチエージェント構成 — チームで開発させる
Claude Code単体でも十分ですが、複数のAIを役割分担させるとさらに強力になります。
claude-code-orchestra
GitHub: DeL-TaiseiOzaki/claude-code-orchestra
Claude Codeを「指揮者(オーケストレーター)」として、専門のAIエージェントに仕事を振り分ける構成テンプレートです。
あなたの指示
↓
Claude Code(指揮者)
├── Codex CLI … 設計判断・デバッグ・コードレビュー
├── Gemini CLI … PDF・動画・音声・画像の読み取り
└── Opus サブエージェント … 大規模コード分析・外部調査
なぜこれが便利か?
Claude Codeには「コンテキストウィンドウ」という記憶の上限があります(現在は約100万トークン)。大きなプロジェクトで全部をClaude Code1人に任せると、すぐに記憶がいっぱいになります。
orchestraを導入すると、重い作業をサブエージェントに振れるので、メインのClaude Codeの記憶を温存できます。人間のチームで言えば、リーダーが全部やるのではなく、専門チームに任せるイメージです。
主要なスキル(17個入り)
| スキル | 用途 |
|---|---|
| `/startproject` | プロジェクト初期化(設計→実装の流れを自動化) |
| `/add-feature` | 機能追加(複雑度に応じて自動でチーム編成) |
| `/troubleshoot` | エラー診断(複数エージェントが原因を調査) |
| `/team-review` | 並列コードレビュー(セキュリティ・品質・テスト) |
| `/tdd` | テスト駆動開発サイクル |
| `/checkpointing` | セッションの保存とパターン学習 |
セットアップ
前提として Claude Code、Codex CLI(OpenAI)、Gemini CLI(Google)の3つをインストールしておく必要があります。その後、リポジトリから .claude/ .codex/ .gemini/ ディレクトリを自分のプロジェクトにコピーすれば導入完了です。
Anthropic公式の「Advisor」パターン
実は、こうしたマルチエージェントの考え方はAnthropicの公式プラットフォームにも取り入れられています。
Opus(最上位モデル)をアドバイザー、Sonnet や Haiku(軽量モデル)をエグゼキューター(実行役)としてペアにすると、Opusに近い品質をはるかに低コストで実現できる。
つまり「賢いけど高い」モデルに全部やらせるのではなく、判断だけ賢いモデルに聞いて、実行は軽いモデルに任せるという構成です。orchestraがClaude Code上でやっていることと、考え方はまったく同じです。
orchestraのようなコミュニティツールだけでなく、Anthropic自体がこのパターンを推奨し始めているのは、マルチエージェント構成がもはや「上級者向けの裏ワザ」ではなく標準的な開発手法になりつつあるということの表れです。
---
セッション記憶 — 毎回ゼロから説明しなくていい
Claude Codeの大きな弱点の一つが、セッション(会話)が切れるとすべて忘れることです。昨日決めた設計方針も、先週修正したバグの経緯も、毎回説明し直す必要があります。
claude-mem
サイト: claude-mem.ai
claude-memは、セッション中の重要な情報を自動で記録・分類・検索可能にするプラグインです。
仕組み:
- 専用の「Observer AI」がセッションをリアルタイム監視
- 決定事項、バグ修正、アーキテクチャ選択、発見などを自動分類
- 次のセッションで検索・参照できる
インストール:
/install-plugin claude-mem
何が変わるか:
| Before(導入前) | After(導入後) |
|---|---|
| 「前回のセッションで何を決めたっけ…」 | 自動記録された決定事項を検索できる |
| 「あのバグ、どう直したっけ…」 | バグ修正の経緯がカテゴリ別に残っている |
| 毎回プロジェクトの説明から始める | 過去のコンテキストを引き継げる |
特にアプリ開発は数日〜数週間にわたるので、セッション間の記憶が使えるかどうかで作業効率が大きく変わります。
---
その他:一緒に入るもの・知っておくと便利なこと
orchestraやスキルを導入すると、以下の仕組みも一緒についてきます。個別に設定する必要はありませんが、知っておくと安心です。
Hooks(フック)
Claude Codeの操作にトリガーを仕掛ける仕組みです。orchestraでは9つのフックが自動設定されます。
- エラー検知フック: エラーが出たら自動でデバッグエージェントに引き渡す
- lint自動実行フック: コード保存時に自動で品質チェック
- ルーティング提案フック: タスクの複雑度に応じて「このエージェントに任せましょう」と提案
MCP連携
MCP(Model Context Protocol)を使うと、Claude CodeからGitHub、Slack、データベースなどの外部サービスに直接アクセスできます。スキルの中に mcp-builder があり、独自のMCP連携サーバーも作れます。
Codex CLI / Gemini CLI
orchestraで使う補助エージェントです。Codex CLI(OpenAI製)は設計・推論が得意、Gemini CLI(Google製)はPDFや動画の読み取りが得意です。それぞれ別途インストールが必要ですが、orchestraの README にセットアップ手順が書かれています。
---
初学者向け:始める前に知っておきたいこと
ここまで読んで「多すぎる……」と感じた方へ。全部を一度に入れる必要はありません。
最小構成で始めるなら
Step 1: Claude Code をインストール
Step 2: settings.json と CLAUDE.md で安全設定
Step 3: awesome-claude-skills から mcp-builder と artifacts-builder を追加
これだけで「安全に、UIプロトタイプを作りながら外部連携もできる」状態になります。orchestra や claude-mem は、実際に開発を進めて「セッションが切れると不便」「タスクが大きくなってきた」と感じてから導入しても遅くありません。
よくある疑問
Q: プログラミング経験がなくても使える? A: 使えます。Claude Codeは自然言語で指示できるので、「ユーザー登録画面を作って」のような日本語の指示で開発を進められます。ただし、エラーが出たときに「何が起きているか」を大まかに理解できると、AIへの指示が格段によくなります。
Q: 費用はどれくらいかかる? A: Claude Codeは Anthropic API の従量課金制です。Max プラン(月額約$100〜$200)で使うのが一番ストレスがないですが、proプランでも十分使えます。Codex CLI は OpenAI の API キー、Gemini CLI は Google の API キーがそれぞれ必要です。
Q: WindowsでもMacでも使える? A: Claude Code 自体は Windows / Mac / Linux に対応しています。ただし一部機能(sandbox等)はmacOS/Linuxのみ対応なので、Windowsユーザーは settings.json と CLAUDE.md による安全設定をしっかり行いましょう。
---
まとめ
Claude Codeでアプリ開発を始める前に整えるべきことは、大きく3つです。
- 安全設定: settings.json(deny/ask/allow)+ CLAUDE.md(運用ルール)で「やらかし」を防ぐ
- スキル導入: awesome-claude-skills から必要なものを選んで、Claude Codeに専門知識を持たせる
- 記憶の仕組み: claude-mem でセッション間の情報を引き継げるようにする
さらに一歩進むなら、claude-code-orchestra でマルチエージェント構成にすると、大きなプロジェクトでも破綻しにくくなります。
環境を整えてから開発を始めると、AIが書くコードの質も、開発のスピードも、まるで違います。「まず安全設定から」——これが、Claude Codeで現場の業務改善を始める第一歩です。
---
参考リンク
- Claude Code 公式ドキュメント
- awesome-claude-skills — スキル集
- claude-code-orchestra — マルチエージェント構成
- claude-mem.ai — セッション記憶プラグイン
- Claude Codeの安全運用設計 — 安全設定の参考記事

議論のタイムライン
読み込み中...