ストーリー
高
高橋アーキテクト
この図、何を言いたいのかわからない
描かれた図には無数の箱と矢印があったが、抽象度がバラバラだった。
高
高橋アーキテクト
良い設計図は、見る人の知りたいレベルに合わせて描く。経営者にはシステム全体像を、開発者にはコンポーネントの詳細を。C4 Modelはそのためのフレームワークだ
C4 Model
4つのレベル
// C4 Modelの4レベル
const C4_LEVELS = {
level1_context: {
name: "システムコンテキスト図",
audience: "全てのステークホルダー",
shows: "システムと外部のアクター・システムの関係",
detail: "最も抽象的。システムを1つの箱として描く",
},
level2_container: {
name: "コンテナ図",
audience: "開発チーム・アーキテクト",
shows: "アプリ、DB、メッセージキュー等の主要コンテナ",
detail: "技術選定が見える。API Gateway, Microservice, DB等",
},
level3_component: {
name: "コンポーネント図",
audience: "開発者",
shows: "1つのコンテナ内のコンポーネント構成",
detail: "Controller, Service, Repository等のレイヤー",
},
level4_code: {
name: "コード図",
audience: "開発者（必要時のみ）",
shows: "クラス図やER図レベルの詳細",
detail: "UMLクラス図等。通常は自動生成",
},
};Level 1: システムコンテキスト図
┌──────────────────────────────────────────────┐
│ │
│ [ユーザー] [管理者] │
│ │ │ │
│ ▼ ▼ │
│ ┌─────────────────────┐ │
│ │ │ │
│ │ ECプラットフォーム │ │
│ │ │ │
│ └─────────┬───────────┘ │
│ │ │
│ ┌──────┼──────┐ │
│ ▼ ▼ ▼ │
│ [決済] [配送] [メール] │
│ 外部API 外部API サービス │
│ │
└──────────────────────────────────────────────┘Level 2: コンテナ図
┌─────────────────────────────────────────────────────┐
│ ECプラットフォーム │
│ │
│ [SPA]─→[API Gateway]─→[認証サービス] │
│ │ │
│ ┌────────┼────────┬──────────┐ │
│ ▼ ▼ ▼ ▼ │
│ [商品] [注文] [在庫] [検索] │
│ サービス サービス サービス サービス │
│ │ │ │ │ │
│ ▼ ▼ ▼ ▼ │
│ [商品DB] [注文DB] [在庫DB] [Elasticsearch] │
│ Postgres Postgres Redis │
│ │
│ [メッセージキュー: Kafka] │
│ [キャッシュ: Redis Cluster] │
│ [オブジェクトストレージ: S3] │
└─────────────────────────────────────────────────────┘ダイアグラムのベストプラクティス
const DIAGRAMMING_RULES = {
// 1つの図に1つの目的
singlePurpose: "フローとデプロイを同じ図に混ぜない",
// 凡例を必ずつける
legend: "色、線の種類、アイコンの意味を明記する",
// 適切な粒度
granularity: "見る人が理解できるレベルの詳細度にする",
// 番号付きフロー
numberedFlow: "データの流れに番号をつけて順序を示す",
// 技術選定を明記
technology: "コンテナ図では技術スタック名を記載する",
};
// 推奨ツール
const DIAGRAMMING_TOOLS = [
{ tool: "Mermaid", type: "コードベース", use: "ドキュメント埋め込み" },
{ tool: "draw.io", type: "GUI", use: "自由なレイアウト" },
{ tool: "Excalidraw", type: "手書き風", use: "ホワイトボード的議論" },
{ tool: "PlantUML", type: "コードベース", use: "シーケンス図" },
{ tool: "Structurizr", type: "C4特化", use: "C4 Modelの正式なツール" },
];まとめ
| ポイント | 内容 |
|---|---|
| C4 Model | Context→Container→Component→Codeの4段階 |
| 対象者別 | ステークホルダーに応じて適切なレベルを選ぶ |
| ルール | 1図1目的、凡例、番号付きフロー |
| ツール | Mermaid, draw.io, Excalidraw等を使い分ける |
チェックリスト
- C4 Modelの4つのレベルを説明できる
- システムコンテキスト図を描ける
- コンテナ図を描ける
- ダイアグラムツールを使い分けられる
次のステップへ
次は理解度チェックです。Step 1で学んだシステム設計の基礎知識を確認しましょう。
推定読了時間: 15分