⚓️

ソフトウェアアーキテクチャ入門

2023/09/23に公開

1件

はじめに

今回の記事では、ソフトウェアアーキテクチャの入門的な内容を解説する。

対象とする読者

ソフトウェアアーキテクチャを勉強するエンジニア
アーキテクチャに関して全くわからない初心者
タイトルで気になったひと

ソフトウェアアーキテクチャとは？

ソフトウェアのアーキテクチャは、システムの主要なコンポーネント、それらの関係（構造）、およびそれらがどのように相互作用するかを記述する。ソフトウェアのアーキテクチャとデザインには、品質属性、人間のダイナミクス、デザイン、IT環境など、多種多様な寄与要因が含まれる。アーキテクチャは、品質、保守性、パフォーマンス等のような全体的な成功に影響を与える重要な決定を含む。

ソフトウェアアーキテクチャの主な目的は、アプリケーションの構造に影響を与える要件を特定することだ。良好なアーキテクチャは、技術的な解決策を構築する際のビジネスリスクを削減し、ビジネス要件と技術要件の間の橋渡し的な役割を果たす。

ソフトウェアアーキテクチャが必要な理由

ソフトウェアアーキテクチャは、ソフトウェア開発において重要な理由がいくつかある。まず、アーキテクチャはシステムの設計図として機能し、システムの複雑さを管理し、コンポーネント間の通信を確立する。また、アーキテクチャは、システムが技術的および運用要件をすべて満たす構造化されたソリューションを定義する。さらに、アーキテクチャの決定は、品質、保守性、パフォーマンスなどに大きな影響を与える可能性がある。したがって、効果的なソフトウェアアーキテクチャは、ソフトウェア開発プロジェクトの成功に不可欠だ。

主なアーキテクチャのパターン

層状アーキテクチャ

システムのコンポーネントを明確な層（例: プレゼンテーション層、ビジネスロジック層、データアクセス層）に分ける。変更が一つの層に悪影響を及ぼさないようにするための構造。

以下は層状アーキテクチャの図解である。

それぞれの層の具体的な説明を以下に示す。

プレゼンテーション層：主にユーザとのインタラクションを管理する。UIコンポーネントやビューなどを含む。
アプリケーション層：システムのロジックを管理する。ユーザの入力を受け取り、適切なロジックを呼び出して結果をユーザに表示する。
ドメイン層：システムのコアなロジックを定義する。ビジネスエンティティ、ビジネスルールやロジックを含む。
データアクセス層：データの永続化を管理する。データベース、ファイルなどのやり取りを担当する。

要は、層状アーキテクチャはハンバーガーのような構造をしているアーキテクチャと解釈できる。

イベント駆動アーキテクチャ

ソフトウェアコンポーネントやサービス間でのイベントの生成と消費を促進する。コンポーネントは互いに直接呼び出さず、公開されたイベントに反応する。

以下はイベント駆動アーキテクチャの基本的なコンポーネントだ。

イベントプロデューサー(Event Producer)：イベントを生成するコンポーネント。
イベントチャンネル(Event Channel)：イベントを転送するためのメディア。
イベントコンシューマー(Event Consumer)：イベントを受信し、対応するアクションを実行するコンポーネント。

上述の図だけでは理解しづらいので、Eコマースサイトを具体例に解説する。イベント駆動アーキテクチャは、特定のイベントが発生すると、それに対応するアクションやタスクが実行される仕組みだ。これをEコマースサイトに当てはめると以下のようになる。余談だが、イベント駆動アーキテクチャでは、下記の1.～4.までの処理は非同期処理で実行される。

ユーザが商品をカートに追加する
ユーザが注文を完了する
在庫管理システムが在庫を更新する
通知サービスがユーザに注文を確認するメールを送信する

マイクロカーネルアーキテクチャ

コアシステム機能を小さなマイクロカーネルに、拡張機能をアドオンやプラグインに分ける。主に拡張性、メンテナンスの容易さ、障害の分離に焦点を当てる。

マイクロカーネルアーキテクチャを構成する主なコンポーネントは以下の通り。

マイクロカーネル(Microkernel)：基本的なサービスを提供する、小さなカーネル。通常、スレッド管理、低レベルのメモリ管理、インタープロセスコミュニケーション（IPC）を含む。
サーバー(Server)：OSの主要なサービスを提供する。
ユーザプロセス(User Processes)：ユーザレベルで動作するアプリケーションプロセス。これは、エンドユーザが直接やり取りするアプリケーションや、バックエンドで動作するアプリケーションを意味する。例えば、WEBブラウザやテキストエディタなどエンドユーザが使う大半のアプリケーションはユーザプロセスとして起動する。

マイクロサービスアーキテクチャ

マイクロサービスアーキテクチャとは、アプリケーションを小さく、独立したサービスの集合として構築できる設計アプローチだ。それぞれのマイクロサービスは独立してデプロイができ、特定のビジネス機能を実行する。これらのサービスは、HTTP RESTful APIを介して相互に通信する。

以下はマイクロサービスアーキテクチャの主要なコンポーネントだ。

マイクロサービス(Microservices)：特定のロジックを実行する独立したサービス。
APIゲートウェイ(API Gateway)：クライアントのリクエストを適切なマイクロサービスにルーティングする。
クライアント(Client)：エンドユーザが直接やり取りするアプリケーションやサービス。

