02 - クロード コード: ターミナルからのエージェント開発
AI 支援開発ツールの全景の中で、Claude Code は独特の位置を占めています。 そして1つ エージェントCLI これはターミナル内に存在し、コードベースを読み取り、コマンドを実行します。 IDE を開かずにファイルを編集したり、複雑なワークフローを管理したりできます。アクセス権のあるチャットボットではありません コードへの影響: これは、開発環境内で同じ自然さで動作する自律エージェントです。 先輩があなたと一緒に働くでしょう。
この記事は、インストールから構成まで、Claude Code について完全に詳しく説明しています。 内部アーキテクチャから実践的なワークフロー、許可システムから作成まで、高度な カスタマイズされたエージェントの。あなたが経験豊富な開発者であっても、 生産性の向上やエージェント ツールを評価しているチーム リーダーなど、必要なものはすべてここで見つかります。 このツールを使いこなすには。
何を学ぶか
- クロード コードとは何ですか? 従来の AI アシスタントとの違いは何ですか?
- インストール、構成、およびディレクトリ構造
.claude/ - 内部アーキテクチャ: ツール呼び出し、コンテキスト ウィンドウ、権限モデル
- 利用可能なすべてのツール: 読み取り、書き込み、編集、Bash、Grep、Glob、タスク、WebSearch
- 許可システムとフックメカニズム
- エージェントの動作を促進する効果的な CLAUDE.md を作成する方法
- サブエージェント、並列実行、分離ワークツリー
- ブラウザ、データベース、外部サービスの MCP (Model Context Protocol) 統合
- 実践的なワークフロー: TDD、コードレビュー、デバッグ、自動コミット
- Cursor、GitHub Copilot、その他の IDE ベースのツールとの比較
- ベスト プラクティス、既知の制限事項、および回避策
クロード コードとは: ターミナルのエージェント パラダイム
Claude Code とエージェント開発用の公式 Anthropic CLI。とは異なり、 チャット ウィンドウとエディターの間でコードをコピーして貼り付ける従来のチャットボット、 クロード・コード あなたのターミナルに住んでいます ファイルシステムに直接アクセスできます。 シェルコマンドの実行、ファイルの読み取りと変更、コードベース内のパターンの検索、および 手動介入なしで複数ステップのワークフローを調整します。
用語 エージェント的な 楽器の性質を理解するための基礎となります。 AI エージェントは質問に答えるだけではありません。 行為。クロード・コードは、 プロジェクトのコンテキスト、必要な変更を計画し、一連のプロセスを通じてそれらを実装します。 ツール呼び出しの結果を確認し、タスクが完了するまで繰り返します。そしてその違いは 誰かに「X をどうやってやればいいですか?」と尋ねることの間にそして有能な同僚に「○○しなさい」と言うのです。
チャットボットとエージェント: 根本的な違い
Un チャットボット プロンプトに応答してテキストを生成します。あ エージェント ツールにアクセスでき、ファイルの読み取り、実行などのアクションを現実世界で実行できます。 コマンド、コードの編集、Web の閲覧。クロード・コードはあなたの会社で働くエージェントです までの観察、推論、アクションの継続的なサイクルを備えた開発環境。 目標の完了。
Claude Code および Claude モデルを搭載 (現在は Opus 4.6、Sonnet 4.6 およびそのバリアント) 特別に設計された一連のネイティブ ツールを通じてコードベースと連携します。 ソフトウェア開発業務用。 2026 年 2 月、GitHub はクロード コードを エージェント HQ プラットフォーム、エコシステム内のリファレンス エージェントとしての役割を強化 専門能力開発の。
インストールと構成
Claude Code のインストールは直接であり、Node.js 18 以降と npm が必要です。プロセスには以下が含まれます 3 つのフェーズ: パッケージのインストール、認証セットアップ、カスタマイズ 環境の。
基本的なインストール
# Installazione globale
npm install -g @anthropic-ai/claude-code
# Verifica installazione
claude --version
# Primo avvio - si apre il browser per l'autenticazione
claude
# Oppure con API key diretta
export ANTHROPIC_API_KEY=sk-ant-...
claude初めて起動するとき、Claude Code はブラウザー (OAuth) または ダイレクト API キー。個人使用の場合は API キーで十分です。チームや組織のために 一元的な認証情報管理を備えた Anthropic Console 経由でアクセスすることをお勧めします。
.claude/ ディレクトリ
初期化後、Claude Code はディレクトリを作成します .claude/ 根元にある
プロジェクトの (およびオプションでグローバル構成のユーザーのホーム ディレクトリ内)。
このディレクトリは構成の中枢です。
.claude/
├── settings.json # Configurazione permessi e tool
├── agents/ # Definizioni agenti personalizzati
│ ├── planner.md
│ ├── code-reviewer.md
│ └── security-reviewer.md
├── commands/ # Comandi slash personalizzati
│ └── review.md
├── hooks/ # Hook pre/post tool execution
│ └── pre-commit-check.sh
├── rules/ # Regole di comportamento
│ └── coding-style.md
├── skills/ # Skill personalizzate
│ └── angular-patterns.md
└── README.md # Documentazione localesettings.json ファイル
ファイル settings.json 権限、許可されたツール、および
エージェントのグローバルな動作。エクスペリエンス用に設定する最初のファイル
生産的な。
{
"permissions": {
"allow": [
"Read",
"Glob",
"Grep",
"Edit",
"Write",
"Bash(npm run lint)",
"Bash(npm run test)",
"Bash(npm run build)",
"Bash(git status)",
"Bash(git diff)",
"Bash(git log)"
],
"deny": [
"Bash(rm -rf *)",
"Bash(git push --force)",
"Bash(git reset --hard)"
]
},
"alwaysThinkingEnabled": true,
"model": "claude-opus-4-6"
}構成のセキュリティ
セクション deny そしてプロジェクトの安全にとって極めて重要です。コマンドをブロックする
破壊的な rm -rf, git push --force e
git reset --hard 偶発的な損傷や幻覚による損傷を防ぎます。
モデルの。これを拒否する可能性のあるコマンドを追加することをお勧めします。
不可逆的なデータ損失。
CLAUDE.md: エージェント向けの指示
ファイル CLAUDE.md そしてClaude Codeによるカスタマイズの核心。位置決め済み
プロジェクト ルートに、エージェントが毎回自動的に読み取る命令が含まれています。
セッション。と考えてください。 新しいチームメンバーのためのオンボーディングドキュメント:
プロジェクト、規約、アーキテクチャ、期待について説明します。
有効な CLAUDE.md の構造
# CLAUDE.md
## Project Overview
Questo e un portfolio Angular 21 con SSR.
Stack: Angular 21, TypeScript 5.9, Express, Firebase Hosting.
## Architecture
- Standalone components (no modules)
- Signals per state management
- OnPush change detection
- Component-scoped CSS
## Coding Standards
- TypeScript strict mode
- Immutable data patterns
- File max 800 righe
- Funzioni max 50 righe
- kebab-case per file, PascalCase per classi
## Commands
- `npm start` - Dev server
- `npm run build` - Production build con SSR
- `npm test` - Run tests
- `npm run deploy` - Deploy Firebase
## Important Patterns
- Ogni articolo blog = 4 file (IT/EN component + template)
- Registrazione in src/app/articles/index.ts
- Blog entries in src/app/services/blog.service.ts
- Angular template: escape { } con HTML entities nei code block
## Do NOT
- Non modificare file di configurazione Firebase
- Non committare direttamente su main
- Non usare NgModules (solo standalone)
- Non usare subscribe() - preferire async pipe o toSignal()適切に作成された CLAUDE.md により、エージェントのエラーが大幅に減少し、品質が向上します。 出力の。最も重要なセクションは次のとおりです。 プロジェクト概要 (コンテキスト 一般)、 建築 (技術的な判断)、 コーディング標準 (条約) e しないでください (明示的な制約)。
ルール ディレクトリ: モジュラー ルール
CLAUDE.md に加えて、Claude Code はディレクトリをサポートします。 .claude/rules/ どこで
ドメインごとに整理されたルールを挿入します。このモジュール式のアプローチは、次の場合に適しています。
複雑なプロジェクト。
# Coding Style Rules
## Immutability (CRITICAL)
ALWAYS create new objects, NEVER mutate existing ones.
Use spread operator, Object.assign(), or immutable libraries.
## File Organization
- Many small files > few large files
- 200-400 lines typical, 800 max
- Extract utilities from large modules
- Organize by feature/domain, not by type
## Error Handling
- Handle errors explicitly at every level
- Provide user-friendly messages in UI code
- Log detailed context server-side
- Never silently swallow errors記憶システム
クロードコードには仕組みがある 永続的な記憶 セッション間。
ファイル MEMORY.md ディレクトリ内で .claude/ 更新されています
作業セッション中に学んだ教訓をもとにエージェントによって自動的に実行される: パターン
発見、一般的なエラー、プロジェクト固有の構成、およびアーキテクチャ上の決定。
# Project Memory
## Angular Template Gotchas
- Curly braces in code blocks: wrap in ngNonBindable
AND escape { with { and } with }
- <T> generic types: escape < with < and > with >
- @ decorators in code: escape with @
## Blog Article Pattern
- Each article = 4 files: IT component + template, EN component + template
- Registration in src/app/articles/index.ts
- Blog entries in src/app/services/blog.service.ts
- Max ID: 288 (as of April 2026)アーキテクチャと内部機能
Claude Code を効果的に使用するには、Claude Code が内部でどのように動作するかを理解することが不可欠です。 アーキテクチャは 3 つの柱に基づいています。 エージェントサイクル, il ツールシステム そして コンテキストウィンドウの管理.
エージェントのサイクル
Claude Code にメッセージを送信すると、システムはループに入り、次まで繰り返されます。 タスクの完了時:
- 受付 - エージェントは、蓄積されたすべてのコンテキストを含むメッセージを受信します
- 推論 - モデルはリクエストを分析し、必要なアクションを計画します (拡張思考)
- ツールコール - エージェントは 1 つ以上のツール (読み取り、編集、Bash など) を呼び出します。
- 観察 - ツールの結果がコンテキストに追加されます
- 反復 - モデルは結果を評価し、さらなるアクションが必要かどうかを決定します。
- 答え - タスクが完了すると、エージェントは概要を提供します
このサイクルは、単一の複雑なタスクに対して何十回も繰り返されることがあります。たとえば、 新しい機能を実装するには、既存のファイルの読み取り (読み取り)、検索が必要になる場合があります。 パターン (Grep/Glob)、新しいファイルの作成 (Write)、既存のファイルの変更 (Edit)、実行 テスト (Bash)、エラーを修正して繰り返します。
コンテキストウィンドウの管理
コンテキスト ウィンドウは、モデルが 1 つのウィンドウで処理できる情報の量です。 インタラクション。 Claude Code は複数のコンテキストをインテリジェントに処理します。 メカニズム:
- 選択的ローディング - コードベース全体をメモリにロードしません。使用する Glob および Grep を使用して関連ファイルを検索し、Read を使用して必要なファイルのみを読み取ります。
- 自動圧縮 - 文脈が限界に近づくとき、クロード コードは最も関連性の高い情報を保持し、それを破棄することで会話をコンパクトにします。 時代遅れの詳細。
- サブエージェント - 多くのコンテキストを必要とする複雑なタスクの場合は、Claude Code 分離されたコンテキストを使用してサブタスクをサブエージェントに委任できます (タスク ツール)。
- 拡張された思考 - このモデルは、最大 31,999 個のトークンを予約します。 会話の文脈から切り離された内なる推論。
圧縮: いつ、どのように起こるか
コンパクションと、文脈が異なる場合にクロード コードが会話を要約するプロセス。 大きくなりすぎます。これは、CLAUDE.md 命令、 アーキテクチャ上の決定、変更されたファイルとその現在の状態、およびエラー 会った。ただし、以前の反復の特定の詳細は失われる可能性があります。 非常に長いタスクの場合は、作業を短いセッションに分割することが望ましい 集中します。
主なツール
Claude Code には、あらゆる範囲をカバーするように設計された一連のネイティブ ツールがあります。 開発業務。各ツールには特定の役割と正確な使用ルールがあります。
読み取りおよび検索ツール
| ツール | 関数 | いつ使用するか |
|---|---|---|
| 読む | 特定のファイルの内容を読み取ります | ファイルの正確なパスがわかっている場合 |
| グローブ | 名前パターンでファイルを検索する | ファイルを見つけるには: **/*.ts, src/**/*.spec.ts |
| グレップ | ファイル内のコンテンツを検索します | コードベース内のパターン、関数、クラスを見つけるには |
書き込みおよび編集ツール
| ツール | 関数 | いつ使用するか |
|---|---|---|
| 書く | ファイル全体を作成または上書きします | 新しいファイルまたは完全な書き換えの場合 |
| 編集 | ファイルの特定の部分を置き換えます | 既存のファイルに対する外科的変更の場合 |
実行ツール
| ツール | 関数 | いつ使用するか |
|---|---|---|
| バッシュ | ターミナルでシェルコマンドを実行する | ビルド、テスト、git、npm、任意の CLI コマンド |
| タスク | 分離されたコンテキストでサブエージェントを起動する | 専用のコンテキストを必要とする複雑なタスクの場合 |
ウェブおよび検索ツール
| ツール | 関数 | いつ使用するか |
|---|---|---|
| ウェブ検索 | Web検索を実行する | ドキュメント、アップデート、ベストプラクティスについては |
| ウェブフェッチ | URL のコンテンツをダウンロードして分析する | ドキュメント、API リファレンス、記事を読むには |
実践例: 完全なツール使用サイクル
# L'utente chiede: "Aggiungi un nuovo campo 'priority' al modello Task"
# 1. Claude Code cerca il modello esistente
Glob: src/app/models/**/*.ts
# Risultato: src/app/models/task.model.ts
# 2. Legge il file del modello
Read: src/app/models/task.model.ts
# Risultato: export interface Task { id: string; title: string; }
# 3. Modifica il modello aggiungendo il campo
Edit: src/app/models/task.model.ts
# old_string: "title: string;"
# new_string: "title: string;\n priority: 'low' | 'medium' | 'high';"
# 4. Cerca tutti i file che usano il modello
Grep: pattern "Task" in src/app/**/*.ts
# Risultato: 5 file trovati
# 5. Legge e aggiorna ogni file che crea oggetti Task
# ... (ciclo di Read + Edit per ogni file)
# 6. Esegue i test per verificare
Bash: npm run test
# Risultato: 2 test falliti
# 7. Corregge i test che falliscono
# ... (ciclo di Read + Edit per i test)
# 8. Riesegue i test
Bash: npm run test
# Risultato: All tests passed許可制度
Claude Code の許可システムは、次の原則に従って設計されています。 最低限の特権: エージェントは明示的に実行することのみを実行できます。 認可された。これは、特にエージェントが安全性を確保するために不可欠です。 実稼働コードベースで動作します。
3 つの許可モード
| モード | 行動 | 使用事例 |
|---|---|---|
| 許可する | ツールは確認を求めずに実行されます | 安全な操作: ファイルの読み取り、検索 |
| 聞く | クロードコードは実行前に確認を求めます | ほとんどの操作のデフォルト |
| 拒否 | ツールは完全にブロックされています | 危険な操作: 削除、強制プッシュ |
権限は次の 3 つのレベルで構成できます。 グローバル
(~/.claude/settings.json), プロジェクト
(.claude/settings.json） そして セッション (プロンプト経由
インタラクティブ)。プロジェクト権限はグローバル権限をオーバーライドします。
セッションはプロジェクトのものを上書きします。
Bash の詳細なアクセス許可
Bash ツールは、特定のコマンドに基づいた詳細な権限をサポートしています。これにより、 危険なコマンドをブロックしながら安全なコマンドを許可します。
{
"permissions": {
"allow": [
"Bash(npm run lint)",
"Bash(npm run test)",
"Bash(npm run build)",
"Bash(git status)",
"Bash(git diff)",
"Bash(git log *)",
"Bash(git add *)",
"Bash(git commit *)"
],
"deny": [
"Bash(rm -rf *)",
"Bash(git push --force *)",
"Bash(git reset --hard *)",
"Bash(git clean -f *)",
"Bash(git branch -D *)"
]
}
}多層防御の原則
権限だけに依存しないでください。結合: (1) settings.json 内の制限されたアクセス許可、 (2) CLAUDE.md で「してはいけないこと」を明示的に指示、(3) を検証するフック。 実行前の操作、および (4) 標準 git フック (コミット前、プッシュ前) 最後の防衛線として。セキュリティは階層化されています。
フックシステム
クロード コード フックは、最初に自動的に実行されるスクリプトです。 (プレツールの使用) または (ポストツール使用) の呼び出し ツール、またはセッション終了時 (停止）。それらが最も重要なメカニズムです エージェントの動作をカスタマイズおよび制御するのに強力です。
フックの種類
| フック | 起動時 | 典型的な使用例 |
|---|---|---|
| プレツールの使用 | ツールを実行する前に | パラメータの検証、条件付きブロック、ロギング |
| ポストツール使用 | ツールを実行した後 | 自動フォーマット、lint、結果の検証 |
| 停止 | セッション終了時 | 最終検証、クリーンアップ、レポート生成 |
例: 自動フォーマット用のフック
{
"hooks": {
"PostToolUse": [
{
"tool": "Edit",
"command": "npx prettier --write $CLAUDE_FILE_PATH",
"description": "Auto-format dopo ogni modifica"
},
{
"tool": "Write",
"command": "npx prettier --write $CLAUDE_FILE_PATH",
"description": "Auto-format dopo creazione file"
}
],
"PreToolUse": [
{
"tool": "Bash",
"command": "echo 'Executing: $CLAUDE_TOOL_INPUT'",
"description": "Log ogni comando Bash"
}
],
"Stop": [
{
"command": "npm run lint",
"description": "Lint finale prima di chiudere"
}
]
}
}
フックは、次のような環境変数を介してコンテキスト情報を受け取ります。
$CLAUDE_FILE_PATH (作業中のファイル) e
$CLAUDE_TOOL_INPUT (ツールパラメータ)。これにより、
洗練された条件ロジック。
高度なフック: 重大なファイル変更の防止
PreToolUse フックは、機密ファイルの変更 (たとえば、
実稼働ファイルまたは認証情報ファイル) を許可する前にファイル パスをチェックする
編集または書き込み操作。パスが禁止されたパターンに一致する場合 (例:
**/production.config.*)、フックはエラーを返し、操作をブロックします。
エージェントとサブエージェント: マルチタスク オーケストレーション
クロード・コードの最も強力な能力の1つであり、 タスクツール、これにより、 分離されたコンテキストでサブエージェントを起動します。各サブエージェントは個別の「サンドボックス」で動作します。 独自のコンテキストを使用して結果をメインプロセスに返します。
サブエージェントを使用する場合
- 独立した並列タスク - セキュリティを同時に分析し、 コンポーネントのパフォーマンスとアクセシビリティ
- 孤立したコンテキスト - サブタスクに特定のコンテキストが必要な場合 主要な役割を果たさないもの
- 多視点分析 - 同じコードを「視点」で調べてもらう 異なる (セキュリティ専門家、パフォーマンス エンジニア、UX レビュアー)
- 長期にわたるタスク - プロセス中に長時間の操作を委任する メインはさらに続きます
例: 複数の観点からのコードレビュー
# Prompt al task principale:
"Fai una code review completa del componente
src/app/components/payment-form/"
# Claude Code lancia 3 subagenti in parallelo:
# Subagente 1: Security Review
Task: "Analizza il componente payment-form per
vulnerabilità di sicurezza: XSS, injection,
gestione dati sensibili, CSRF."
# Subagente 2: Performance Review
Task: "Analizza le performance del componente
payment-form: change detection, memory leaks,
ottimizzazione rendering, lazy loading."
# Subagente 3: Accessibility Review
Task: "Verifica l'accessibilità del componente
payment-form: ARIA labels, keyboard navigation,
focus management, color contrast."
# I 3 risultati vengono combinati nel report finaleカスタムエージェント
ディレクトリ .claude/agents/ 特殊なエージェントを定義できます。
具体的な指示や個性。このディレクトリ内の各 Markdown ファイルは、
呼び出し可能なエージェント。
# Code Reviewer Agent
## Role
Sei un senior code reviewer con 15 anni di esperienza.
Sei rigoroso ma costruttivo.
## Review Checklist
Per ogni file analizzato, verifica:
1. Naming: variabili, funzioni e classi hanno nomi chiari
2. Complexity: nessuna funzione > 50 righe
3. Immutability: nessuna mutazione di stato
4. Error handling: tutti gli errori gestiti
5. Types: nessun `any`, tipi specifici ovunque
6. Security: input validati, nessun dato hardcoded
## Output Format
Classifica ogni issue trovata:
- CRITICAL: bug o vulnerabilità (blocca il merge)
- HIGH: problemi architetturali (da risolvere)
- MEDIUM: miglioramenti di qualità (consigliati)
- LOW: suggerimenti stilistici (opzionali)分離ワークツリー
現在のブランチを危険にさらさずに実験的な変更を必要とするタスクの場合は、Claude
コードは i をサポートします git ワークツリー。 EnterWorktree ツールはワークツリーを作成します
で隔離されている .claude/worktrees/ HEAD に基づいた新しいブランチを使用します。
セッション終了後、ユーザーはワークツリーを保持するか削除するかを選択できます。
MCP 統合: モデル コンテキスト プロトコル
Il モデルコンテキストプロトコル (MCP) そして、それを可能にするオープンスタンダード MCP サーバーを介して外部サービスと通信するための Claude Code。これは延長します ローカル ファイル システムを超えてエージェントの機能が大幅に強化されます。
MCP アーキテクチャ
MCP アーキテクチャはクライアント/サーバー モデルに従っており、クロード コードがクライアントとして機能し、 MCP サーバーは追加のツールを公開します。 MCP サーバーは、Web ブラウザー、 データベース、外部 API、クラウド サービス、CI/CD システムなど。
一般的な MCP の使用例
| MCPサーバー | 機能性 | 使用例 |
|---|---|---|
| ブラウザの自動化 | Web ブラウジング、クリック、スクリーンショット、フォーム入力 | E2E テスト、スクレイピング、ワークフロー自動化 |
| データベース | SQL/NoSQL クエリ、スキーマ探索 | データのデバッグ、スキーマの移行 |
| GitHub | PR、問題、コードレビュー、アクション | GitHub ワークフローの自動化 |
| フィグマ | 設計読み取り、部品抽出 | 設計からのコード生成 |
{
"mcpServers": {
"browser": {
"command": "npx",
"args": ["@anthropic-ai/claude-code-mcp-browser"],
"description": "Browser automation server"
},
"postgres": {
"command": "npx",
"args": ["@modelcontextprotocol/server-postgres"],
"env": {
"DATABASE_URL": "postgresql://user:pass@localhost:5432/mydb"
}
}
}
}MCP とセキュリティ
各 MCP サーバーは、そのサーバー用に構成されたリソースにアクセスできます。データベースサーバー データベースにアクセスできる場合、サーバー ブラウザは Web を閲覧できます。申請が必須です MCP サーバーに対しても最小特権の原則: 読み取り専用の資格情報を使用します。 可能であれば、開発データベースへのアクセスを制限し、運用環境の資格情報を公開しないでください。
カスタムスキルとコマンド
のシステム スキル by Claude コードを使用すると機能を定義できます エージェントがセッション中に呼び出すことができる特殊な設定。エージェントと違って (性格とアプローチを定義します)、スキルを定義します 手順 仕様 定期的なタスク用。
カスタムスラッシュコマンド
スラッシュ コマンドは、構文で呼び出すことができるショートカットです。 /nomecomando
セッション中。これらはディレクトリ内で Markdown ファイルとして定義されます。
.claude/commands/.
# /review Command
Esegui una code review completa dei file modificati
nell'ultimo commit.
## Steps
1. Esegui `git diff HEAD~1` per ottenere le modifiche
2. Per ogni file modificato:
a. Leggi il file completo per contesto
b. Analizza le modifiche per:
- Bug potenziali
- Violazioni degli standard di coding
- Problemi di sicurezza
- Opportunità di miglioramento
3. Genera un report con severity levels:
CRITICAL, HIGH, MEDIUM, LOW
4. Suggerisci fix specifici per issues CRITICAL e HIGHカスタムスキル
ディレクトリ内のスキル .claude/skills/ コマンドよりも複雑です
技術的なコンテキスト、例、複数のステップの手順が含まれる場合があります。
# Angular Blog Article Creation Skill
## Context
Questo progetto usa Angular 21 con articoli blog
che richiedono 4 file per articolo (IT + EN).
## Procedure
1. Crea il component TypeScript (IT):
src/app/articles/{series}/{name}.component.ts
2. Crea il template HTML (IT):
src/app/articles/{series}/{name}.component.html
3. Crea il component TypeScript (EN):
src/app/articles/{series}/{name}.en.component.ts
4. Crea il template HTML (EN):
src/app/articles/{series}/{name}.en.component.html
5. Registra in src/app/articles/index.ts
6. Aggiungi BlogPost in blog.service.ts
## Template Rules (CRITICAL)
- Escape { } nei code block con HTML entities
- Wrap code blocks in ngNonBindable
- Escape <T> generics con < >
- Escape @ decorators con @Claude Code を使用した実践的なワークフロー
理論は重要ですが、クロード コードの真の価値は日常のワークフローで現れます。 最も一般的なソフトウェア開発タスクにそれを使用する方法を見てみましょう。
1. テスト駆動開発 (TDD)
# Prompt:
"Implementa un servizio UserService con TDD.
Deve supportare: getById, create, update, delete.
Usa il pattern Repository per l'accesso ai dati."
# Claude Code:
# 1. Crea i test PRIMA dell'implementazione (RED)
Write: src/app/services/user.service.spec.ts
# Test per getById, create, update, delete
# 2. Esegue i test - devono FALLIRE
Bash: npm run test -- --filter=UserService
# Risultato: 4 test FAILED (come previsto)
# 3. Implementa il servizio (GREEN)
Write: src/app/services/user.service.ts
# Implementazione minima per far passare i test
# 4. Esegue i test - devono PASSARE
Bash: npm run test -- --filter=UserService
# Risultato: 4 test PASSED
# 5. Refactoring (IMPROVE)
Edit: src/app/services/user.service.ts
# Migliora la struttura mantenendo i test verdi
# 6. Verifica copertura
Bash: npm run test -- --coverage2. インタラクティブなデバッグ
# Prompt:
"Il componente Dashboard non renderizza i dati.
La console mostra 'Cannot read properties of undefined'.
Trova e correggi il bug."
# Claude Code:
# 1. Cerca il componente
Glob: src/**/dashboard*
# 2. Legge il componente e il template
Read: src/app/components/dashboard/dashboard.component.ts
Read: src/app/components/dashboard/dashboard.component.html
# 3. Cerca il servizio che fornisce i dati
Grep: pattern "DashboardService" in src/
# 4. Legge il servizio
Read: src/app/services/dashboard.service.ts
# 5. Identifica il problema: la risposta API ha una
# struttura diversa da quella attesa
# 6. Corregge il mapping dei dati
Edit: src/app/services/dashboard.service.ts
# 7. Aggiunge null check nel template
Edit: src/app/components/dashboard/dashboard.component.html
# 8. Verifica la build
Bash: npm run build3. 自動コミットワークフロー
Claude Code には、Git コミットを作成するためのワークフローが組み込まれており、 変更、説明メッセージの生成、ファイルのステージングの管理を行います。
# Prompt:
"Committa le modifiche correnti"
# Claude Code:
# 1. Analizza lo stato del repository
Bash: git status
Bash: git diff
Bash: git log --oneline -5
# 2. Identifica i file rilevanti da committare
# 3. Aggiunge i file specifici (mai git add -A)
Bash: git add src/app/services/user.service.ts
Bash: git add src/app/services/user.service.spec.ts
# 4. Crea il commit con messaggio descrittivo
Bash: git commit -m "feat: add UserService with
Repository pattern and full CRUD operations"
# 5. Verifica il risultato
Bash: git status4. ガイド付きリファクタリング
# Prompt:
"Il file src/app/components/mega-form.component.ts
ha 1200 righe. Scomponilo in componenti più piccoli
seguendo il Single Responsibility Principle."
# Claude Code:
# 1. Analizza il file monolitico
Read: src/app/components/mega-form.component.ts
# 2. Identifica le responsabilità distinte
# 3. Crea componenti separati:
Write: src/app/components/form-header/form-header.component.ts
Write: src/app/components/form-fields/form-fields.component.ts
Write: src/app/components/form-validation/form-validation.component.ts
Write: src/app/components/form-submit/form-submit.component.ts
# 4. Aggiorna il componente originale come orchestratore
Edit: src/app/components/mega-form.component.ts
# 5. Aggiorna i test
# 6. Verifica la build e i test
Bash: npm run build && npm run testクロード コード vs カーソル vs GitHub コパイロット
適切なツールの選択は、状況、タスクの種類、および 個人的な好み。 Claude Code、Cursor、GitHub Copilot は代替手段ではありません 相互に排他的です: それらは 補完的な.
| 待ってます | クロード・コード | カーソル | GitHub コパイロット |
|---|---|---|---|
| インタフェース | CLI/ターミナル | IDE (VS コードフォーク) | IDE プラグイン |
| モード | エージェント（自律型） | エージェント + インライン | アシスタント+エージェント |
| 自律性 | 高 (自律サイクル) | 中～高 | 平均 |
| コンテクスト | ファイルシステム全体 | プロジェクトを開く | ファイルを開く + インデックス |
| ツールの実行 | フルシェル | 一体型端末 | 限定 |
| MCP サポート | ネイティブ | サポートされています | 内線経由 |
| カスタマイズ | CLAUDE.md + ルール + フック | .cursorrules | 副操縦士の指示 |
| に最適 | 複雑なタスク、自動化、CI/CD | 日々の発展 | 完成、スニペット |
| 料金 | 従量課金制 (API) または Max プラン | 月額 $20 プロ | 月額 10 ～ 19 ドル |
いつどのツールを使用するか
- クロード・コード - 複雑なエンドツーエンドのタスク (完全な機能の実装、 20 個のファイルのリファクタリング、CI/CD の構成）、ターミナル操作、自動化 ワークフロー、SSH 経由でリモート サーバー上で作業します。
- カーソル - 毎日の開発、インタラクティブな編集をいつでも見たいときに エディターでのリアルタイム編集、AI とのペアプログラミング、ラピッドプロトタイピング。
- GitHub コパイロット - 書き込み中の高速オートコンプリート、 すでにコーディング フローに参加していて提案が必要な場合の素早いスニペット生成 インライン。
多くの開発者にとって最も生産的な組み合わせは次のとおりです。 カーソル それのために 日々のインタラクティブな開発、 副操縦士 インライン補完用 素早くて クロード・コード 複雑なタスク、自動化、操作に対応 ターミナル。これらは、さまざまなレベルで機能し、相互に補完し合うツールです。
効果的に使用するためのベストプラクティス
実際のプロジェクトで何ヶ月にもわたって Claude Code を集中的に使用した結果、次のような実践が行われました。 それらは、イライラする経験と非常に生産的な経験の違いを生み出します。
1. 詳細な CLAUDE.md を作成する
CLAUDE.md は ROI が最も高い投資です。適切に作成されたファイルはエラーを減らす エージェントの 50 ～ 70% 程度。プロジェクトの概要、テクノロジースタック、 コーディング規約、ビルド/テスト コマンド、アーキテクチャ パターン、およびセクション 制約を伴う明示的な「禁止」。
2. 特定のコンテキストに応じたプロンプトを使用する
# VAGO (risultato imprevedibile):
"Migliora il componente form"
# SPECIFICO (risultato prevedibile):
"Nel componente src/app/components/contact-form/:
1. Aggiungi validazione email con regex
2. Aggiungi campo telefono opzionale
3. Mostra errori inline sotto ogni campo
4. Usa il pattern reactive forms di Angular
5. Mantieni lo stile CSS esistente"3. 集中セッションで作業する
コンテキストの圧縮につながる長すぎるセッションは避けてください。あなたが好む 15 ～ 30 分のセッションは 1 つの目標に焦点を当てました。タスクが複雑な場合、 それをサブタスクに分割し、別々のセッションで取り組みます。
4. ビルドを常に確認する
重要な変更サイクルが終わるたびに、Claude Code でビルドを実行し、 テスト。変更が正しいとは考えないでください。モデルはコミットできます。 コンパイル時または実行時にのみ現れる微妙なエラー。
5. 複雑なプロジェクトにはルール システムを使用する
多くの規則があるプロジェクトの場合は、次のディレクトリを使用します。 .claude/rules/ ファイル付き
ドメインごとに区切ってください: coding-style.md, security.md,
testing.md, git-workflow.md。これは、
シングル CLAUDE.md モノリシック。
6. 自動化用のフックを構成する
PostTool自動フォーマット（Prettier、ESLint）用のフックを使用してカテゴリ全体を削除する スタイルエラーの。 PreTool 検証にフックを使用して操作を防止する 危険です。フックの構成に 10 分を投資すれば、何時間もの修正作業が節約できます。 マニュアル。
制限事項と回避策
クロード・コードは完璧ではありません。制限を管理するには制限を理解することが不可欠です 期待し、緩和戦略を採用します。
制限 1: コンテキスト ウィンドウ
コンテキストには固定の制限があります。非常に大規模なプロジェクトの場合、モデルは「見る」ことができません。 コードベース全体を同時に実行します。自動圧縮は役立ちますが、漏れが生じる可能性があります 重要な詳細。
回避策: タスクを焦点を絞ったサブタスクに分割します。 CLAUDE.mdを使用する ファイルの読み取りを必要としないアーキテクチャ コンテキストを提供します。サブエージェントを使用する (タスク ツール) を使用して、並列分析を委任します。
制限 2: 幻覚
このモデルは、一見正しいように見えても微妙な論理エラーを含むコードを生成できます。 存在しない API または特定のバージョンのバージョンでサポートされていないパターンへの参照 フレームワーク。
回避策: 必ずビルドとテストで検証してください。 CLAUDE.md ファイルで指定します フレームワークの正確なバージョン。外部 API を使用する場合は、ドキュメントを提供してください WebFetch 経由で送信するか、実際のサンプルを添付してください。
制限 3: 対話型操作
クロード コードはキーボード入力を必要とする対話型コマンドを処理できません
(どうやって git rebase -i または確認プロンプト）。コマンドは次のようにする必要があります。
非対話型。
回避策: 可能な場合は非インタラクティブなフラグを使用する
(-y, --yes）。 git の場合は、代わりに特定のコマンドを使用します。
インタラクティブなもの。
制限事項 4: バイナリ ファイルとイメージ
クロード コードは画像 (およびマルチモーダル) を読み取ることはできますが、生成または変更することはできません 画像、ビデオ、PDF などのバイナリ ファイル。
回避策: イメージ操作には、次のような CLI コマンドを使用します。 Bash ツール経由の ImageMagick または ffmpeg。
制限5: コスト
API ベースの使用は、長時間集中的なセッションでは費用がかかる可能性があります。毎 エージェント ループは、推論とツールの結果の両方でトークンを消費します。
回避策: Max プランを使用する場合は、月額固定料金でご利用ください そして頻繁に。プロンプトを最適化して具体的にします (反復回数を減らします)。サブエージェントを使用する 可能な場合は並列化します (高速 = 総トークン数が少なくなります)。
よくある間違い: 出力を盲目的に信頼する
クロード コードで最もよくある間違いは、すべての出力を検証せずに受け入れることです。 テンプレートでは、間違ったディレクトリにファイルが作成されたり、間違ったインポートが使用されたり、不正なインポートが行われたりする可能性があります。 変更に直接関係しないファイル内の回帰、または次のようなコードを生成する コンパイルはできますが、論理的なバグがあります。 常にビルドとテストで検証する。 プロトタイプ向けの純粋な雰囲気コーディング。実稼働コードには人間によるレビューが必要です。
結論
Claude Code は、開発者の対話方法における質的な飛躍を表しています AIを使って。これは単にコードを提案するチャットボットではありません。 自律エージェント 開発環境で動作し、プロジェクトのコンテキストを理解し、管理できる 複雑なエンドツーエンドのタスク。
このツールの能力は、ファイル システムへの直接アクセスと、 シェル、詳細な権限システム、カスタム自動化用のフック、サブエージェント 並列タスクと MCP 統合により、ローカル コードベースを超えて機能を拡張します。 これらすべては、共同作業者へのブリーフィングとして機能する CLAUDE.md ファイルによって制御されます。 専門家。
しかし、権力には責任が伴います。クロード コードは、開発者が次の場合に最適に機能します。 積極的な役割を維持する スーパーバイザーとオーケストレーター: 目標を定義します クリアし、適切なガードレールを設置し、結果を検証し、必要に応じて介入します。 これは「設定したらあとは忘れる」ツールではありません。知識のある人にとっては生産性が倍増します。 それを導きます。
シリーズの次の記事
- 03 - エージェントのワークフロー: エージェントの複雑な問題を分解する方法 AI、マルチステップのオーケストレーション、効果的な委任パターン
- 04 - マルチエージェント システム: 間のコラボレーション アーキテクチャ エージェント、通信プロトコル、エンタープライズユースケース
- 05 - AI が生成したコードのテスト: TDD、プロパティベースの戦略 AI が生成したコードの品質のテストと検証
覚えておくべき重要なポイント
- Claude Code は、ファイルシステムにアクセスして端末内で動作するエージェント CLI です。 シェルと開発ツール
- CLAUDE.md は最も重要な投資であり、エージェントの行動をガイドします。 エラーが 50 ～ 70% 削減されます
- 許可システム (許可/要求/拒否) は、最小特権の原則を実装します。 コードベースを保護するために
- PreToolUse/PostToolUse フックは検証と書式設定を自動化します
- サブエージェント (タスク ツール) により、並列実行と多視点分析が可能になります
- MCP は、エージェントの機能をブラウザ、データベース、外部サービスに拡張します。
- Claude Code、Cursor、Copilot は補完的なものであり、代替品ではありません
- ビルドとテストで常に確認してください: 純粋なバイブコーディング、プロトタイプ、製品版の場合 人間の監視が必要
- 短く集中したセッション (15 ～ 30 分) はセッションよりも良い結果をもたらします 長くて一般的な