本文へスキップ

JavaにおけるModel-View-Intentパターン：MVIによる堅牢でスケーラブルなJava UIの構築

アーキテクチャ抽象化デカップリングプレゼンテーションリアクティブ状態追跡約4分

別名

  • MVI

Model-View-Intentデザインパターンの目的

Javaアプリケーション向けのModel-View-Intent（MVI）パターンは、Model、View、Intentコンポーネント間の単方向かつ循環的なデータフローを作成し、UIの予測可能性と状態管理を向上させます。

実例を用いたModel-View-Intentパターンの詳細な説明

実例

ファストフード店で注文するシナリオを使用して、JavaにおけるModel-View-Intent（MVI）パターンの現実世界のアナロジーを考えて、UI状態管理の向上における適用性を理解しましょう。

このアナロジーでは

  • Model：レストランの厨房のようなものです。ここで、注文の現在の状態が管理されます。アイテムを選択すると、厨房は注文状況と使用された材料を更新します。
  • View：メニューと、現在の注文サマリーが表示されるデジタルディスプレイボードを表します。注文の現在の状態を反映し、追加または削除したアイテムを表示します。
  • Intent：メニューとやり取りするときの意思決定プロセスと考えてください。バーガーを追加したり、飲み物を削除したりするなど、行う各選択は、システム（厨房）に特定の意図を送信します。

注文にアイテムを追加する（Intent）と決定すると、厨房（Model）がこのリクエストを処理し、注文の状態を更新し、次にディスプレイ（View）が注文の最新の状況を表示するように更新されます。注文を確定するまで、このサイクルが継続され、MVIの特徴である単方向かつ循環的なフローが示されます。これにより、注文のすべての変更が、MVIを使用してソフトウェアの状態変化に応答してUIコンポーネントが更新される方法と同様に、顧客のビューに予測可能かつ正確に反映されることが保証されます。

簡単に言うと

Model-View-Intent（MVI）パターンは、ユーザーアクション（Intent）がアプリケーションの状態（Model）を変更し、更新された状態が単方向かつ循環的なデータフローでユーザーインターフェース（View）に反映されるリアクティブなアーキテクチャアプローチです。

JavaにおけるModel-View-Intentパターンのプログラミング例

Java向けのModel-View-Intent（MVI）パターンは、アプリケーションのロジックを構成するための近代的なアプローチであり、データとイベントの円滑な単方向フローを保証します。Model-View-Presenter（MVP）およびModel-View-ViewModel（MVVM）パターンのバリエーションですが、データとイベントのフローがより効率化されています。

MVIでは、ViewはユーザーイベントをIntentに送信します。IntentはこれらのイベントをModelの状態変化に変換します。次に、Modelはこの新しい状態をViewにプッシュし、Viewはそれに応じて自身を更新します。これにより、単方向のデータフローが作成され、コードの理解とデバッグが容易になります。

まず、アプリケーションのエントリポイントとして機能する`App`クラスがあります。これはViewとViewModelを作成し、次に電卓との一連のユーザーインタラクションをシミュレートします。

public final class App {
  private static final double RANDOM_VARIABLE = 10.0;

  public static void main(final String[] args) {
    var view = new CalculatorView(new CalculatorViewModel());
    var variable1 = RANDOM_VARIABLE;

    view.setVariable(variable1);
    view.add();
    view.displayTotal();

    variable1 = 2.0;
    view.setVariable(variable1);
    view.subtract();
    view.divide();
    view.multiply();
    view.displayTotal();
  }

  private App() {
  }
}

`CalculatorView`クラスは、MVIのViewを表します。ユーザーイベント（この場合は`App`クラスでシミュレート）を受け取り、ViewModelに送信します。また、ViewModelから新しい状態を受け取ると、表示を更新します。

public class CalculatorView {
  private CalculatorViewModel viewModel;

  public CalculatorView(CalculatorViewModel viewModel) {
    this.viewModel = viewModel;
  }

  public void setVariable(double variable) {
    viewModel.process(new SetVariableEvent(variable));
  }

