MVC・MVVMアーキテクチャについて調べてみた


# 概要
はじめに
目的
アーキテクチャとは
1.MVCアーキテクチャ
　　メリット
　　デメリット
2.MVVMアーキテクチャ
　　メリット
　　デメリット
まとめ
参考サイト

# はじめに
前回の投稿で予告していた記事（数学苦手筆者シリーズ）より先に今回の記事ができましたので投稿いたします。
記事が前後してしまいますがご了承ください。

前回の記事

https://qiita.com/takathius2/items/c415ce2cd093f4eb22a2

# 目的
スクールでMVCアーキテクチャについて学んだものの、しばらく開発していないため忘れてしまっている部分があったので調べてみました。

# アーキテクチャとは
そもそもアーキテクチャって何でしょうか。ググると
> ・建築物。建築様式。建築学。構造。
・コンピュータ システムの論理的構造。
・（基本）設計を通じて設計者によりつくり出される「機能要素と構成部品との対応関係（マッピング）」や「構成部品間のインターフェースのルール」に関する基本的な構想がアーキテクチャ

IT業界でのアーキテクチャの意味については[アーキテクチャとは？本来の意味やIT業界での使われ方を詳しく解説](https://www.rstone-jp.com/column/95653/)から

> IT業界では『ソフトウェアアーキテクチャ』や『システムアーキテクチャ』など、よく使われる言葉があります。
IT業界のアーキテクチャとは、利用されるプログラムやシステムの設計、設計思想、構成や構造などを表すことが多いです。

またこちらの[ソフトウェアアーキテクチャー…？MVCやMVVMってなに！？](https://digitalidentity.co.jp/blog/creative/mvc-mvvm.html)では

> Webサービスを設計・開発する上では、MVCやMVVMなどの設計思想（ソフトウェアアーキテクチャー）を理解しておく必要があります。
サービスを利用するユーザー側ではさほど大きな差はありませんが、開発者側は、サービス改善でコードを変更する際の労力が大きく変わってきます。

とのこと。アーキテクチャといってもいくつか種類があり保守・開発にもかかわってくるようですね。

調べていくとかなり奥が深そう……

MVCとMVVMを今回は記載します。
## 1.MVCアーキテクチャ
Model・View・Controllerからなる内部データを編集・管理する仕組み。

|            | データ処理前の働き                                                    | データ処理後の動き                                            |
|:-:|:-|:-|
| Model       | Controllerから送られた指示に従いデータ処理を実行する                   | 変更したデータをControllerに送る                              |
| View        |UIから受け取ったリクエストをControllerに送る                           |Modelが扱っているデータをControllerを介して受け取りUI上に表示する|
| Controller  | Viewから受け取ったリクエストに対応し、Modelにデータ処理の実行を指示する |Modelで処理されたものをViewに送る                               |

### メリット
- MVCで明確に分かれていることから並行開発がしやすく、開発者の負担が少ない
- エラーが起きた際に原因を特定するのが比較的簡単である

### デメリット
- それぞれファイルが分かれていることから影響がどこまで及んでいるかわかりにくい
- 変更する際影響があるファイルについて慎重に考える必要がある

## 2.MVVMアーキテクチャ
[ソフトウェアアーキテクチャー…？MVCやMVVMってなに！？](https://digitalidentity.co.jp/blog/creative/mvc-mvvm.html)より
> MVVMはどのような設計思想なのかというと、ユーザーが入力した情報と、格納したデータをデータバインディングにて自動的に処理していくものになります。

|         |データ処理前の働き                                                          |データ処理後の働き            |
|:-:|:-|:-|
|View     |UIからリクエストを受け取る<br>VMにリクエストを送る                            |VMの変更を反映してUIに表示する|
|ViewModel|Viewからリクエストを受け取りModelに処理実行を指示する<br>同時にViewも変化させる|VMの変化をViewに反映させる    |
|Model    |MVから受け取った処理を実行                                                   |VMを変化させる               |

### バインディングとは？
同じサイトで説明がありました。以下のようなものらしいです。
> ・データバインディングはMVVMモデル特有の仕組みになっています。
データバインディングとは、ViewとView Modelを結び付ける仕組みのことです。
・データバインディングの特徴は、ViewとView Modelどちらかで値が書き変われば、値が変化するたびにViewとView Model、両方の値が変更されるという点です。
・データバインディングを行うMVVMは、Viewで変更があっても、Modelで変更があっても、お互いに更新を反映する機能を持っています。

MVCモデルではController・Modelを通してから表示や値が変化していたのが、VMがあることでより素早くUI上に変化したものが表示されるようですね。

### メリット
- データ更新が頻繁である場合に素早く更新し変化を表示することができる

MVVMアーキテクチャで開発を行ったことがありませんが、以上のことから利用シーンとしては、ToDoリストや株価のレート表示・家具を買う際にVRで確認したりするときに使われているのかもしれないですね。

### デメリット
- MVCと比べると処理動作がわかりづらい
- 平行開発がしづらい

デメリットについて検索したところ[【なぜiOSのMVVMはdisられるのか — Elm Architectureとの比較記事から考える】](https://rizumita.medium.com/%E3%81%AA%E3%81%9Cios%E3%81%AEmvvm%E3%81%AFdis%E3%82%89%E3%82%8C%E3%82%8B%E3%81%AE%E3%81%8B-elm-architecture%E3%81%A8%E3%81%AE%E6%AF%94%E8%BC%83%E8%A8%98%E4%BA%8B%E3%81%8B%E3%82%89%E8%80%83%E3%81%88%E3%82%8B-2116e0d67d9c)やほかのサイトでも言われているように、MVCと違い機能の区分けが明確ではないことから並行開発がしづらい・修正や変更の負担が大きくなりがちということがわかりました。

# まとめ
アーキテクチャについて理解することで、作りたいサービスに適した設計・開発ができること、開発の際の負担についても考える必要があることがわかりました。

# 参考サイト
- [アーキテクチャとは？本来の意味やIT業界での使われ方を詳しく解説](https://www.rstone-jp.com/column/95653/)
- [ソフトウェアアーキテクチャー…？MVCやMVVMってなに！？](https://digitalidentity.co.jp/blog/creative/mvc-mvvm.html)
- [なぜiOSのMVVMはdisられるのか — Elm Architectureとの比較記事から考える](https://rizumita.medium.com/%E3%81%AA%E3%81%9Cios%E3%81%AEmvvm%E3%81%AFdis%E3%82%89%E3%82%8C%E3%82%8B%E3%81%AE%E3%81%8B-elm-architecture%E3%81%A8%E3%81%AE%E6%AF%94%E8%BC%83%E8%A8%98%E4%BA%8B%E3%81%8B%E3%82%89%E8%80%83%E3%81%88%E3%82%8B-2116e0d67d9c)