SwiftUIとMVIの相性が良さそうだったので調べてみた #1

経緯

medium.com

こちらの記事を読んで、MVI patternが気になったため、色々調べてみました。

まだまだ知らないことが多いので、間違いなどあったらご指摘頂けますと幸いです。

iOS+MVIの記事が少なく、Android/Webの知見に頼る部分も多くあるため、調べ方なども含めて、参考になると幸いです。

MVIとは

Model-View-Intentの略です。MVIのそれぞれの役割については後述しますが、まずはどのようにMVIが提案されたのか、調べていった過程で見てもらえればと思います。

色々調べている中で、Androidでは記事などで紹介されているとアドバイスをもらったので、 「Android MVI」で調べてみました。

Androidでは、既に有名なカンファレンスなどでも紹介されているようで、iOSよりも情報量が多かったです。

b.hatena.ne.jp

さらに、Androidの記事などを見ていく中で、「Cycle.jsはMVIアーキテクチャを採用しているFramework」という情報を知りました。

Cycle.js

Cycle.jsは、MVI patternを採用したWebフロントエンドのフレームワークです。

cycle.js.org

上にリンクを貼ったCycle.jsのサイトを参考に、MVI patternにおける、それぞれのクラスの役割について調べようと思います。

余談ですが、「Cyclejs MVI」で調べると、参考になりそうな記事が多く出てきます。MVIアーキテクチャの概念理解に困ったら、Cycle.jsで調べると、多くの情報を得られそうです。

MVI pattern

MVI is a simple pattern to refactor the main() function into three parts: Intent (to listen to the user), Model (to process information), and View (to output back to the user).

上記、Cycle.jsの公式ドキュメントに記載されていました。

Intentがユーザからの操作を監視 → Model側で情報を処理 → Viewへ反映 という流れで処理を記述するようです。

まとめ

本記事では、MVIアーキテクチャの紹介をしました。

次回記事で、実際にSwiftUIでMVIアーキテクチャを実装したいと思います。

参考資料