こんにちは、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をご愛顧いただけるよう、私自身、まだまだ駆け出しのフロントエンドエンジニアではありますが、日々奮闘していきたいと思います。

ブログの著者欄
採用情報
関連記事
KEYWORD
CATEGORY
-
技術情報(594)
-
イベント(237)
-
カルチャー(60)
-
デザイン(70)
TAG
- 5G
- AI
- AI TALK
- AI 機械学習強化学習
- AI/機械学習
- AIエージェント
- AIコーディング
- AI人財
- AI駆動
- Behind the Scenes
- BIT VALLEY
- blockchain
- ChatGPT
- ChatGPT Team
- Claude Team
- cloudflare
- cloudnative
- CNDO
- CNDT
- CODE BLUE
- ConoHa
- ConoHa VPS
- CSS
- CTF
- Designship
- developer
- DevRel
- DevSecOpsThon
- Docker
- DTF
- Engineering Journey
- expert
- EXPERT CROSS
- GMO AI&ロボティクス商事
- GMO AIR
- GMO DESIGN AWARD
- GMO Developers Day
- GMO Developers Night
- GMO Flatt Security
- GMO GPUクラウド
- GMO Hacking Night
- GMO kitaQ
- GMO SONIC
- GMOアドパートナーズ
- GMOアドマーケティング
- GMOインターネット
- GMOインターネットグループ
- GMOインターネットグループ陸上部
- GMOグローバルサイン
- GMOコネクト
- GMOサイバーセキュリティ byイエラエ
- GMOデジキッズ
- GMOブランドセキュリティ
- GMOペイメントゲートウェイ
- GMOペパボ
- GMOメディア
- GMO大会議
- GMO天秤AI
- Go
- Good Morning
- GPUクラウド
- GTB
- Hack-1グランプリ
- iOS
- IoT
- ISUCON
- Japan Drone
- JapanDrone
- Java
- JJUG
- K8s
- Kaigi on Rails
- Kids VALLEY
- LLM
- MCP
- MetaMask
- MySQL
- NFT
- OpenStack
- Perl
- PHP
- PHPcon
- PHPerKaigi
- Python
- RPA
- Ruby
- SECCON
- Selenium
- Spectrum Tokyo Meetup
- splunk
- SRE
- Takumi byGMO
- Terraform
- TypeScript
- UI/UX
- vibe
- VPN
- VS Code
- XSS
- ZTNA
- アドベントカレンダー
- インターンシップ
- インハウス
- お名前.com
- クリエイターインタビュー
- クリエイティブ
- コンテナ
- サイバーセキュリティ
- サマーインターン
- スクラム
- スペシャリスト
- セキュリティ
- ソフトウェアサプライチェーン
- チームビルディング
- デザイン
- ネットのセキュリティもGMO
- ハーネスエンジニアリング
- バックエンド
- ヒューマノイド
- ヒューマノイドロボット
- プログラミング教育
- ブロックチェーン
- フロントエンド
- ゆめみらいワーク
- リモートワーク
- レンタルサーバー
- ロボット
- 京大ミートアップ
- 国際ロボット展
- 基礎
- 多拠点開発
- 宮崎オフィス
- 応用
- 技育プロジェクト
- 技術広報
- 技術書典
- 新卒
- 新卒研修
- 映像
- 映像クリエイター
- 暗号
- 業務効率化
- 機械学習
- 決済
- 生成AI
- 脆弱性診断
- 開発者
PICKUP
-
デザインカンファレンス「Yoitoi Summit 2026」をGMOYours・フクラスにて開催!
デザイン
-
攻撃者優位の時代に問われる「使命感」 GMO Flatt Security&GMOサイバーセキュリティ byイエラエが描く、AI時代のセキュリティ構想(後編)ーEngineering Journey
技術情報
-
頂上と裾野の両方から「底上げ」 GMO Flatt Security&GMO サイバーセキュリティ byイエラエが支える、日本のサイバーセキュリティ(前編)ーEngineering Journey
技術情報
-
【開催レポート】八幡小学校 社会科見学 at GMO kitaQ
カルチャー
-
デザインコンテスト「GMO DESIGN AWARD 2026」開催決定!3年目のテーマは「トキメキ」
デザイン
-
ソフトウェアサプライチェーン攻撃から「エンジニアの背中」を守る。Takumi byGMO・「Guard」機能「Runner」機能 開発の舞台裏ーEngineering Journey
技術情報