LESSON 30分

ストーリー

佐
佐藤CTO
アーキテクチャ図は地図のようなものだ
佐
佐藤CTO
世界地図、国の地図、市街地図――ズームレベルによって見せる情報が変わる。C4モデルはまさにそれをソフトウェアに適用したものだ

C4モデルとは

Simon Brown が提唱した、4つのレベルでソフトウェアアーキテクチャを表現するモデルです。

レベル名称対象読者目的
Level 1System Context全ステークホルダーシステムの外部環境を示す
Level 2Container技術リーダー・開発者主要な技術的構成要素を示す
Level 3Component開発者コンテナ内部の構造を示す
Level 4Code開発者クラス・モジュールレベル

Level 1: System Context（システムコンテキスト図）

システム全体を1つの箱として描き、外部のユーザーやシステムとの関係を示します。

graph TD
    User["一般ユーザー"] -->|"Webブラウザ/モバイルアプリ"| EC["ECプラットフォーム<br/>[Software System]"]
    Admin["管理者"] --> EC
    EC -->|"API"| Stripe["決済ゲートウェイ<br/>（Stripe）"]
    EC -->|"API"| SendGrid["メール配信<br/>（SendGrid）"]
    EC -->|"API"| Inv["在庫管理<br/>（外部API）"]

    classDef personStyle fill:#08427b,stroke:#052e56,color:#fff
    classDef systemStyle fill:#1168bd,stroke:#0b4884,color:#fff
    classDef extStyle fill:#999999,stroke:#6b6b6b,color:#fff

    class User,Admin personStyle
    class EC systemStyle
    class Stripe,SendGrid,Inv extStyle

ポイント:

  • 自社システムは中央に配置
  • 外部システムは周囲に配置
  • 矢印にプロトコルや通信方式を記載

Level 2: Container（コンテナ図）

システム内部の主要なコンテナ（アプリケーション、データストア、メッセージブローカー等）を示します。

graph TD
    subgraph EC["ECプラットフォーム"]
        SPA["SPA<br/>（React）"]
        Mobile["モバイルアプリ<br/>（Flutter）"]
        BFF["BFF<br/>（Node.js）"]
        Product["商品サービス<br/>（Node.js）"]
        Order["注文サービス<br/>（Node.js）"]
        PgProduct["PostgreSQL<br/>（商品DB）"]
        Redis["Redis<br/>（キャッシュ）"]
        Kafka["Kafka<br/>（イベント）"]

        SPA --> BFF
        Mobile --> BFF
        BFF --> Product
        BFF --> Order
        Product --> PgProduct
        Order --> Redis
        Order --> Kafka
    end

    classDef uiStyle fill:#438dd5,stroke:#2e6295,color:#fff
    classDef svcStyle fill:#1168bd,stroke:#0b4884,color:#fff
    classDef dbStyle fill:#e8a838,stroke:#b07c1e,color:#fff

    class SPA,Mobile uiStyle
    class BFF,Product,Order svcStyle
    class PgProduct,Redis,Kafka dbStyle

Level 3: Component（コンポーネント図）

コンテナ内部の主要なコンポーネント（モジュール、サービスクラス等）を示します。

graph TD
    subgraph OrderSvc["注文サービス"]
        Ctrl["OrderController<br/>（REST API）"] --> UC["OrderUseCase<br/>（ビジネスロジック）"]
        UC --> Repo["OrderRepository<br/>（永続化）"]
        UC --> PGW["PaymentGW<br/>（決済連携）"]
        UC --> EB["EventBus<br/>（通知）"]
    end

    classDef ctrlStyle fill:#438dd5,stroke:#2e6295,color:#fff
    classDef ucStyle fill:#1168bd,stroke:#0b4884,color:#fff
    classDef adapterStyle fill:#e8a838,stroke:#b07c1e,color:#fff

    class Ctrl ctrlStyle
    class UC ucStyle
    class Repo,PGW,EB adapterStyle

Mermaidによる図の記述

C4図をMermaidで記述する例：

```mermaid
graph TB
    User[一般ユーザー] -->|HTTPS| WebApp[Webアプリケーション]
    Admin[管理者] -->|HTTPS| AdminApp[管理画面]
    WebApp -->|gRPC| OrderService[注文サービス]
    WebApp -->|gRPC| ProductService[商品サービス]
    OrderService -->|SQL| OrderDB[(注文DB)]
    ProductService -->|SQL| ProductDB[(商品DB)]
    OrderService -->|Pub/Sub| Kafka[Apache Kafka]
    Kafka -->|Subscribe| NotificationService[通知サービス]
```

よくある間違い

間違い正しいアプローチ
1つの図にすべてを詰め込むレベルごとに分けて描く
矢印の方向が不明確データの流れの方向を明示する
テクノロジー名のみ記載役割・責務も記載する
凡例がない色や形の意味を凡例で示す
更新されていないコードと同期して更新する

まとめ

ポイント内容
4レベルContext → Container → Component → Code
ズーム読者に応じて適切なレベルを選択する
ツールMermaid、PlantUML、Structurizrで記述する
更新コードの変更に合わせて図も更新する

チェックリスト

  • C4の4レベルの違いを理解した
  • システムコンテキスト図を描ける
  • コンテナ図を描ける
  • Mermaidでの記述方法を把握した

次のステップへ

次は技術スタック選定の基準を学びます。

推定読了時間: 30分