この記事では、MVC(Model View Controller、モデル ビュー コントローラ)のソフトウェアアーキテクチャのパターンの背後にある概念の基本的な概要を説明し、アプリ開発のための一般的なフレームワークである Ember.js がこれをどのように実装しているかを説明しています。

Model View Controller の背後にある理論

MVC(Model View Controller)はソフトウェアアーキテクチャのパターンであり、一般的にユーザーインターフェイス(UI)を実装するために使用されます。 したがって、ウェブアプリのアーキテクチャとして人気があります。 一般に、アプリのロジックを3つの別々の部分に分け、モジュール性ならびにコラボレーションと再利用の容易さを促進します。 また、アプリの柔軟性を高め、反復を歓迎します。

これをもう少し明確にするために、単純な買い物リストアプリを想像してみましょう。 私たちが望むのは、今週購入する必要がある各アイテムの名前、数量、価格のリストです。 以下では、MVC を使用してこの機能のいくつかを実装する方法について説明します。

mvc アーキテクチャのさまざまな部分を示す図。

モデル

モデルは、アプリに含めるべきデータを定義します。 このデータの状態が変更された場合、モデルは通常、(ディスプレイを必要に応じて変更できるように)ビューと時には(更新されたビューを制御するために異なるロジックが必要な場合は)コントローラに通知します。

買い物リストアプリに戻って、モデルは、リストアイテムに含めるべきデータ(アイテム、価格など)と、どのリストアイテムが既に存在しているかを指定します。

ビュー

ビューは、アプリのデータをどのようにディスプレイするかを定義します。

買い物リストアプリでは、ビューは、リストがどのようにユーザに提示されるかを定義し、モデルからディスプレイするデータを受け取ることができます。

コントローラ

コントローラは、アプリのユーザからの入力に応答して、モデルやビューを更新するロジックを含みます。

ですから、たとえば、買い物リストには入力フォームやボタンがあり、アイテムの追加や削除ができます。 これらのアクションは、モデルを更新する必要があるため、入力はコントローラに送られ、コントローラはモデルを適切に操作し、更新されたデータをビューに送ります。

また、ビューを更新してデータを別の形式でディスプレイすることもできます。 たとえば、アイテムの順序をアルファベット順、あるいは最低価格から最高価格に変更することができます。 この場合、コントローラは、モデルを更新する必要なしにこれを直接処理できます。

ウェブ上の MVC の進化

ウェブ開発者として、以前は意識的に使用したことがない場合でも、このパターンはおそらくかなり親しみやすいでしょう。 あなたのデータモデルは、おそらくある種のデータベースに含まれているでしょう(MySQL のような伝統的なサーバー側のデータベースでも、IndexedDB などのクライアント側のソリューションでもかまいません)。 あなたのアプリの制御コードはおそらく HTML/JavaScript で書かれているでしょうし、あなたのユーザーインターフェースはおそらく HTML/CSS/あなたが好きなものを使って書かれているでしょう。 これは MVC と非常によく似ていますが、MVC はこれらのコンポーネントをより堅牢なパターンに従わせます。

ウェブの初期段階では、MVC アーキテクチャはほとんどがサーバー側で実装されていました。 クライアントはフォームやリンクを介して更新を要求し、更新されたビューをブラウザーにディスプレイするように戻します。 しかし、最近では、クライアント側のデータストアの出現により、より多くのロジックがクライアントに押し付けられ、XMLHttpRequest は必要に応じて部分的なページ更新を可能にします。

AngularJSEmber.jsBackbone.js などの一般的なウェブフレームワークは、やや異なった方法ではあるが、すべて MVC アーキテクチャを実装しています。

Ember.js が MVC を実践する方法

このシリーズで使用するフレームワークである Ember は、厳密な概念とルールに従って MVC を実装しています。 このドキュメントでは、あなたが今知っておくべきことについて簡単にまとめています。 あなたは Ember のドキュメントでそれに関する詳細を読むことができます — Ember.js のガイドとチュートリアルや、サイドバーの Getting Started セクションを参照してください。

最後に、Ember CLI を使用してこのプロセスの多くを自動化しているので、Ember CLI のマニュアルを手元に置いておく必要があります。

Ember のビュー層

Ember では、ビューは一般的な MVC のビューと少し異なります。 MVC 用語では、通常、ビューは「UI 層全体」と考えていますが、Ember では、ビューはルートテンプレートと共に UI の別の特定のコンポーネントです。

