2023/09/01の勉強会で発表されたものです。

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

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

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

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

5. MVCモデルとは
• クライアントとデータベースを加えるとこんな感
じ
Model
Controller
DB
DBアクセス
結果を返却

6. MVCモデルとは
• クライアントとデータベースを加えるとこんな感
じ
Model
View
Controller
描画結果を返す
描画を指示
DB

7. MVCモデルとは
• クライアントとデータベースを加えるとこんな感
じ
Model
View
Controller
リクエスト
データを要求
データを操作
DBアクセス
結果を返却
描画結果を返す
描画を指示
DB

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

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

10. Store
Dispatcher
APIアクセスした
結果をStoreに
反映することも
API
APIアクセス
操作指示
(Action)
• あちこちの用語が違うことに注意
Reactの設計思想

11. Store
Dispatcher
API
• あちこちの用語が違うことに注意
View
描画結果を返す
Storeの状態に
基づいて再描画
Reactの設計思想

12. Store
Dispatcher
• 枠内が一方向フローになっているのが特徴的
View
Reactの設計思想
API

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

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

15. Viewの書きやすさの違い
• Reactで書いたものと並べてみる

16. Viewの書きやすさの違い
• Reactで書いたものと並べてみる
• {}で囲んで埋め込む

17. Viewの書きやすさの違い
• Reactで書いたものと並べてみる
• ループ処理する部分も埋め込
み

18. Viewの書きやすさの違い
• Reactで書いたものと並べてみる
• ユーティリティ関数は無い

19. Viewの書きやすさの違い
• Reactだとコードの分割も容易い