Design patterns
MVC、MVVM、MVP

備考

モデルビューコントローラ（MVC）

1. MVCとは何ですか？

モデルビューコントローラ（MVC）パターンは、ユーザーインターフェイスを作成するために最も一般的に使用されるデザインパターンです。 MVCの主な利点は、

• アプリケーション状態の内部表現（モデル）、
• 情報がどのようにユーザに提示されるか（View）、および
• ユーザがアプリケーション状態（コントローラ）とやり取りする方法を制御するロジック。

2. MVCの使用例

MVCの主な使用例は、グラフィカルユーザーインターフェイス（GUI）プログラミングです。 Viewコンポーネントは、変更のためにModelコンポーネントをリッスンします。モデルは放送局として機能します。モデルに変更モードがある場合、その変更はビューとコントローラにブロードキャストされます。モデルコンポーネントを変更するには、ビューでコントローラを使用します。

3.実装

次のMVCの実装について考えてみましょう。ここでは、 AnimalsというModelクラス、 DisplayAnimalsというViewクラス、 DisplayAnimalsというコントローラクラスがAnimalControllerます。以下の例は、 Design Patterns - MVC Patternの MVCチュートリアルの変更版です。

/* Model class */
public class Animals {
    private String name;
    private String gender;

    public String getName() {
        return name;
    }

    public String getGender() {
        return gender;
    }

    public void setName(String name) {
         this.name = name;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }
}

/* View class */
public class DisplayAnimals {
    public void printAnimals(String tag, String gender) {
        System.out.println("My Tag name for Animal:" + tag);
        System.out.println("My gender: " + gender);
    }
}

/* Controller class */
public class AnimalController {
     private Animal model;
     private DisplayAnimals view;

   public AnimalController(Animal model, DisplayAnimals view) {
      this.model = model;
      this.view = view;
   }

   public void setAnimalName(String name) {
      model.setName(name);        
   }

   public String getAnimalName() {
      return model.getName();        
   }

   public void setAnimalGender(String animalGender) {
      model.setGender(animalGender);        
   }

   public String getGender() {
      return model.getGender();        
   }

   public void updateView() {                
      view.printAnimals(model.getName(), model.getGender());
   }    
}

4.使用されたソース：

デザインパターン - MVCパターン

MVCを使用したJava SEアプリケーション設計

モデルビューコントローラ

モデルビューViewModel（MVVM）

1. MVVMとは何ですか？

Model View ViewModel（MVVM）パターンは、ユーザーインターフェイスを作成するために最も一般的に使用されるデザインパターンです。これは、一般的な "モデルビューコントローラ"（MVC）パターンから派生したものです。 MVVMの主な利点は、

• アプリケーション状態の内部表現（モデル）。
• 情報がどのようにユーザに提示されるか（ビュー）。
• モデルからデータを公開して変換し、ビュー（ViewModel）でデータを簡単に管理して表示できる「バリュー・コンバータ・ロジック」。

2. MVVMの使用例

MVVMの主な使用例は、グラフィカルユーザーインターフェイス（GUI）プログラミングです。これは、データを管理するバックエンドロジックからビューレイヤーを分離することによって、ユーザーインターフェイスのイベントドリブンプログラミングに簡単に使用されます。

たとえば、Windows Presentation Foundation（WPF）では、ビューはフレームワークマークアップ言語XAMLを使用して設計されています。 XAMLファイルは、データバインディングを使用してViewModelにバインドされます。このようにして、ビューはプレゼンテーションの責任しか持たず、ビューモデルはモデル内のデータを操作することによってアプリケーション状態を管理する責任があります。

これは、JavaScriptライブラリKnockoutJSでも使用されています。

3.実装

C＃.NetとWPFを使用してMVVMの次の実装を検討してください。 AnimalsというModelクラス、Xamlで実装されたViewクラス、AnimalViewModelというViewModelがあります。以下の例は、 Design Patterns - MVC Patternの MVCチュートリアルの変更版です。

モデルが何を知っていないかを見てみると、ViewModelはモデルのみを認識し、ViewはViewModelしか知りません。

OnNotifyPropertyChangedイベントを使用すると、モデルとビューの両方を更新でき、ビューのテキストボックスに何かを入力するとモデルが更新されるようになります。何かがモデルを更新すると、ビューが更新されます。

/*Model class*/
public class Animal 
{
    public string Name { get; set; }

    public string Gender { get; set; }
}

/*ViewModel class*/
public class AnimalViewModel : INotifyPropertyChanged
{
    private Animal _model;

    public AnimalViewModel()
    {
        _model = new Animal {Name = "Cat", Gender = "Male"};
    }

    public string AnimalName
    {
        get { return _model.Name; }
        set
        {
            _model.Name = value;
            OnPropertyChanged("AnimalName");
        }
    }

    public string AnimalGender
    {
        get { return _model.Gender; }
        set
        {
            _model.Gender = value;
            OnPropertyChanged("AnimalGender");
        }
    }

    //Event binds view to ViewModel.
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            var e = new PropertyChangedEventArgs(propertyName);
            this.PropertyChanged(this, e);
        }
    }
}


<!-- Xaml View -->
<Window x:Class="WpfApplication6.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        xmlns:viewModel="clr-namespace:WpfApplication6">
    
    <Window.DataContext>
        <viewModel:AnimalViewModel/>
    </Window.DataContext>
    
    <StackPanel>
        <TextBox Text="{Binding AnimalName}" Width="120" />
        <TextBox Text="{Binding AnimalGender}" Width="120" />
    </StackPanel>
</Window>

4.使用されたソース：

モデルビュービューモデル

単純なMVVMの例

世界で最もシンプルなC＃WPF MVVMの例

MVVMパターン