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

@yusuke_blog1026 @yusuke_blog1026 ゆー 26 歳 W 杯のせいで寝不足。

世は大 SPA 時代！ 世は大 SPA 時代！ React ！Vue ！ React ！Vue ！

🤔 🤔

そもそも SPA って何？？従来のアプリケーショ ンと何が違うの？ React や Vue をなぜ使うの？

今回話す内容 今回話す内容 章 目次 1 SPA とは？SPA のメリット・デメリット 2 React や Vue は何が便利なのか？ 3 まとめ

章 目次 1 SPA とは？SPA のメリット・デメリット 2 React や Vue は何が便利なのか？ 3 まとめ

シングルページアプリケーション （英: single-page application 、SPA ）と は、単一の Web ページのみから構成 することで、デスクトップアプリケ ーションのようなユーザ体験を提供 する Web アプリケーションまたは Web サイトである。必要なコード （HTML 、JavaScript 、CSS ）は最初に まとめて読み込むか、ユーザの操作 などに応じて動的にサーバと通信 し、必要なものだけ読み込みを行 う。 引用元：Wikipedia

No content

※Ajax について ※Ajax について Ajax = 「Asynchronous JavaScript + XML 」 Asynchronous = 「非同期」 XML = 「Extensible Markup Language 」

要するに 要するに

ページをローディングせずにデータを読み込める ページをローディングせずにデータを読み込める

※SPA について ※SPA について

今だとページの再読み込みが発生 今だとページの再読み込みが発生 する場面が出てくる する場面が出てくる

No content

この再読み込みの発生する部分す この再読み込みの発生する部分す らなくしたい 🥺 らなくしたい 🥺 ↓ そこで登場するのが SPA そこで登場するのが SPA

従来のアプリケーション 従来のアプリケーション ページが切り替わるたびに読み込み発生 サーバー側で事前に HTML を作って返す

SPA アプリケーション SPA アプリケーション

初回リクエストのみレスポンス（空の HTML+JS ）を返す 2 回目以降は差分情報を取得して、クライアント 側で DOM を生成し画面に反映

両者の違い 両者の違い 1. HTML をどこで生成するか？ MPA ：サーバー SPA ：クライアント 2. 画面遷移の速度

SPA のメリット SPA のメリット 1. 画面遷移の高速化＝ UX の向上！ 2. ポータビリティ（静的ファイルを返すサーバーで あればどこでもホスティング可能）

SPA のデメリット SPA のデメリット 1. 初期ロードの遅さ 2. OGP や SEO 3. クライアント側のマシンスペックに依存

章 目次 1 SPA とは？SPA のメリット・デメリット 2 React や Vue は何が便利なのか？ 3 まとめ

実は素の JavaScript だけでも 実は素の JavaScript だけでも SPA は実装可能 SPA は実装可能

🤔 🤔 じゃあなんで React や Vue の じゃあなんで React や Vue の ような FW を使うの？ ような FW を使うの？

ということで、FW ありとなしで作った TODO アプリ を比較しながら React や Vue を使う意味について考 えてこう 👍

FW なし（Rails+Ajax ） FW なし（Rails+Ajax ）

大まかな実装方針としては 1. 初期レスポンスとして返す index ファイルを用意 2. イベントハンドラを仕込み、Model と DOM を同 期的に更新

※見通しよくするため JS も MVC を利用してます ソースコード 1 （JavaScript ） ソースコード 2 （Rails の Model ） ソースコード 3 （Rails の Controller ） ソースコード 4 （Rails の View ）

※JS ファイルの MVC の責務につい ※JS ファイルの MVC の責務につい て て

Rails+Ajax の辛い点 Rails+Ajax の辛い点 オブジェクトへの代入で UI や挙動を作るため処 理が追い辛い 簡単に破壊的変更もできる イベントハンドラの登録が手動 View と Model の同期は手動 Controller は View に依存している

特に辛いのは次の 2 つ 特に辛いのは次の 2 つ 1. オブジェクトを破壊しながら DOM 操作するしか ない 2. データと UI の同期が手動！！

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); }

/** * タスク送信時に TODO 追加と UI 反映をする */ handleSubmitForm() { window.addEventListener("load", () => { const formEl = document.getElementById("task-send-form"); formEl.addEventListener("ajax:success", (ev) => { this.flash(ev.detail[0]); }); }); }

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); }); }); }

FW あり（React で実装） FW あり（React で実装） ソースコード

課題 解決法 オブジェクトを破壊し ながら DOM 操作する しかない JSX を利用し、スタイ ルとイベントハンドラ を渡す データと UI の同期が手 動！！ state を更新すると React が自動で UI の 更新を行う

1 JSX を利用し、スタイルとイベン 1 JSX を利用し、スタイルとイベン トハンドラを渡す トハンドラを渡す return (

);

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 };

No content

章 目次 1 SPA とは？SPA のメリット・デメリット 2 React や Vue は何が便利なのか？ 3 まとめ

SPA = 単一の Web ページのみから構成される Web アプリケーション。ページの書き換えは全 てクライアント側で行う SPA のメリット＝画面遷移が超高速化 React や Vue のような FW を用いることで オブジェクトの破壊的変更を防げたり、イベ ントハンドラの登録が楽になったりする 手動でデータと UI を同期させる必要がなく なる

No content