典型的な単純な Ember.js UI は、Route(ルート)オブジェクトとテンプレートファイルを使用してビューを処理します。 ルートは、ユーザーが特定のテンプレートにアクセスできる URL を指定し、そのテンプレートにデータをディスプレイするのは、どのモデルかを指定することもできます。 各ルートは JavaScript ファイルで表されます。 テンプレートは UI の外観を指定し、Handlebars テンプレートファイル(.hbs)で表されます。これらのファイルは二重中括弧({{  ... }})で囲まれた特別な動的な式が挿入された HTML です。 最も単純な形式の二重中括弧は、モデル(またはコントローラ)に含まれるデータ/プロパティを取得し、UI で出力することができます。

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

これらのプロパティは、モデル/コントローラが変更されたときにテンプレート内で自動的に更新されます。

Ember CLI は、次のコマンドを使用してルートおよび関連するテンプレートを生成できます。

ember generate route my-route-name

これにより次のものが生成されます。

  1. ルートを制御するための  your-app-root/app/routes 内の JavaScript ファイル。
  2. 指定された URL に表示されるコンテンツを定義する your-app-root/app/templates 内の Handlebars テンプレート。
  3. ルートにおける機能のテストを定義できる your-app-root/tests/unit/routes 内のユニットテストファイル。

ルートファイルには、必要なルートロジックの作成を始めるための基本的なスケルトンが含まれています。

import Route from '@ember/routing/route';

export default Route.extend({
  // your own features, as required 訳:独自の機能を、必要に応じて
});

その他の MVC フレームワークと同様に、Ember はコアとなるアプリの構造の基盤を提供し、アプリの構造を拡張してアプリのニーズに合わせてカスタマイズすることができます。 このコードはメインの Ember オブジェクトをインポートし、Ember の組み込み Route オブジェクトの上に extend メソッドを呼び出すことで機能を構築することができます。 これはあなたがアプリを構築するときに認識し始める非常に一般的なパターンです。

ルートファイルとテンプレートファイルは、同じもの、たとえば shopping-list.jsshopping-list.hbs と呼ばれるので、デフォルトで一緒に関連付けられます。 そのビューは、your-server.com/shopping-list/(または、そうあなたが呼んだもの)でユーザに提供されます。

Ember のコントローラ

Ember.js はコントローラオブジェクトを使用するコントローラを表します。 コントローラオブジェクトは JavaScript ファイルに含まれています。

Ember CLI は、次の構文を使用してコントローラを生成できます。

ember generate controller name-of-my-controller

これにより、次の2つの新しいファイルが作成されます。

  1. 特定のモデル/ビューを制御するための your-app-root/app/controllers 内の JavaScript ファイル。
  2. コントローラの機能のテストを定義できる your-app-root/tests/unit/controllers 内のユニットテストファイル。

したがって、買い物リストの例では、shopping-list というルートとテンプレートがすでに存在する場合、shopping-list というコントローラを生成するのが理にかなっています。 このように命名すると、このコントローラが正しいルートやモデルに自動的に関連付けられます。

生成されたコントローラファイルは、次のものが含まれています。

import Controller from '@ember/controller';

export default Controller.extend({
  // your own features, as required 訳:独自の機能を、必要に応じて
});

ルートと同様に、コントローラはメインの Ember オブジェクトをインポートし、デフォルトの Controller オブジェクトを拡張して、望むものを実行する独自のカスタムコントローラを作成できるようにします。

Ember のモデル

Ember.js はモデルオブジェクトを使用したモデルを表します。 モデルオブジェクトは以前と同じように JavaScript ファイルに含まれています。

Ember CLI は、次の構文を使用してモデルを生成できます。

ember generate model name-of-my-model

これにより、次の2つの新しいファイルが作成されます。

  1. この特定のビューに関連付けるデータを定義するための your-app-root/app/models 内の JavaScript ファイル。
  2. モデルの機能のテストを定義できる your-app-root/tests/unit/models 内のユニットテストファイル。

買い物リストの例では、shopping-list というモデルを生成するのが理にかなっています。 このように命名すると、このモデルは自動的に正しいルートやコントローラに関連付けられます。

生成されたモデルファイルには次のものが含まれます。

import DS from 'ember-data';

export default DS.Model.extend({
  // your own features, as required 訳:独自の機能を、必要に応じて
});

ルートとコントローラに似た方法で、モデルはメインの Ember オブジェクトをインポートし、デフォルトの Model オブジェクトを拡張して、望むものを実行する独自のカスタムモデルを作成できるようにします。

次に

Ember と MVC の背後にあるいくつかの簡単な理論を説明したので、実際に Ember ベースの MVC アプリを構築してみましょう。

ドキュメントのタグと貢献者

このページの貢献者: Wind1808
最終更新者: Wind1808,