クライアントは、エンドユーザーが直接インタラクションを行うアプリケーションやサービスで、APIゲートウェイにリクエストを送信する。APIゲートウェイは、これらのリクエストを受け取り、適切なマイクロサービスにルーティングします。また、APIゲートウェイはクライアントとマイクロサービス間の通信を管理し、負荷分散、認証、認可、セキュリティなどの機能を提供する。

一方、マイクロサービス1とマイクロサービス2は、特定のビジネス機能を実行するための独立したサービスだ。これらのマイクロサービスは、それぞれ独立してデプロイやスケールが可能で、必要に応じて他のマイクロサービスと通信を行う。

モノリシックアーキテクチャ

全てのアプリケーションのコンポーネントを一つのコードベースに統合し、一つの単位として実行するアーキテクチャだ。

以下は、モノリシックアーキテクチャの主要なコンポーネントだ。

ユーザーインターフェース（UI）：ユーザーとアプリケーションとのインタラクションを管理する層。
ビジネスロジック：アプリケーションのコア機能を実装する層。
データアクセス層：データベースとのインタラクションを管理する層。
データベース：アプリケーションのデータを保持する層。

MVCアーキテクチャ

MVC（Model-View-Controller）アーキテクチャは、ソフトウェアエンジニアリングにおいて、ユーザーインターフェースを持つアプリケーションを設計するための一般的なパターンだ。このパターンは、アプリケーションのロジックを3つの相互接続されたコンポーネントに分割する。

モデル（Model）：データの管理とビジネスルールの処理を担当する。データベースとのインタラクションを行う。
ビュー（View）：ユーザーに表示されるユーザーインターフェースの要素を生成する。ユーザーにデータを視覚的に提示する。
コントローラー（Controller）：ユーザーからの入力を受け取り、モデルとビューに命令を送る。ユーザーのアクションに応じて、モデルの状態を変更し、ビューを更新する。

簡単なサンプル(MVCアーキテクチャ)

以下に簡単なMVCアーキテクチャを表現したJavaScriptのサンプルコードを示す。

model.js

const model = {
    data: [],
    add(item) {
        this.data.push(item);
    },
    remove(index) {
        this.data.splice(index, 1);
    },
    getAll() {
        return this.data;
    }
};

上述のmodel.jsでは以下のような内容を記述する。

modelというオブジェクトを定義する。
data: 空の配列として初期化され、アイテムを格納するためのデータストレージとして機能する。
add(item)メソッドで、data配列にアイテムを追加する機能を実装する。
remove(index)メソッドで、指定されたインデックスのアイテムをdata配列から削除する。
getAll()でdata配列のすべてのアイテムを取得する。

view.js

const view = {
    render(data) {
        const list = document.getElementById('list');
        list.innerHTML = '';
        data.forEach((item, index) => {
            const listItem = document.createElement('li');
            listItem.textContent = item;
            list.appendChild(listItem);
        });
    }
};

view.jsでは以下の機能を実装する。

viewというオブジェクトが定義。
render(data)で与えられたデータを使用してHTMLのリストをレンダリングする。既存のリストアイテムをクリアし、新しいアイテムを追加。

controller.js

// controller.js
const controller = {
    init() {
        const addButton = document.getElementById('addButton');
        const inputField = document.getElementById('inputField');

        addButton.addEventListener('click', () => {
            const inputValue = inputField.value;
            model.add(inputValue);
            this.updateView();
        });
    },
    updateView() {
        const data = model.getAll();
        view.render(data);
    }
};

controller.jsでは以下の機能が実装される。

controllerというオブジェクトが定義されている。
init()というアプリケーションの初期化メソッドをつくる。ボタンのクリックイベントリスナーを追加して、入力フィールドの値をモデルに追加し、ビューを更新する。
updateView(): モデルからデータを取得してビューを更新するメソッド。

main.js

document.addEventListener('DOMContentLoaded', () => {
    controller.init();
});

上述のmain.jsではドキュメントが完全に読み込まれたときにcontroller.init()を呼び出すイベントリスナーが定義されている。これにより、アプリケーションの初期化が行われる。

動作の流れ

ユーザーがページをロードすると、DOMContentLoadedイベントが発火し、controller.init()が呼び出される。
init()メソッド内で、"addButton"というIDを持つボタンにクリックイベントリスナーが追加される。
ユーザーがボタンをクリックすると、入力フィールドの値がモデルに追加され、ビューが更新される。

このコードは、ユーザーがテキストを入力フィールドに入力し、ボタンをクリックすると、そのテキストがリストに追加される基本的な動作を示している。

おわりに

今回の記事では、ソフトウェアアーキテクチャの大まかな概要をMermaidを用いて簡潔に解説した。更に、簡単なMVCアーキテクチャを表現したJavaScriptのコードを書いて簡潔に説明した。

本記事で取り上げたアーキテクチャは以下の通りである。

層状アーキテクチャ
イベント駆動アーキテクチャ
マイクロカーネルアーキテクチャ
マイクロサービスアーキテクチャ
モノリシックアーキテクチャ
MVCアーキテクチャ

今回の記事が、初心者がソフトウェアアーキテクチャを学習する手助けになれば幸いである。

参考サイト・文献一覧

Web記事

https://awesome-architecture.com/

YouTube動画

文献

GitHubで編集を提案

Discussion

Atsushi Sakai

素晴らしい記事ありがとうございます！！。すごく勉強になりました。一点だけ、マイクロカーネルアーキテクチャの図がMVCアーキテクチャの図になってしまっています。もし可能でしたら、修正していただけるとより素晴らしい記事になると思います😃