クロード コードを実際のプロジェクトに統合する: イベントをプレイする
このシリーズの最初の 10 回の記事では、技術パートナーとしてのクロードについて調査しました。 初期設定から展開、メンテナンスまで。今がその時です これをすべて見るために 実際の制作プロジェクトに適用される: イベントをプレイする、 DDD、Hexagonal、CQRS アーキテクチャを備えたマルチスタック エンタープライズ プラットフォーム。
この記事では、Claude Code の統合に関する具体的な経験を共有します。 日々の開発ワークフローで、それがどのように劇的に変化するかを示します プロジェクトの生産性を高める Java/Spring Boot バックエンド、Angular 19 フロントエンド および Python/FastAPI 分析.
何を学ぶか
- CLAUDE.md を集中指示ファイルとして構成する
- 反復的なタスク用のカスタム スラッシュ コマンドを作成する
- Claude Code を使用して反復開発ワークフローを適用する
- 複雑なタスクを自動分割で管理
- Claude Code のマルチスタックの知識を活用する
- WCAG 2.1 AA アクセシビリティを開発プロセスに統合
- クロスファイルのコンテキストリファクタリングを実行する
- 外部ライブラリの統合サイクル全体を管理する
- バイリンガルの命名規則を適用する (イタリア語/英語)
- クロード コードをデバッグと問題解決に使用する
- 永続メモリを利用して繰り返しパターンを作成する
- 計画モードで作業計画を構築する
シリーズ概要
| # | アイテム | 集中 |
|---|---|---|
| 1 | テクニカルパートナーとしてのクロード | セットアップと最初のステップ |
| 2 | プロジェクトのコンテキストとセットアップ | CLAUDE.mdと設定 |
| 3 | コンセプトと要件 | MVP とユーザーペルソナ |
| 4 | バックエンドとフロントエンドのアーキテクチャ | Spring Boot と Angular |
| 5 | コードの構造 | 組織と規約 |
| 6 | 高度なエンジニアリングプロンプト | 高度なテクニック |
| 7 | テストと品質 | 戦略とテストの生成 |
| 8 | 専門的な文書 | README、API、ADR |
| 9 | デプロイとDevOps | Docker、CI/CD、モニタリング |
| 10 | 進化と維持 | リファクタリングとスケーラビリティ |
| 11 | 実際のプロジェクトの統合 (ここにいます) | クロード・コードの運用中 |
1. CLAUDE.mdによるプロジェクト設定
クロード・コードによる統合の核心 イベントをプレイする ファイルです クロード.md、リポジトリのルートにあります。このファイル プロジェクトの完全なコンテキストを定義し、クロードが継承できるようにします。 アーキテクチャ、規約、制約はセッションごとに自動的に適用されます。
# CLAUDE.md - Play The Event
## Architettura
- Domain-Driven Design (DDD)
- Hexagonal Architecture (Ports & Adapters)
- CQRS (Command Query Responsibility Segregation)
## Comandi di Sviluppo
### Backend (Java/Spring Boot)
- mvn spring-boot:run -pl backend
- mvn test -pl backend
### Frontend (Angular 19)
- npm start --prefix frontend
- npm run build --prefix frontend
### Analytics (Python/FastAPI)
- uvicorn main:app --reload --port 8001
## Convenzioni di Naming
- Codice sorgente: ITALIANO (Evento, Partecipante, creaEvento())
- API REST: INGLESE (/api/v1/events, /api/v1/participants)
- Database: snake_case inglese (event_participants)
## Accessibilita (OBBLIGATORIO)
- WCAG 2.1 AA per ogni modifica UI
- Contrasto minimo 4.5:1
- Aria-labels su tutti gli elementi interattivi
- Navigazione da tastiera completa
## Formato Commit
- [fe] - Modifiche frontend Angular
- [be] - Modifiche backend Spring Boot
- [py] - Modifiche analytics Python
- [deploy] - Configurazione deployment
- [docs] - Documentazioneこのファイルのおかげで、クロード コードは繰り返しの説明を受ける必要がなくなります。 建築について。新しいセッションごとに、CLAUDE.md を読み取り、完全な状態で動作します。 プロジェクトのスタック、慣例、制約を認識する。
2. カスタムスラッシュコマンド
反復的なタスクの場合、Claude Code はサポートします。 カスタムスラッシュコマンド 一般的な操作を自動化します。 Play The Eventではいくつかの機能を使用します 一貫性とスピードを維持するため。
カスタムコマンド
| 指示 | 説明 | 一般的な使用方法 |
|---|---|---|
| /専念 | 検証された形式でコミットを生成する | 編集が完了するたびに |
| /create-aggregate | 完全な DDD 足場 | 新しいドメインエンティティ |
| /コンポーネントの作成 | スタンドアロンの Angular 19 コンポーネント | 新しい UI 機能 |
| /作成-移行 | Flyway SQL スクリプト | データベーススキーマの進化 |
| /レビュー-ddd | アーキテクチャのコンプライアンスを確認する | 自動コードレビュー |
| /生成-テスト | 単体テストの自動生成 | 迅速なテスト範囲 |
# Il comando /create-aggregate genera automaticamente:
## Domain Layer
src/main/java/com/pte/domain/model/Evento.java # Entità
src/main/java/com/pte/domain/model/EventoId.java # Value Object ID
src/main/java/com/pte/domain/repository/EventoRepository.java # Port
## Application Layer
src/main/java/com/pte/application/command/CreaEventoCommand.java
src/main/java/com/pte/application/handler/CreaEventoHandler.java
src/main/java/com/pte/application/query/GetEventoQuery.java
## Infrastructure Layer
src/main/java/com/pte/infrastructure/persistence/EventoJpaRepository.java
src/main/java/com/pte/infrastructure/persistence/EventoEntity.java
## Interface Layer
src/main/java/com/pte/interfaces/rest/EventoController.java
src/main/java/com/pte/interfaces/rest/dto/EventoRequest.java
src/main/java/com/pte/interfaces/rest/dto/EventoResponse.java各コマンドは、CLAUDE.md で定義されている規則に従うコードを生成します。 クラスはイタリア語、REST エンドポイントは英語、厳密な六角形構造。
3. 反復開発ワークフロー
Claude Code を使用した開発サイクルは自然な反復パターンに従います これは自然言語リクエストから始まり、検証されたコードに到達します。
一般的な開発サイクル
- リクエスト： ユーザーは自然言語で機能を説明します
- 分析: クロードは関連ファイルを自動的に読み取ります
- 実装： 変更を提案し、説明とともに適用する
- 確認する： ビルドを実行してコンパイル エラーをチェックします
- 反復: ユーザーが問題を報告し、クロードが修正する
# Richiesta utente:
"Migliora il CSS della sezione expense-analytics"
# Claude Code:
1. Legge expense-analytics.component.scss
2. Legge expense-analytics.component.html
3. Analizza il design system esistente
4. Propone miglioramenti: grid layout, spacing, responsive
5. Applica le modifiche
6. Esegue: npm run build --prefix frontend
7. Risultato: Build OK, 0 errori
# Seconda iterazione:
"L'export deve essere in Excel, non JSON"
# Claude Code:
1. Identifica la necessità di una libreria esterna
2. Installa: npm install xlsx --prefix frontend
3. Modifica la funzione di export
4. Crea 8 fogli Excel strutturati (uno per sezione analytics)
5. Verifica la build: OK4. 複雑なタスクの管理
タスクが大きすぎて 1 つのステップで完了できない場合、 クロード コードは自動的に次のように分割します。 追跡可能なサブタスク、 検証を行いながら順次完了します。
# Richiesta: "Migliorie Dashboard Analytics"
Claude suddivide automaticamente in:
[1/6] Empty States per sezioni senza dati
[2/6] Quick Actions Bar con azioni frequenti
[3/6] Miglioramenti visivi KPI cards
[4/6] Trend comparativi mese precedente
[5/6] Sezione prossimi eventi in programma
[6/6] Sparklines nei KPI per trend rapido
Ogni sottotask viene:
- Implementato singolarmente
- Verificato con build
- Committato separatamenteこのアプローチにより、各変更が分離され、検証可能になります。 問題が発生した場合でも簡単に元に戻すことができます。
5. 複数の知識を積み重ねる
イベントをプレイする 3 つの異なるテクノロジースタック in the same リポジトリ。クロード コードはレイヤー間の関係を理解し、すべてのレイヤーを操作します。 そして 3 つは相互依存関係を認識しています。
バックエンド - Java/Spring Boot
- DDD ドメイン エンティティ
- リポジトリとアプリケーション サービス
- コントローラーREST
- Spring Securityの構成
- Flyway データベースの移行
フロントエンド - Angular 19
- シグナルを備えたスタンドアロンコンポーネント
- HTTP サービスとインターセプター
- 事後対応状態管理
- 遅延ロードルーティング
- SCSSとデザインシステム
分析 - Python/FastAPI
- 参加者クラスタリングのための機械学習
- イベント参加者数予測
- グラフ付きの自動レポート
- フロントエンド統合のためのRESTful API
クロードは、バックエンドの DTO が、 分析におけるフロントエンドと応答スキーム。エンティティを変更するときは、 関係するすべてのレイヤーに変更を伝播します。
6. 統合されたアクセシビリティ
ガイドライン WCAG 2.1AA CLAUDE.md に直接統合されています。 Claude Code は、UI が変更されるたびにそれらを自動的に適用します。 手動リマインダーの。
## Checklist Accessibilita (OBBLIGATORIO per ogni modifica UI)
### Contrasto e Colori
- Rapporto minimo 4.5:1 per testo normale
- Rapporto minimo 3:1 per testo grande (18px+ o 14px+ bold)
- NON usare #F39C12 su sfondo bianco (contrasto insufficiente)
- Colori accessibili documentati nel design system
### Struttura HTML
- Gerarchia heading corretta (h1 > h2 > h3, mai saltare livelli)
- Elementi semantici: nav, main, section, article, aside
- Aria-labels su tutti gli elementi interattivi senza testo visibile
- Role attributes dove necessario
### Interazione
- Tab order logico e sequenziale
- Focus visibile su tutti gli elementi interattivi
- Touch targets minimo 44x44px
- Supporto navigazione da tastiera completaクロード コードが新しいコンポーネントを生成するか、既存のテンプレートを変更するとき、 これらのルールへの準拠を自動的にチェックし、aria-label を追加します。 コントラストを制御し、キーボードのナビゲーションを確保します。
7. コンテキストリファクタリング
クロード コードには、 ファイル間の依存関係 プロジェクトの。 モデル、サービス、またはコンポーネントを変更すると、変更が伝播されます。 すべての関連ファイルが自動的に変更されます。
変更の自動伝播
| アクション | 自動伝播 |
|---|---|
| TypeScript テンプレートを編集する | それを使用するサービス、コンポーネント、テンプレートを更新する |
| プロパティの名前を変更する | 変更をすべての関連ファイルに反映します |
| 機能を削除する | インポート、i18n、およびルート変換をクリーンアップします |
| バックエンド DTO の編集 | 対応する TypeScript インターフェイスを更新する |
# Richiesta: "Rinomina 'dataEvento' in 'dataInizio' nell'entità Evento"
# Claude Code propaga automaticamente:
1. domain/model/Evento.java → dataEvento → dataInizio
2. interfaces/rest/dto/EventoResponse.java → campo aggiornato
3. infrastructure/persistence/EventoEntity.java → colonna mappata
4. frontend/models/evento.model.ts → proprietà TypeScript
5. frontend/components/evento-detail.component.html → binding template
6. frontend/components/evento-list.component.html → colonna tabella
7. resources/db/migration/V12__rename_data_evento.sql → ALTER TABLE8. 外部ライブラリとの統合
Claude Code は、新しいライブラリを統合するライフサイクル全体を管理します。 必要性の特定から最終ビルドの検証まで。
完全な統合サイクル
- 識別する： 要求されたタスクに外部ライブラリがいつ必要になるかを認識します
- インストール： 適切なインストール コマンド (npm、maven、pip) を実行します。
- 埋め込む： ライブラリ API をインポート、構成、使用する
- 確認する： コンパイルエラーがゼロであることを保証するためにビルドを実行します。
# Richiesta: "L'export dei report deve essere in Excel, non JSON"
# Step 1 - Identifica
Claude: "Per generare file Excel serve la libreria xlsx"
# Step 2 - Installa
$ npm install xlsx --save --prefix frontend
# Step 3 - Implementa
import * as XLSX from 'xlsx';
exportToExcel(data: ReportAnalytics): void {{ '{' }}
const workbook = XLSX.utils.book_new();
// Crea 8 fogli strutturati
XLSX.utils.book_append_sheet(workbook,
XLSX.utils.json_to_sheet(data.kpiRiepilogo), 'KPI');
XLSX.utils.book_append_sheet(workbook,
XLSX.utils.json_to_sheet(data.partecipanti), 'Partecipanti');
// ... altri 6 fogli
XLSX.writeFile(workbook, `report-${{ '{' }}data.nomeEvento{{ '}' }}.xlsx`);
{{ '}' }}
# Step 4 - Verifica
$ npm run build --prefix frontend
Build completata con successo. 0 errori.9. バイリンガルの命名規則
CLAUDE.md に文書化された Play The Event の特徴: ソース コード で名前を使用する イタリア語一方、REST API は次の規則に従います。 英語。 Claude Code はこの区別を自動的に尊重します。
ソースコード (イタリア語)
class Eventoclass PartecipantecreaEvento()calcolaCostoTotale()listaPartecipanti
REST API (英語)
GET /api/v1/eventsGET /api/v1/participantsPOST /api/v1/eventsGET /api/v1/events/:id/costGET /api/v1/events/:id/participants
// Claude genera il controller rispettando entrambe le convenzioni
@RestController
@RequestMapping("/api/v1/events") // Inglese per API
public class EventoController {{ '{' }} // Italiano per classe
private final CreaEventoHandler creaEventoHandler; // Italiano
@PostMapping
public ResponseEntity<EventoResponse> createEvent( // Inglese per metodo HTTP
@RequestBody CreaEventoRequest request) {{ '{' }} // Italiano per DTO interno
return ResponseEntity.ok(
creaEventoHandler.esegui(request) // Italiano per logica
);
{{ '}' }}
{{ '}' }}10. デバッグと問題解決
Claude Code はエラーを分析し、対象を絞った修正を提案します。それは単に次のことを示唆するだけではありません。 原因を特定し、解決策を実装し、それが機能することを確認します。
# Segnalazione: "Il pulsante Export Report non funziona"
# Claude Code analizza il codice:
exportReport() {{ '{' }}
console.log('Export report clicked'); // Solo un log!
{{ '}' }}
# Diagnosi: La funzione non e mai stata implementata,
# contiene solo un placeholder console.log
# Fix implementato da Claude Code:
exportReport() {{ '{' }}
const reportData = this.analyticsService.getReportCompleto();
const blob = new Blob([JSON.stringify(reportData, null, 2)],
{{ '{' }} type: 'application/json' {{ '}' }});
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `report-${{ '{' }}this.evento.nome{{ '}' }}.json`;
link.click();
URL.revokeObjectURL(url);
{{ '}' }}管理されるエラーの種類
| タイプエラー | クロード・コードのアプローチ |
|---|---|
| TypeScript エラー | タイプガード、オプションのチェイニング、正しいインターフェイスを追加します |
| 壊れたCSSレイアウト | 正しいグリッド/フレックスボックス、応答性の高い修正を提案します |
| ロジックが機能していない | 不足している機能を実装するか、フローを修正します |
| コンパイルエラー | 依存関係、インポートの欠落、互換性のないタイプを修正 |
11. 永続メモリ (自動メモリ)
クロード・コードは、 永続的なストレージディレクトリ それは生き残る セッション間。これにより、プロジェクトに関する知識をさらに蓄積することができます。 繰り返されるパターンと一般的なエラーの解決策を文書化します。
/home/user/.claude/projects/play-the-event/memory/
MEMORY.md # File principale (caricato nel system prompt)
debugging.md # Errori comuni e soluzioni
patterns.md # Pattern architetturali ricorrenti
conventions.md # Convenzioni specifiche del progetto# Play The Event - Memoria di Progetto
## Pattern Ricorrenti
- Gli aggregati DDD seguono sempre: Entity + ValueObject ID + Repository Port
- I componenti Angular usano Signals, mai subscribe manuale
- Le migrazioni Flyway seguono V{{ '{' }}numero{{ '}' }}__{{ '{' }}descrizione{{ '}' }}.sql
## Errori Comuni Risolti
- Angular: "NG0100 ExpressionChangedAfterItHasBeenChecked"
→ Soluzione: usare signal computed() invece di getter
- Spring Boot: "LazyInitializationException" nelle query
→ Soluzione: usare JOIN FETCH o @EntityGraph
## Decisioni Architetturali
- Scelto CQRS per separare letture (analytics) da scritture (comandi)
- FastAPI per analytics perchè le librerie ML sono native Python各セッションの開始時にメモリが自動的に参照されます。 クロード コードが以前のセッションの知識に基づいて構築できるようにする ゼロから始めずに。
12. 構造化された作業計画
複数のファイルの変更やアーキテクチャ上の決定を必要とする複雑なタスクの場合、 クロード・コードが登場 プランモード: を保証する構造化されたワークフロー コードを記述する前に開発者と調整します。
# Plan Mode - Fasi
## Fase 1: Esplorazione
- Claude Code esplora il codebase
- Identifica file coinvolti
- Analizza dipendenze e impatto
## Fase 2: Progettazione
- Propone piano dettagliato con priorità
- Elenca file da creare/modificare
- Identifica rischi e alternative
## Fase 3: Revisione
- Presenta il piano allo sviluppatore
- Risponde a domande e chiarimenti
- Modifica il piano se necessario
## Fase 4: Approvazione
- Lo sviluppatore approva il piano
- Claude Code inizia l'implementazione
- Esegue step by step con verificaプランモード有効時
- 2 ～ 3 個以上のファイルに影響を与える新機能
- 重要なアーキテクチャのリファクタリング
- 複数の有効なアプローチによる意思決定
- 既存の動作に影響を与える変更
- 要件が不明確なタスク
目に見えるメリット
クロードコードのワークフローへの統合 イベントをプレイする 日々の生産性において具体的で目に見える改善がもたらされました。
比較: クロードコードなしとクロードコードあり
| 待ってます | クロードコードなし | クロードコード付き |
|---|---|---|
| コンポーネントの足場 | 15～20分 | 30秒 |
| ファイル間のリファクタリング | 肉体労働の時間 | 自動伝播による分数 |
| コードベースを検索する | grep/findを使用したマニュアル | 自動およびコンテキストに応じた |
| アクセシビリティのコンプライアンス | 開発後のマニュアルチェックリスト | 開発プロセスに統合 |
| ドキュメント | 忘れられたり時代遅れになったりすることが多い | 自動的に生成および更新されます |
クロード コード用のツールとリソース
クロード コードは孤立して生きているわけではありません。それを中心にエコシステムが発達しています。 拡張機能、コミュニティ ツール、SDK、およびそれらを強化する学習リソースが満載 能力。このエコシステムを知ることで、その可能性を最大限に活用することができます あらゆる開発コンテキストで Claude Code によって作成されます。
IDEの拡張機能
コードエディタとの統合が最も直接的な連絡先となります クロード コードと日常のワークフローの間で。 VS Code のクロード コード チャット 会話履歴を備えたネイティブ チャット インターフェイスをエディターで直接提供します MCP サーバーの完全なサポート。これは、それなしでクロードと対話できることを意味します 開発環境を決して放棄せず、プロジェクトのコンテキストを常にアクティブに保ちます。 補足すると、 クロード VSCode テーマ ダークテーマのコレクションを提供します 長時間のペアプログラミングセッション中の視覚疲労を軽減するように設計されています。 アシスタントと一緒に。
クロムのクロード
ブラウザで頻繁に作業する人にとっては、 クロムのクロード (現在ベータ版) エージェント機能を Web ブラウジングに直接導入します。この拡張機能はサポートしています の 自動タスク計画、操作をスケジュールできるようになります を繰り返し紹介します。 計画モード 複雑なワークフローを構築する 実行する前に。経営陣 マルチタブ アクションを調整できるようになります インテリジェントなナビゲーションにより、複数のタブを同時に操作できるようになります。 Web ページを独立して操作するため。この機能には Max プランが必要です 特に検索タスク、Web インターフェイスのテスト、自動化に役立ちます。 ブラウザベースのワークフロー。
コミュニティガイド
開発者コミュニティは、習得すべき非常に価値の高いリソースを作成しました。 クロード・コード。ガイド 「知っておくべきことはすべてクロードコードでわかる」 を表します 初期セットアップ、迅速なエンジニアリング、 コマンド、フック、自動化ワークフロー、MCP サーバー構成、BMAD メソッド 構造化されたプロジェクト管理のために。より簡潔なアプローチを好む人のために、 「40 以上のクロード コードのヒント」 40を超える実践的な提案を集めています 最適な構成から高度なテクニックまですぐに適用可能 エージェントとのやり取り。
MCP サーバー エコシステム
モデル コンテキスト プロトコル (MCP) は、拡張された統合のエコシステムを生み出しました。 クロード・コードの能力は端末をはるかに超えています。リポジトリ 素晴らしい-mcp-サーバー 向こうの印象的なパノラマをカタログ化する 2500のAPI統合 カテゴリごとに整理されています。主なカテゴリー 含まれるもの:
- ブラウザの自動化: プログラムによるブラウザー制御のための Microsoft Playwright
- クラウドプラットフォーム: インフラストラクチャ管理のための AWS、Cloudflare、Terraform、および Pulumi
- データベース: PostgreSQL、MongoDB、Redis、その他の永続化システム用のコネクタ
- 開発者ツール: GitHub、GitLab、Jira、CI/CD ツールとの統合
- 安全： 脆弱性スキャナー、静的分析、セキュリティ監査
カスタム MCP サーバーの開発とテストには、MCP検査官 プロセスを大幅に簡素化する対話型のデバッグ環境を提供します サーバーの開発と検証。
自律エージェント用のエージェント SDK
Claude に基づいてカスタム エージェントを構築したい開発者向けに、 公式 SDK は両方で利用可能です パイソン それのための TypeScript。 これらの開発キットは、自律エージェントの作成に必要なプリミティブを提供します。 複雑なタスクを独立して推論、計画、実行することができます。
コミュニティは熱心に反応しました: リポジトリ 素晴らしい-クロード-エージェント これらの SDK で構築されたエージェントの厳選されたコレクションを収集します。 素晴らしいクロードコードサブエージェント カタログさらに 100名の専門エージェント コード生成、レビュー、テスト、文書化などの特定のタスク向けに設計されています。 そして展開。これらのサブエージェントは、洗練されたパイプラインに組み合わせることができます。 完全に自動化されたワークフローを作成します。
公式コース
Anthropic は、次のような開発者向けに体系化されたトレーニング コースを提供しています。 クロードのエコシステム全体をマスターする:
推奨されるトレーニング パス
| コース | 集中 |
|---|---|
| 動作中のクロード コード | 実際のプロジェクトでのクロードコードの実践 |
| MCP の概要 | モデル コンテキスト プロトコルの基礎 |
| MCP: 高度なトピック | カスタム MCP サーバーと高度なパターンの作成 |
| Claude API を使用した構築 | Claude API のカスタム アプリケーションへの統合 |
| クロードと Amazon Bedrock | Claude を AWS インフラストラクチャにデプロイする |
| クロードと Google Vertex AI | Google Cloud AI プラットフォームとの統合 |
これらのコースは、Claude プラットフォームが提供するあらゆる可能性を網羅しています。 コード作成支援から複雑なエージェント システムの構築まで、 エンタープライズクラウドプラットフォームへの展開まで。
結論
クロードコードの統合 イベントをプレイする それを証明します Claude コードは単純なオートコンプリートではありません: ペアプログラマです プロジェクトのアーキテクチャを理解し、チームの規約を適用し、維持する マルチスタックのエンタープライズ コードベース全体での一貫性。
重要なポイント
- CLAUDE.md は必須です: よく書かれた命令ファイルはクロード コードの有効性を倍増します
- スラッシュ コマンドは時間を節約します。 反復的なタスクを自動化することでエラーを排除し、ワークフローを高速化します
- コンテキストスイッチを使用しないマルチスタック: Claude は Java、TypeScript、Python を同じフローで作業します
- デフォルトでのアクセシビリティ: 組み込みの WCAG ルールにより、追加の労力を必要とせずにコンプライアンスを保証します
- 永続的な記憶により知識が構築されます。 各セッションは、ソリューションの増分に貢献します
- 複雑なタスクのための計画モード: 構造化された計画によりエラーとやり直しが削減されます
成功の鍵は、クロード コードをチームのメンバーのように扱うことです。 明確なコンテキスト、明示的な規約、反復的なフィードバックを提供します。 その結果、開発ワークフローが大幅に効率化され、 コードの品質と配信速度が同時に向上します。