de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

包括的なステップバイステップの事例研究：C4モデルをインターネットバンキングシステム（Big Bank plc）に適用する

The C4モデル、サイモン・ブラウンによって作成された、シンプルで階層的かつ開発者フレンドリーなソフトウェアアーキテクチャの可視化方法である。4つの抽象レベル（そのため「C4」）を使用して、システムの最高レベルの概要からコードレベルの詳細までを記述する。

  1. システムコンテキスト （レベル1）－全体像：システムとそのユーザー／外部依存関係。

  2. コンテナ （レベル2）－高レベルの技術選択と責任。

  3. コンポーネント （レベル3）－コンテナ内の主要な論理的構成要素。

  4. コード （レベル4）－オプションのクラスレベルまたはコード構造の詳細。

3つの追加の図形式によってサポートされている：

  • システムランドスケープ

  • ダイナミック

  • デプロイメント

このモデルは表記に依存せず（任意の図作成ツールを使用可能）、明確性、一貫性、対象読者に適した詳細さに焦点を当てる。『大きな泥だらけのボール』のようなアーキテクチャ図を避け、ホワイトボードのスケッチから自動文書化までスケーラブルであるため、広く採用されている。

この 対象となる事例研究では、公式C4ウェブサイトの標準例を使用する： インターネットバンキングシステム フィクションの「Big Bank plc」向け。ビジネス目標は、個人顧客がアカウントをオンラインで確認し、支払いを行うことを可能にするとともに、銀行の既存のコアシステムと統合することである。

以下を順に説明する：すべてのレベル 以下を含む：

  • 目的と対象読者

  • 主要な要素＋責任

  • 関係性

  • 使用可能な PlantUML C4図（PlantUMLはC4構文をサポートしており、ほとんどのMarkdownビューアーで美しくレンダリングされます）

  • 根拠と重要な意思決定

  • 図がステークホルダーにどのように役立つか

ステップ1：範囲の定義とシステムコンテキスト図の作成（レベル1）

目的：新しいインターネットバンキングシステムが世界の中でどのように位置づけられているかを示す。対象：ビジネス関係者、技術に詳しくない人、新しくチームに加わったメンバー。

要素 （公式の例から）：

  • 個人銀行顧客 （人）－1つ以上の個人口座を持つ顧客。

  • インターネットバンキングシステム （ソフトウェアシステム）－私たちが構築している新しいシステム。

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

  • メールシステム （ソフトウェアシステム、外部）－確認メールの送信に使用するAmazon Web Services Simple Email Service（AWS SES）。

関係:

  • 顧客 → 使用 → インターネットバンキングシステム（口座の確認および支払いのため）

  • インターネットバンキングシステム → 使用 → コアバンキングシステム（口座データおよび支払いのため）

  • インターネットバンキングシステム → メールを送信 → メールシステム経由

以下が PlantUML C4コンテキスト図:

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

LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title インターネットバンキングシステムのシステムコンテキスト図（レベル1）

Person(customer, "個人銀行顧客", "1つ以上の個人口座を持つ顧客。")
System(internet_banking_system, "インターネットバンキングシステム", "口座の確認および支払いを行う新しいシステム。")
System(core_banking_system, "コアバンキングシステム", "顧客データ、口座、取引を処理する既存のメインフレーム。")
System_Ext(email_system, "メールシステム", "確認メールの送信に使用するAmazon Web Services Simple Email Service（AWS SES）。")

Rel(customer, internet_banking_system, "使用")
Rel(internet_banking_system, core_banking_system, "使用")
Rel(internet_banking_system, email_system, "メールを送信経由")

Lay_D(customer, internet_banking_system)
Lay_D(internet_banking_system, core_banking_system)
Lay_U(email_system, internet_banking_system)
@enduml

根拠と価値：この1枚の図で「何を構築しているのか、誰とやり取りしているのか」がすぐにわかります。外部依存関係を明確にすることでスコープクリープを防ぎます。技術的な詳細がまだないため、ビジネス関係者はこの図を好むのです。

ステップ2：コンテナ図（レベル2）

