MVCになぞらえて理解するReact

MVCになぞらえて
理解するReact
執筆者：トビウオ

目次
• MVCモデルについておさらい
• Reactの設計思想とMVCモデルとの比較
• テンプレートエンジンとReactとで書き方を比較
• UIをReactで書くメリット

MVCモデルとは
• 次の3要素により構成されるシステム
• Model：データ管理
• View：画面上の表示
• Controller：リクエストの処理

MVCモデルとは
• クライアントとデータベースを加えるとこんな感
じ
Model
Controller
HTTP
リクエスト
データを要求・操作
(いわゆるCRUD)

MVCモデルとは
じ
Model
Controller
DB
DBアクセス
結果を返却

MVCモデルとは
じ
Model
View
Controller
描画結果を返す
描画を指示
DB

MVCモデルとは
じ
Model
View
Controller
リクエスト
データを要求
データを操作
DBアクセス
結果を返却
描画を指示
DB

Reactの設計思想
• 「仮想DOM」という概念を生み出した
• 仮想DOMを操作する部分
• 仮想DOMの差分を検知/再描画する部分
• これを先ほどの図に当てはめてみる

• あちこちの用語が違うことに注意
Store
Dispatcher
操作指示
(Action)
Actionに基づいて
表示用データ (Store)
を変更

Store
Dispatcher
APIアクセスした
結果をStoreに
反映することも
API
APIアクセス
操作指示
(Action)

Store
Dispatcher
API
View
Storeの状態に
基づいて再描画

Store
Dispatcher
• 枠内が一方向フローになっているのが特徴的
View
API

MVCとReactとの違い
• 使用される用語が違う
• Model≒Store、Controller≒Dispatcher
• Reactの方がViewに寄った設計
• 複雑なViewを設計しやすい

Viewの書きやすさの違い
• MVC側ではThymeleafを例にしてみる
• htmlファイルとして記述
• th:から始まるキーワード群
によって処理を指示する
• formatDecimalなどユーティ
リティ関数が多数存在する
• JavaScriptは副次的なもの

• Reactで書いたものと並べてみる

• {}で囲んで埋め込む

• ループ処理する部分も埋め込
み

• ユーティリティ関数は無い

• Reactだとコードの分割も容易い

Recommended