前のパートに戻る 完了して次のパートへ  

  0-3 設計

リアル DOM との比較


仮想 DOM フレームワークを作っていただきますが、まずはじめにリアル DOM の実装(jQuery)と仮想 DOM の実装(React)の比較をします。

そうすることで、jQuery でのリアル DOM 操作の問題点を明確にし仮想 DOM のメリットをご理解いただいた上で仮想 DOM フレームワークの実装をします。


作成する画面


今回は自作の仮想 DOM フレームワークを使って Twitter 風のフォロー/フォロー解除ボタンを作ります。

元となるアカウント一覧の json


こちらがアカウント一覧のデータになります。これを元に描画をします。

実装する内容


今回実装するこのフレームワークでは Flux アーキテクチャのように単方向データフローで View の更新ができるようにしています。 Flux とは Facebook が作成したアーキテクチャパターンでデータの流れが一方通行になるように設計されています。

facebook/flux: Application Architecture for Building User Interfaces

実際に作るものでいうと下記のような流れになります。

  1. View(画面上) でフォローボタンをクリック
  2. Action が発動
  3. state(状態) を更新
  4. View へ反映

お疲れ様でした。これで環境構築、設計の完了です。次章では jQuery を使ってリアル DOM の操作をしていただきます。

議論

0 質問

このコースの評価は?