de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

The C4モデル、サイモン・ブラウンによって開発された、ソフトウェアアーキテクチャを可視化するための強力で階層的なアプローチである。4つの抽象レベルを用いることで、ビジネス関係者から開発者まで、さまざまな対象者に適した詳細度を提供する。これにより、明確で保守性が高く、対象読者に焦点を当てたドキュメント作成に最適である。

Introduction to C4 Model: a Quick Guide - Visual Paradigm Blog

この包括的なガイドは、よく知られた事例研究に基づいている。Big Bank plcのインターネットバンキングシステム— 個人顧客が口座を確認し、支払いを行うためのオンラインバンキングプラットフォームを構築する、架空だが現実的な例である。この事例研究では、C4モデルを段階的に適用する方法を示しており、PlantUML「アーキテクチャをコードとして」するためのものである。また、現代的なツールであるVisual ParadigmのAI搭載C4 PlantUML Studio（2025年後半にリリース）を活用することで、作成と保守を加速する。

C4モデルの概要

このモデルには4つのレベルが含まれる：

  1. レベル1：システムコンテキスト— 大まかな全体像：システム、ユーザー、外部依存関係。

  2. レベル2：コンテナ— 主要なデプロイ可能な単位（アプリケーション、サービス、データベース）および高レベルの技術選択。

  3. レベル3：コンポーネント— コンテナ内の内部論理的な構成要素。

  4. レベル4：コード— オプションの低レベルの詳細（例：クラス）；ソースコードへの参照を優先するため、しばしば省略される。

追加の支援ビューには、動的（実行時フロー）およびデプロイメント図が含まれる。

C4モデルの適用：Big Bank plcのインターネットバンキングシステム事例研究

レベル1：システムコンテキスト図

目的：ビジネス関係者および非技術者向けの高レベルな概要を提供し、インターネットバンキングシステムが広い環境の中でどのように位置づけられているかを、技術用語を使わずに示す。

主要な要素:

  • 人物：個人銀行顧客 — 1つ以上の個人口座を持つ顧客。

  • ソフトウェアシステム: インターネットバンキングシステム — 顧客が口座情報を確認し、支払いを行うことを可能にする。

  • 外部システム:

    • コアバンキングシステム（既存のメインフレーム） — 顧客データ、口座、取引を処理する。

    • メールシステム（例：AWS SES） — 確認および通知を送信する。

関係:

  • 顧客は…を使用するインターネットバンキングシステムを使用する。

  • インターネットバンキングシステムは…を使用するデータおよび取引のためのコアバンキングシステムを使用する。

  • インターネットバンキングシステムメールを…経由で送信するメールシステム経由で送信する。

このレベルでは、範囲と統合についてシンプルで明確な説明を保つ。

PlantUMLの例（ケーススタディから改変）：

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title システムコンテキスト図（レベル1）：インターネットバンキングシステム
Person(顧客, "個人向けバンキング顧客", "1つ以上の個人口座を持つ顧客。")
System(インターネットバンキングシステム, "インターネットバンキングシステム", "顧客が口座を確認し、支払いを行うことを可能にする。")
System(コアバンキングシステム, "コアバンキングシステム", "既存のメインフレームで顧客データ、口座、取引を処理する。")
System_Ext(メールシステム, "メールシステム", "確認メールの送信に使用するAmazon Web Services Simple Email Service (AWS SES)。")
Rel(顧客, インターネットバンキングシステム, "使用")
Rel(インターネットバンキングシステム, コアバンキングシステム, "使用")
Rel(インターネットバンキングシステム, メールシステム, "メールを…経由で送信")
@enduml

レベル2：コンテナ図

目的：主要な構成要素（コンテナ）と技術選定を詳細に表示し、アーキテクト、開発者、DevOpsチームを対象とする。

