浦田 瑞紀 の記事一覧

こんにちは、GMOインターネットグループ株式会社 フロントエンドエンジニアの浦田です。ConoHaは現在、大進化の時期に差し掛かっており、チーム一同大奮闘中でございます。そんな中で今回は、ConoHaコンパネのシステム設計やGUIアーキテクチャパターンについて入社一年目で学んだ内容を共有したいと思います。 はじめに ConoHaコントロールパネルでは、ドメイン駆動設計を使用し、「保守性」「再利用性」「拡張性」が高くい変化に強いソフトウェアの設計を心がけております。 本記事では、ドメイン駆動設計をベースに、GUIアーキテクチャなどフロントエンドにおけるソフトウェアの設計についてメリット・デメリットとともに解説したいと思います。 ドメイン駆動設計 システムにおけるドメイン駆動設計について少し解説したいと思います。ビジネスドメイン（業務領域）を中心に据え、ビジネスルールやプロセスをソフトウェア設計に反映させます。これにより、開発者はビジネス要件に集中し、ドメインの理解を深めながら柔軟かつ効果的なソリューションを構築を行うことができます。問題領域の複雑さに対処し、ソフトウェアの保守性、再利用性、拡張性を備えた変化に強いソフトウェア設計です。 コンパネ開発においてドメイン駆動設計のメリットデメリットを現場の声とともにまとめてみました。 メリット 書くところ（クラス）が決まっているので簡単要件を正確に反映させたモデルを作成できる保守性と可読性の向上 デメリット 複雑性の増加・実装量が多い学習コストが高い ユビキタス言語の意識から可読性が高く、要件が分かりやすいクラスは、実装者と事業者とのやり取りをよりスムーズなものにできていると感じています。 MVP ConoHaではGUIアーキテクチャーパターンを使用して、フロントエンドの設計を行っています。パターンには様々あり、原点となるMVCパターンは、ユーザの入力をControllerが受け取り、ControllerがModelを操作し、その結果をViewでユーザーに返します。ConoHaではControllerがViewに組み込まれ、PresenterがModelとViewの制御を行うMVPパターンを採用しており、踏襲した形で一部にアレンジを加えています。フロントの設計方針（クラスの定義）についてはこちらに記載してありますのでご覧ください。以下ではフロントにおける「保守性」「再利用性」「拡張性」についてまとめてみました。 保守性： View: 画面描画や情報取得を集約し、変更があってもViewのみに影響を与えるため、保守性が高まります。Presenter: EventHandlerとの連携で、必要な変更点が限定され、変更時の修正範囲が明確です。Repository: インターフェース経由で参照するため、バックエンドの変更があっても影響が局所的で、保守作業が容易です。 再利用性： Selector：セレクタや属性の定義を一元管理し、再利用と保守が容易です。変更が必要な場合、Selectorのみを修正すれば済みます。Repository：インターフェースによって異なるバックエンド実装を切り替えやすく、コードの再利用性を高めます。 拡張性： EventHandler：新しいイベントの追加や既存イベントの変更が可能で、システムの拡張が柔軟です。バックエンド通信の追加もPresenterを介して容易に行えます。 この設計において、各要素の役割分担が明確であり、変更に対する影響範囲が限定的なため、保守性が高まり、再利用性と拡張性も確保されています。以上の設計を実際に実装して感じた、メリットとデメリットをまとめてみました。 メリット 実装者間のバラつきが少なくなった可読性の向上モジュールが独立しているため、修正が他の部分に影響を与えにくく保守性が向上する デメリット 実装量が多い学習コストが高いことファイル数が増えたのでコンパイルに時間がかかるようになった気がする... おわりに いかがだったでしょうか。 以上が、ConoHaコントロールパネルのフロント設計になります。皆様により長くConoHaをご愛顧いただけるよう、私自身、まだまだ駆け出しのフロントエンドエンジニアではありますが、日々奮闘していきたいと思います。