  public void add() {
    viewModel.process(new AddEvent());
  }

  public void subtract() {
    viewModel.process(new SubtractEvent());
  }

  public void divide() {
    viewModel.process(new DivideEvent());
  }

  public void multiply() {
    viewModel.process(new MultiplyEvent());
  }

  public void displayTotal() {
    System.out.println("Total: " + viewModel.getState().getTotal());
  }
}

`CalculatorViewModel`クラスは、MVIのViewModelを表します。Viewからイベントを受け取り、それに応じてModelの状態を更新し、新しい状態をViewにプッシュします。

public class CalculatorViewModel {
  private CalculatorModel model;

  public CalculatorViewModel() {
    this.model = new CalculatorModel();
  }

  public void process(UserEvent event) {
    event.apply(model);
  }

  public CalculatorModel getState() {
    return model;
  }
}

`CalculatorModel`クラスは、MVIのModelを表します。電卓の現在の状態を保持し、その状態を更新するためのメソッドを提供します。

public class CalculatorModel {
  private double total;
  private double variable;

  public void setVariable(double variable) {
    this.variable = variable;
  }

  public void add() {
    total += variable;
  }

  public void subtract() {
    total -= variable;
  }

  public void divide() {
    total /= variable;
  }

  public void multiply() {
    total *= variable;
  }

  public double getTotal() {
    return total;
  }
}

最後に、`UserEvent`インターフェースとその実装は、発生する可能性のあるさまざまなタイプのユーザーイベントを表します。各イベントは、Modelに自身を適用する方法を知っています。

public interface UserEvent {
  void apply(CalculatorModel model);
}

public class SetVariableEvent implements UserEvent {
  private double variable;

  public SetVariableEvent(double variable) {
    this.variable = variable;
  }

  @Override
  public void apply(CalculatorModel model) {
    model.setVariable(variable);
  }
}

// Similar classes would be created for AddEvent, SubtractEvent, DivideEvent, and MultiplyEvent ...

この例は、MVIパターンの重要な側面を示しています。単方向データフロー、懸念事項の明確な分離、およびModelの状態の変化を促進するためのイベントの使用です。

JavaでModel-View-Intentパターンを使用する場面

  • MVIパターンは、懸念事項の明確な分離、予測可能な状態管理、および保守性の向上を必要とする複雑なユーザーインターフェースを持つJavaアプリケーションで役立ちます。
  • 円滑なデータフローと状態の一貫性を確保するために、リアクティブプログラミング環境でよく適用されます。

Model-View-IntentパターンのJavaチュートリアル

JavaにおけるModel-View-Intentパターンの実用例

  • RxJavaやProject Reactorなどのフレームワークを使用するリアクティブでイベント駆動型のJavaアプリケーション、特にそれらのアプリケーションで広く採用されています。
  • Android開発で使用され、特にRxJavaやLiveDataなどのリアクティブプログラミングをサポートするライブラリと共に使用されます。

Model-View-Intentパターンのメリットとデメリット

メリット

  • 明確で循環的なデータフローを確立することにより、UIの予測可能性を高めます。
  • コンポーネント間の明確な分離により、テスト容易性を向上させます。
  • Model内に状態を集中させることで、より優れた状態管理をサポートします。

デメリット

  • 構造化された循環フローのため、単純なUIでは複雑さが増します。
  • リアクティブプログラミングのパラダイムに精通している必要があります。
  • 適切に管理されない場合、ボイラープレートコードにつながる可能性があります。

Model-View-ViewModel (MVVM)：ビューとモデルの分離という同様の目標を共有しますが、MVIは循環的なデータフローを導入することで異なります。
Model-View-Controller (MVC)：MVIはMVCの進化と見なすことができ、リアクティブプログラミングと単方向データフローに重点を置いています。
オブザーバー：Modelの変化を観察し、それに応じてViewを更新するために、MVIにおいて不可欠です。

参考文献と謝辞

MITライセンス
Copyright © 2024 iluwatar