目的：インターネットバンキングシステムにズームインし、主要なデプロイ可能／実行可能な単位（コンテナ）とその技術選定を示す。対象：アーキテクト、リード開発者、運用担当者。

インターネットバンキングシステム内のコンテナ:

  • シングルページアプリケーション (ウェブブラウザ – JavaScript + Angular) – オールインワンのインターネットバンキングUI。

  • モバイルアプリ (モバイルデバイス – iOS/AndroidネイティブまたはReact Native) – 移動中における限定的な機能。

  • APIアプリケーション (サーバーサイド – Java + Spring Boot) – 両方のフロントエンドで使用されるJSON/HTTPS API。

  • データベース (リレーショナルDB – PostgreSQL) – セッションデータ、ユーザー設定、キャッシュされた口座概要を格納（コアデータはメインフレームに保持）。

主要な関係 (レベル1と同じ外部システム):

  • SPAおよびモバイルアプリ → 呼び出し → APIアプリケーション

  • APIアプリケーション ↔ データベース

  • APIアプリケーション → コアバンキングシステムおよびメールシステム

PlantUML C4コンテナ図:

@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()

タイトル：インターネットバンキングシステムのC4コンテナ図

Person(顧客, “個人バンキング顧客”, “1つ以上の個人口座を持つ顧客。”)

System_Boundary(インターネットバンキングシステム, “インターネットバンキングシステム”, “口座の確認や支払いを行うための新しいシステム。”) {
Container(spa, “シングルページアプリケーション”, “JavaScript + Angular”, “完全なインターネットバンキングUI”, $sprite=”angular”)
Container(モバイルアプリ, “モバイルアプリ”, “iOS/Android (React Native)”, “移動中における限定的な機能”, $sprite=”react”)
Container(apiアプリ, “APIアプリケーション”, “Java + Spring Boot”, “両方のフロントエンドで使用されるJSON/HTTPS API”, $sprite=”java”)
ContainerDb(database, “データベース”, “PostgreSQL”, “セッションデータ、ユーザー設定、キャッシュされたアカウント概要を格納”, $sprite=”postgresql”)
}

System(core_banking_system, “コアバンキングシステム”, “顧客データ、口座、取引を処理する既存のメインフレーム。”)
System_Ext(email_system, “メールシステム”, “確認メールの送信に使用するAmazon Web Services Simple Email Service (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”)

‘ レイアウトヒント（オプション – PlantUMLが要素をより良い順序で配置するのを助ける）
Lay_D(customer, internet_banking_system)
Lay_D(internet_banking_system, core_banking_system)
Lay_U(email_system, internet_banking_system)

@enduml

根拠: ユーザーインターフェースとして現代的なSPA + APIバックエンドパターンを採用し、パフォーマンスを重視してネイティブモバイルアプリを採用しました。データベースは軽量に保ち、大部分のデータはレガシーなメインフレームに保存しています。この図は上位レベルの技術的決定事項の唯一の信頼できる情報源であり、DevOpsがインフラを計画するのを支援します。

ステップ3：コンポーネント図（レベル3）

目的: 1つのコンテナ（通常は最も複雑なもの – APIアプリケーション）にズームインし、主要な論理コンポーネントを表示する。対象：開発チーム。

例：APIアプリケーション内のコンポーネント:

  • アカウントコントローラー（Spring MVC）

  • 認証コントローラー

  • パスワードリセットコントローラー

  • セキュリティコンポーネント（認証、JWTなどを処理）

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

  • メール通知コンポーネント

PlantUML C4 コンポーネント図 (APIアプリケーションに焦点を当てた):

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml

LAYOUT_WITH_LEGEND()

title コンポーネント図：インターネットバンキングシステム - APIアプリケーション

Container(spa, "シングルページアプリケーション", "javascript and angular", "顧客がウェブブラウザ経由ですべてのインターネットバンキング機能を利用できるようにする。")
Container(ma, "モバイルアプリ", "Xamarin", "顧客がモバイルデバイス経由でインターネットバンキング機能の限定的なサブセットを利用できるようにする。")
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", "認証、JWTトークン生成、パスワードハッシュ化を処理する。")
    Component(accountmgmt, "アカウント管理コンポーネント", "Spring Bean", "アカウント操作のためのコアバンキングシステムへの呼び出しを調整する。")
    Component(email, "メール通知コンポーネント", "Spring Bean", "SMTP経由でパスワードリセットメールおよびアカウント確認メールを送信する。")

    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：コード図（レベル4）－オプション

目的：単一のコンポーネントの内部構造（クラス図、シーケンス図など）を示す。対象：そのコードを担当する開発者。

例：認証コントローラコンポーネント – PlantUMLで作成されたシンプルなUMLクラス図：

@startuml
classDiagram

skinparam {
roundcorner 8
ArrowColor #444444
ArrowFontColor #444444
BorderColor #444444

Class {
BorderColor #1A237E
BackgroundColor #E8EAF6
FontColor #1A237E
}
}

class “AuthenticationController” {
+login(credentials)
+refreshToken()
}

class “JwtTokenProvider” {
+generateToken(user)
+validateToken(token)
}

class “UserRepository” {
+findByUsername()
}

AuthenticationController ..> JwtTokenProvider : “uses”
AuthenticationController ..> UserRepository : “uses”
@enduml


実際のプロジェクトでは、レベル4をスキップして、代わりに実際のソースコードを参照することがよくあります。

ステップ5：補足図の作成

動的図 (例: 「口座明細の表示」のフロー)

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

title 口座明細の表示のための動的図

Person(customer, “個人向け銀行顧客”) {
Container(spa, “シングルページアプリケーション”) {
Container(api, “APIアプリケーション”) {
ContainerDb(db, “データベース”) {
System_Ext(coreBanking, “コアバンキングシステム”)
}
}
}
}

Rel(customer, spa, “1. ‘口座’をクリック”, “”)
Rel(spa, api, “2. GET /accounts”, “JSON/HTTPS”)
Rel(api, db, “3. キャッシュされた概要を読み取り”, “”)
Rel(api, coreBanking, “4. 最新のデータを取得”, “”)
Rel(api, spa, “5. JSONを返却”, “”)

SHOW_LEGEND()
@enduml

配置図 (高レベルの物理マッピング):

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

title インターネットバンキングシステムの配置図

Deployment_Node(aws, “Amazon Web Services”, “クラウド”) {
Deployment_Node(ec2, “EC2 Auto-Scaling Group”, “Linux”) {
Container(api, “APIアプリケーション”, “Java Spring Boot”)
}
Deployment_Node(rds, “RDS”, “PostgreSQL”) {
ContainerDb(db, “データベース”)
}
}

Deployment_Node(customerDevice, “顧客のデバイス”, “Web/モバイル”) {
Container(spa, “シングルページアプリケーション”)
Container(mobile, “モバイルアプリ”)
}

System_Ext(coreBanking, “コアバンキングシステム（オンプレミスメインフレーム）”)

Rel(spa, api, “API呼び出しを行う”, “HTTPS”)
Rel(mobile, api, “API呼び出しを行う”, “HTTPS”)
Rel_U(api, spa, “顧客のWebブラウザに配信”)
Rel_U(api, mobile, “モバイルアプリに配信”)

SHOW_LEGEND()
@enduml

実際の現場でこの事例を活用する方法

  1. ワークショップから始める：ホワイトボードにコンテキストを描く。

  2. PlantUML C4を用いて、コンテナとコンポーネントへと段階的に進む。

  3. 図をコードリポジトリに保持（コードとして！）することで、常に最新の状態を保つ。

  4. 生きたドキュメントを自動的に生成する。

このインターネットバンキングシステムの例は、サイモン・ブラウンによって作成された公式の参考例であり、世界中の数千の組織で使用されています。これらの手順に従うことで、CEOから新米のジュニア開発者まで、誰もが適切な詳細レベルで理解できる、完全で本番環境対応のアーキテクチャ記述を手に入れました。

C4図に関する記事