主な要素（インターネットバンキングシステムの境界内）：

  • シングルページアプリケーション（SPA） — JavaScript + Angular、UIはすべてウェブブラウザ内で実行。

  • モバイルアプリ — React Native（または同等）を用いたiOS/Android、機能は限定的。

  • APIアプリケーション — Java + Spring Boot、JSON/HTTPS APIでフロントエンド双方を提供。

  • データベース — PostgreSQL、セッションデータ、設定、キャッシュされた要約を格納（コアデータはメインフレームに保持）。

外部 — コアバンキングシステムおよびメールシステム。

関係:

  • 顧客はHTTPS経由でSPAおよびモバイルアプリを使用。

  • SPAおよびモバイルアプリはAPIアプリケーション（JSON/HTTPS）を呼び出す。

  • APIアプリケーションはデータベースを読み書き（JDBC/SQL）。

  • APIアプリケーションはコアバンキングシステム（JSON/HTTPS）およびメールシステム（HTTPS）と連携。

この図は技術決定の「唯一の真実のソース」として機能する。

PlantUMLの例 （アイコンにスプライトを使用）：

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/angular.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/java.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/postgresql.puml
LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title インターネットバンキングシステムのC4コンテナ図
Person(customer, "個人銀行顧客", "1つ以上の個人口座を持つ顧客。")
System_Boundary(internet_banking_system, "インターネットバンキングシステム") {
    Container(spa, "シングルページアプリケーション", "JavaScript + Angular", "完全なインターネットバンキングUI", $sprite="angular")
    Container(mobile_app, "モバイルアプリ", "iOS/Android (React Native)", "限定機能", $sprite="react")
    Container(api_app, "APIアプリケーション", "Java + Spring Boot", "JSON/HTTPS API", $sprite="java")
    ContainerDb(database, "データベース", "PostgreSQL", "セッションデータ、設定、キャッシュされた要約", $sprite="postgresql")
}
System(core_banking_system, "コアバンキングシステム", "既存のメインフレーム...")
System_Ext(email_system, "メールシステム", "AWS SES...")
Rel(customer, spa, "使用", "HTTPS")
Rel(customer, mobile_app, "使用", "HTTPS")
Rel(spa, api_app, "呼び出し", "JSON/HTTPS")
Rel(mobile_app, api_app, "呼び出し", "JSON/HTTPS")
Rel(api_app, database, "読み書き", "JDBC/SQL")
Rel(api_app, core_banking_system, "照会／更新", "JSON/HTTPS")
Rel(api_app, email_system, "HTTPS経由でメール送信", "HTTPS")
@enduml

レベル3：コンポーネント図

目的開発チーム向けに、重要なコンテナ（ここではAPIアプリケーション）の内部構造を詳細に示す。

主要コンポーネント （APIアプリケーション内）：

  • アカウントコントローラー（Spring MVC）— 要約と残高を提供。

  • 認証コントローラー（Spring MVC）— ログイン、セッション、トークン。

  • パスワードリセットコントローラー（Spring MVC）— メールによるパスワードリセット。

  • セキュリティコンポーネント（Spring Bean）— 認証、JWT、ハッシュ化。

  • アカウント管理コンポーネント（Spring Bean）— コアバンキング呼び出しの調整。

  • メール通知コンポーネント（Spring Bean）— メールの送信。

相互作用 — コントローラーはセキュリティを使用；アカウント管理はコアバンキングを使用；メールはデータベースを使用；フロントエンドはコントローラーを呼び出す。

PlantUMLの例:

PlantUML Diagram

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml
LAYOUT_WITH_LEGEND()
title インターネットバンキングシステム - APIアプリケーションのコンポーネント図
Container(spa, "シングルページアプリケーション", "javascriptとangular", "...")
Container(ma, "モバイルアプリ", "...", "...")
ContainerDb(db, "データベース", "...", "...")
System_Ext(mbs, "メインフレームバンキングシステム", "...")
Container_Boundary(api, "APIアプリケーション") {
    Component(accounts, "アカウントコントローラ", "Spring MVC", "...")
    Component(auth, "認証コントローラ", "Spring MVC", "...")
    Component(reset, "パスワードリセットコントローラ", "Spring MVC", "...")
    Component(security, "セキュリティコンポーネント", "Spring Bean", "...")
    Component(accountmgmt, "アカウント管理コンポーネント", "Spring Bean", "...")
    Component(email, "メール通知コンポーネント", "Spring Bean", "...")
    Rel(accounts, security, "使用")
    Rel(auth, security, "使用")
    Rel(reset, security, "使用")
    Rel(accountmgmt, mbs, "使用", "XML/HTTPS")
    Rel(email, db, "読み取り", "JDBC")
}
Rel(spa, accounts, "使用", "JSON/HTTPS")
Rel(spa, auth, "使用", "JSON/HTTPS")
Rel(spa, reset, "使用", "JSON/HTTPS")
Rel(ma, accounts, "使用", "JSON/HTTPS")
Rel(ma, auth, "使用", "JSON/HTTPS")
Rel(ma, reset, "使用", "JSON/HTTPS")
@enduml

レベル4：コード図（オプション）

目的特定の領域（例：認証）のクラスレベルの詳細を表示する。

しばしば省略される。代わりにソースコードへのリンクを示す。

例 — 認証用のUMLクラス図：

  • AuthenticationControllerはJwtTokenProviderとUserRepositoryを使用する。

PlantUMLの例:

@startuml
classDiagram
class "AuthenticationController" {
    +login(credentials)
    +refreshToken()
}
class "JwtTokenProvider" {
    +generateToken(user)
    +validateToken(token)
}
class "UserRepository" {
    +findByUsername()
}
AuthenticationController ..> JwtTokenProvider : "使用"
AuthenticationController ..> UserRepository : "使用"
@enduml

補足ビュー

  • 動的図 （例：「アカウント概要を表示」シーケンス）：顧客 → SPA → API → データベース／コアバンキング → 応答。

  • 展開図コンテナをインフラ構成にマッピングする（例：APIにはAWS EC2、データベースにはRDS、オンプレミスのメインフレーム）。

Visual ParadigmのAI駆動ツールを活用する

Visual ParadigmのAI駆動C4 PlantUML Studio （2025年後半リリース）はこのプロセスを革新する：

  • 自然言語を入力する（例：「SPA、モバイルアプリ、Spring Boot API、PostgreSQL、メインフレーム統合を備えたインターネットバンキングシステムのC4モデルを作成」）。

  • AIがすべてのレベルのPlantUMLコードと図を生成する。

  • AIチャットボットを使って反復処理を行う（例：「認証コンポーネントにMFAを追加」または「AWS上の展開ビューを生成」）。

  • すべてのレベルで一貫性を保ち、「生きているドキュメント」をサポートする。

  • エクスポートし、バージョン管理し、リポジトリに統合する。

このツールは、汎用AIよりもはるかに信頼性の高い構造化されたC4準拠の出力を提供する。

ベストプラクティス

  1. ワークショップから始める — ステークホルダーの合意を得るために、レベル1ではホワイトボードを使用する。

  2. アーキテクチャをコードとして扱う — コードの変更に伴い自動更新されるように、PlantUMLファイルをリポジトリに保存する。

  3. AIで自動化する — 図面を素早く生成・修正するためにVisual Paradigmを使用する。

  4. 対象読者に焦点を当てる — レベル1では技術的な詳細を省略し、段階的に追加する。

  5. 軽量さを保つ — 複雑なコンテナはレベル3でのみ詳細を記載する；必須でない限りレベル4はスキップする。

  6. ドキュメントを進化させる — 図面を「生きているもの」にすることで、古くなったアーティファクトを防ぐ。

Big Bank plcの事例は、現実世界のシナリオにおいてC4モデルの有効性を示す古典的な例のままであり、明確さ、協働、スケーラブルなアーキテクチャのコミュニケーションを促進している。詳しくは公式C4サイトまたはVisual ParadigmのAIツールを確認してください。