【Swift】MVVMアーキテクチャとは?ViewModelの役割

この記事からわかること

  • MVVMとは?
  • Model View ViewModel役割
  • 特徴メリット
  • 設計方法実装例

index

[open]

\ アプリをリリースしました /

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

アプリ開発を行う上で重要になってくる設計思想(アーキテクチャ)の1つである「MVVM」についてまとめていきます。

MVVMとは?

MVVMとはアプリなどのソフトウェア開発に適応される設計思想(アーキテクチャ)の1つです。その中でもMVVMはプログラムを3つの要素に分かれた構造で設計する思想であり、拡張性や保守性、作業性、再利用のしやすさなどを向上させるために用いられます。

MVVM の3つの要素

MVVMでは上記の3つの要素に分かれてアプリ設計を行います。そしてそれぞれの頭文字「Model View ViewModel」をとって名付けられています。

ちなみに別の設計思想であるMVCもiOSアプリ開発ではよく用いられます。公式によるとUIKitフレームワーク自体がMVCアーキテクチャーに準じた構造で設計されており、また比較的取っ付きやすい構造なので初心者はこちらから学習することをおすすめします。

おすすめ記事:Swift(UIKit)のMVCアーキテクチャーとは?役割と構造まとめ

iOSアプリ開発とアーキテクチャ

Swiftを使用したiOSアプリ開発ではMVVMに倣って開発されることが多いです。Swift UIが発表されてからはMVVMとの親和性は少し下がっているようですが、UIKitベース(Storyboard)で開発する際にはMVVMがよく使われている印象です。

UIKitベースでは画面を管理するViewControllerクラスになんでも詰め込めてしまうのでコードが肥大化しやすく、流れも掴みづらい構造になりがちです。

MVVMに限らずアーキテクチャに倣った開発を行うことでコードの目的と役割が明確になり、予期せぬバグや保守性の高いアプリ開発が可能になります。

またRxSwiftと呼ばれるライブラリがMVVMとセットで使用されます。

MVVMの特徴とメリット

MVVMの1番の特徴はデータバインディングです。データバインディングとはデータと対応するオブジェクトを紐づけることで同期的な仕組みを持たせることで、データの変更がそのままビューにも適応されるような設計を構築できます。

データバインディングには単方向バインディング双方向バインディングがありますがこれは片側への反映のみか相互に反映させるかの違いです。

3つの要素

MVVMは3つの要素に分かれていました。

これらをもう少し深掘りしてみます。

Model

Model(モデル) とはデータ部分を司っている要素です。データベースに格納されている情報通信処理などがまさしくモデルで扱う部分であり、データにおけるCRUD(クラッド:Create, Read, Update, Delete)などの処理も実装します。

例えば取得したデータを表示するために整形するのもこの要素の努めになります。日付のフォーマットや数字の表し方など、他の部分にはデータに関するロジックは含ませないようにしてモデル内でデータに関するロジックを終了させます。モデルから受け取ることができる状態のデータがそのまま使われるようにすることを意識して作成するのが大事になるのだと思います。

View

Viewはユーザーの目に実際に触れる部分を司っている要素です。View自体にデータは保持しておらず、Modelのデータを参照することでページを構築していき、Modelのデータが変更になれば都度表示も切り替えることで動的に変化するページが作成されます。

またユーザーと直接やり取りするインタラクティブ(対話的)な部分でもあります。ユーザーの入力操作やタップ操作などのイベントを検知します。

ViewModel

ViewModelはViewとModelの仲介を行う部分です。Viewに表示させるためのデータをModelから受け取る役割や逆にViewから受け取ったら入力を適切にModelへと伝達する役目を待っています。Viewとはデータバインディングなどの仕組みを利用して同期的なデータの更新を実装します。

RxSwiftとMVVM

Swiftで MVVMに倣った設計を実装するためによく利用されるライブラリがRxSwiftです。MVVMの肝となるデータバインディングやイベントの検知など、様々な機能を実装できリアクティブプログラミングな開発を手助けしてくれます。

RxSwiftは学習コストが高く使いこなせるようになるまでには時間がかかりますが実践でもよく使われているライブラリなので学習して損はないような気がします。

おすすめ記事:RxSwiftとは?導入方法と使い方まとめ!ストリームを理解する

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

フレームワーク:Laravel/Vue.js

作成の流れQiita「Laravel×Vue.jsを使って初めてWebアプリを自作しました!」

感想:初めて作成したWebアプリです!メールアドレスでの会員登録や質問投稿、回答やコメント、いいねやフォローなどSNSに近い機能を実装してみました。レビューや修正すべきポイントなどを教えていただけると嬉しいです!

New Article

index