SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Silverlight 4で作る新しいRIAアプリケーション

MVVMによるSilverlightアプリケーションの開発(その1)

Silverlight4で作る新しいRIAアプリケーション(6)


  • このエントリーをはてなブックマークに追加

ダウンロード sample.zip (178.1 KB)

 Silverlightに関するヘルプや記事を読むと、MVVMという言葉を頻繁に目にします。今回は、MVVMがどのようなものでなぜ必要になっているのか、どのように実装していけばいいのかについて解説します。

  • このエントリーをはてなブックマークに追加

はじめに

 Silverlightに限らない話ですが、ページからのイベントに対する処理をすべてイベントハンドラに記述してしまったために、再利用性が著しく低かったり、単体テストがひどくやりにくいシステムを見たことはありませんか? これは、プログラムの機能をすべて同じ層に記述していることが原因の1つです。

 この問題に対するSilverlightでの解決策の1つが、MVVMパターンです。今回はMVVMパターンと、MVVMパターンの要となるデータバインディング、コマンドバインディングについて2回にわたって解説します。

MVVMパターンとは

 MVVMはModel-View-ViewModelの頭文字をとった、アプリケーションの階層化パターンの1つです。階層化パターンを適用することで各層の依存関係が薄くなり、アプリケーションの修正、複数人数での分散開発、単体テストなどが実施しやすくなります。

 Expression Blend 4からは、デザインツール側でも標準でMVVMがサポートされていることから、デザイナーとの分業の面からもMVVMを取り入れたアプリケーションの階層化が重要になります。

フォームべた書きアーキテクチャの問題点

 SilverlightやASP.NETのWebFrom、WindowsFormのアプリケーション開発では、画面で発生したイベントはコードビハインドと呼ばれるコードファイルに、C#やVBで処理を記述します。特にサンプルアプリケーションなどでは、イベントハンドラにすべての処理を記述してあるものも少なくないでしょう。

 規模が小さなアプリケーションやサンプルであれば問題ないのですが、業務アプリケーションのように規模が大きかったり開発人数が多かったりする場合は次のような問題が発生します。

  • ページ側のコントロールの値を直接利用しているため、テストがしづらい
  • コードビハインドに処理が集中しているため、変更箇所の特定が難しい
  • コードビハインドに業務ロジックとUIの操作ロジックが混在しているため、画面の修正が難しい

階層型のアーキテクチャとMVC

 利用者からの変更依頼のなかで最も変更の頻度が多いのは、利用者が一番目に触れることの多いUIのデザインに関するものです。開発の現場ではプログラムの変更範囲を特定したり変更しやすくしたりするために、レイヤー型のアーキテクチャを採用することが一般的になっています。

 特に有名な階層型のアーキテクチャにMVC(Model-View-Controler)パターンがあります。

 MVCパターンは、Model(業務処理)とユーザーインターフェース(View)をコントローラーによって分離する考え方です。

 一般的にレイヤー型のアーキテクチャでは、ユーザーインターフェースとビジネスロジックとが分離されているため、適切にレイヤー化されたアプリケーションは、そうでないものと比べ次のような利点があります。

  • UIと業務処理が分離されているため、自動単体テストが容易(testable)
  • 必要な機能がレイヤーごとに分かれているため変更箇所の特定が容易(maintainable)
  • コードビハインドにロジックが少ないため、画面の修正や分業が容易(designable)

MVVMパターン

 MVVMパターンは前述のMVCの考え方を元に、XAMLに最適化した階層化パターンです。

 MVVMの基本方針はコードビハインドにはできるだけコードを記述しないことで、開発者には単体テストが実施しやすくメンテナンスしやすい環境を、デザイナーには画面をデザインしやすい環境を提供することです。MVVMパターンの概要を図1に示します。

図1 MVVMパターンの概要
図1 MVVMパターンの概要

 MVVMでは、モデルとビューをビューモデルによって分離します。MVCとの違いは、ビューモデルはビューとバインドされることでビューの状態を持ち、ビューに対する値の変更通知やビューで発生したコマンドの実行を行うことです。MVCをSilverlightに適用することもできますが、バインディングを効率的に利用しようと思ったらMVVMの形に自然に落ち着いた、というところでしょうか。

サンプルアプリケーションの概要

 今回のサンプルは、購入した書籍のタイトルを管理する画面です。

 サンプルではビューモデルに読み込まれた書籍情報のデータや保存、読み込みと行ったコマンドをビューにバインドし、ユーザーのアクションに応じてビューモデルからモデルの情報を操作します。サンプルアプリケーションの動作イメージを図2に示します。

図2 サンプルイメージ
図2 サンプルイメージ

 サンプルアプリケーションを参考に、MV-V-Mのそれぞれの役割について解説しましょう。

モデル ~ビジネス領域をモデル化したアプリケーションの要~

 モデルと言われてもピンとこないかもしれませんが、ここで言うモデルとは特定の業務分野(ドメイン)をモデル化したもの、つまりビジネスロジックやビジネスのデータをモデル化したドメインモデルを指します。

 本連載の第3回でWCF RIA Servicesを紹介しましたが、そのなかで出てくるドメインサービスと同じものと考えていただければいいでしょう。

 Silverlightでモデルと言うと、多くの場合はWCFサービスやWCF RIA Serviceを指すことが多いです。今回は書籍情報の検索や登録、修正といった操作を行うWCFサービスが、このサンプルアプリケーションのモデルになります。WCFの実装方法やEntity FrameworkについてはMVVMの概要とは離れてしまうので、ここでは割愛します。

 WCFサービスが公開する情報を図3に示します。

図3 WCFのクラス図
図3 WCFのクラス図

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
ビュー ~ユーザーインターフェース~

修正履歴

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
Silverlight 4で作る新しいRIAアプリケーション連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト かるあ (杉山 洋一)(カルア(スギヤマ ヨウイチ))

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5699 2011/02/22 00:07

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング