React って本当に使う意味あるの？ 〜SPA と React の「キホン」の「キ」〜

資料の中に出てくるコードのリンクを貼っておきます。

①FWなし（Rails+Ajax）
ソースコード 1（JavaScript）https://gist.github.com/youliangdao/3ec60ef2015d86e769c1dffcc93126bd
ソースコード 2（Rails の Model）https://gist.github.com/youliangdao/4520a7947acdcaa3de807d863bbbaf05
ソースコード 3（Rails の Controller）https://gist.github.com/youliangdao/3fa64e8d357789d80db9f7f8171487be
ソースコード 4（Rails の View）https://gist.github.com/youliangdao/ac5a392a8bb1e913c78813ada57fb597

②FWあり（React）
ソースコードhttps://gist.github.com/youliangdao/128299f74c063053aba0c0a2efa4de76

Transcript

1. React って本当に使う意味あ React って本当に使う意味あ るの？ るの？ 〜SPA と React の「キホン」の「キ」〜
2. @yusuke_blog1026 @yusuke_blog1026 ゆー 26 歳 W 杯のせいで寝不足。
3. 世は大 SPA 時代！ 世は大 SPA 時代！ React ！Vue ！ React ！Vue ！
4. 🤔 🤔
5. そもそも SPA って何？？従来のアプリケーショ ンと何が違うの？ React や Vue をなぜ使うの？
6. 今回話す内容 今回話す内容 章 目次 1 SPA とは？SPA のメリット・デメリット 2 React や Vue は何が便利なのか？ 3 まとめ
7. 章 目次 1 SPA とは？SPA のメリット・デメリット 2 React や Vue は何が便利なのか？ 3 まとめ
8. シングルページアプリケーション （英: single-page application 、SPA ）と は、単一の Web ページのみから構成 することで、デスクトップアプリケ ーションのようなユーザ体験を提供 する Web アプリケーションまたは Web サイトである。必要なコード （HTML 、JavaScript 、CSS ）は最初に まとめて読み込むか、ユーザの操作 などに応じて動的にサーバと通信 し、必要なものだけ読み込みを行 う。 引用元：Wikipedia
10. ※Ajax について ※Ajax について Ajax = 「Asynchronous JavaScript + XML 」 Asynchronous = 「非同期」 XML = 「Extensible Markup Language 」
11. 要するに 要するに
12. ページをローディングせずにデータを読み込める ページをローディングせずにデータを読み込める
13. ※SPA について ※SPA について
14. 今だとページの再読み込みが発生 今だとページの再読み込みが発生 する場面が出てくる する場面が出てくる
16. この再読み込みの発生する部分す この再読み込みの発生する部分す らなくしたい 🥺 らなくしたい 🥺 ↓ そこで登場するのが SPA そこで登場するのが SPA
17. 従来のアプリケーション 従来のアプリケーション ページが切り替わるたびに読み込み発生 サーバー側で事前に HTML を作って返す
18. SPA アプリケーション SPA アプリケーション
19. 初回リクエストのみレスポンス（空の HTML+JS ）を返す 2 回目以降は差分情報を取得して、クライアント 側で DOM を生成し画面に反映
20. 両者の違い 両者の違い 1. HTML をどこで生成するか？ MPA ：サーバー SPA ：クライアント 2. 画面遷移の速度
21. SPA のメリット SPA のメリット 1. 画面遷移の高速化＝ UX の向上！ 2. ポータビリティ（静的ファイルを返すサーバーで あればどこでもホスティング可能）
22. SPA のデメリット SPA のデメリット 1. 初期ロードの遅さ 2. OGP や SEO 3. クライアント側のマシンスペックに依存
23. 章 目次 1 SPA とは？SPA のメリット・デメリット 2 React や Vue は何が便利なのか？ 3 まとめ
24. 実は素の JavaScript だけでも 実は素の JavaScript だけでも SPA は実装可能 SPA は実装可能
25. 🤔 🤔 じゃあなんで React や Vue の じゃあなんで React や Vue の ような FW を使うの？ ような FW を使うの？
26. ということで、FW ありとなしで作った TODO アプリ を比較しながら React や Vue を使う意味について考 えてこう 👍
27. FW なし（Rails+Ajax ） FW なし（Rails+Ajax ）
28. 大まかな実装方針としては 1. 初期レスポンスとして返す index ファイルを用意 2. イベントハンドラを仕込み、Model と DOM を同 期的に更新
29. ※見通しよくするため JS も MVC を利用してます ソースコード 1 （JavaScript ） ソースコード 2 （Rails の Model ） ソースコード 3 （Rails の Controller ） ソースコード 4 （Rails の View ）
30. ※JS ファイルの MVC の責務につい ※JS ファイルの MVC の責務につい て て
31. Rails+Ajax の辛い点 Rails+Ajax の辛い点 オブジェクトへの代入で UI や挙動を作るため処 理が追い辛い 簡単に破壊的変更もできる イベントハンドラの登録が手動 View と Model の同期は手動 Controller は View に依存している
32. 特に辛いのは次の 2 つ 特に辛いのは次の 2 つ 1. オブジェクトを破壊しながら DOM 操作するしか ない 2. データと UI の同期が手動！！
33. 1 オブジェクトを破壊しながら 1 オブジェクトを破壊しながら DOM 操作するしかない DOM 操作するしかない /** * TODO の配列から UI を生成する関数 * @param {Todo[]} todos */ render(todos) { const todosEl = document.getElementById("todos"); todosEl.innerHTML = ""; const fragment = document.createDocumentFragment(); todos.forEach((todo) => { const todoEl = this._createTodoElement(todo); fragment.appendChild(todoEl); }); todosEl.appendChild(fragment); }
34. /** * タスク送信時に TODO 追加と UI 反映をする */ handleSubmitForm() { window.addEventListener("load", () => { const formEl = document.getElementById("task-send-form"); formEl.addEventListener("ajax:success", (ev) => { this.flash(ev.detail[0]); }); }); }
35. 2 データと UI の同期が手動！！ 2 データと UI の同期が手動！！ /** * 指定した TODO 削除と UI 反映をする * @param {*} id TODO の id */ handleClickDeleteTask(id) { const buttonEl = document.getElementById(`button-${id}`); buttonEl.addEventListener("click", () => { fetch(`http://localhost:3000/tasks/${id}`, { method: "DELETE", headers: { "X-CSRF-Token": Rails.csrfToken(), "content-type": "application/json", }, }) .then((res) => { return res.json(); }) .then((json) => { this.flash(json); }); }); }
36. FW あり（React で実装） FW あり（React で実装） ソースコード
37. 課題 解決法 オブジェクトを破壊し ながら DOM 操作する しかない JSX を利用し、スタイ ルとイベントハンドラ を渡す データと UI の同期が手 動！！ state を更新すると React が自動で UI の 更新を行う
38. 1 JSX を利用し、スタイルとイベン 1 JSX を利用し、スタイルとイベン トハンドラを渡す トハンドラを渡す return ( <div className="App"> <h1>TODO リスト </h1> <form onSubmit={handleSubmit}> <input name="task" /> <button> 登録 </button> </form> <div> {todos.map((todo) => ( <div key={todo.id} className={todo.checked ? "checked" : "" <input type="checkbox" onChange={() => handleChangeCheckBox(todo.id)} /> {todo.task} <button onClick={() => handleClickDeleteButton(todo.id)}> 削 </div> ))} </div>
39. </div> );
40. 2 state を更新すると React が自動 2 state を更新すると React が自動 で UI の更新を行う で UI の更新を行う めちゃくちゃ重要：UI = f(state) const handleSubmit = (e) => { e.preventDefault(); const inputText = e.target["task"].value; const nextid = idCounter + 1; setIdCounter(nextid); setTodos([...todos, { id: nextid, task: inputText, checked: false };
42. 章 目次 1 SPA とは？SPA のメリット・デメリット 2 React や Vue は何が便利なのか？ 3 まとめ
43. SPA = 単一の Web ページのみから構成される Web アプリケーション。ページの書き換えは全 てクライアント側で行う SPA のメリット＝画面遷移が超高速化 React や Vue のような FW を用いることで オブジェクトの破壊的変更を防げたり、イベ ントハンドラの登録が楽になったりする 手動でデータと UI を同期させる必要がなく なる