Reactを導入するタイミング
モーダルを使い回したくなった時
VanillaJSでは以下のような使い方でモーダルを動的にしていました。
data-*を持たせることによってJSに状態・条件を渡す仕組みを作っていたのです。
index.html
<div id="modal">
<h2 id="modal-title"></h2>
<div id="modal-content"></div>
</div>
buton.html
<button
class="open-modal"
data-type="user"
data-id="10"
>
ユーザー編集
</button>
<button
class="open-modal"
data-type="task"
data-id="25"
>
タスク編集
</button>
index.js
const type = button.dataset.type;
const id = button.dataset.id;
switch (type) {
case "user":
// ユーザー用にレンダリング
break;
case "task":
// タスク用にレンダリング
break;
}
しかし後々リファクタリングするとき読みにくくなり、保守性が下がります。
一方、Reactを用いると全て1枚のページで片付きます。
index.tsx
import { useState } from "react";
type ModalMode = "create" | "edit";
export default function UserPage() {
const [modalMode, setModalMode] = useState<ModalMode | null>(null);
const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
const openCreateModal = () => {
setSelectedUserId(null);
setModalMode("create");
};
const openEditModal = (userId: number) => {
setSelectedUserId(userId);
setModalMode("edit");
};
const closeModal = () => {
setModalMode(null);
setSelectedUserId(null);
};
return (
<>
<button onClick={openCreateModal}>
新規作成
</button>
<button onClick={() => openEditModal(10)}>
編集
</button>
{modalMode && (
<UserModal
mode={modalMode}
userId={selectedUserId}
onClose={closeModal}
/>
)}
</>
);
}
TailwindCSSと併用しているとタグが長くなりすぎて少し窮屈にはなりますが、
getElementByIdやquerySelectorを一切使わないことはスリムでしょう。
画面を即時反映させたいとき
タスク管理アプリなどであるカンバン式のUIをイメージしてみましょう。
ステータスを「処理中」から「完了」にする
これだけならVanillaJSでできますが、ステータスに応じてカンバンから位置を変更するという状態変化を行うをは少し大変です。
もちろん再びページをリロードするならLaravel側でプログラムを組めばいいですが、ユーザビリティ向上のためにReactを導入するのもありでしょう。
HTMLがネストしすぎたとき
こんなHTMLは嫌でしょう（かなり露骨ですが）
<body>
<section>
<div>
<div>
<div>
<div>
.......
</div>
</div>
</div>
</div>
</section>
</body>
bladeもしくはjsxを使用するとコンポーネントとして内容を分割できます。
<body>
<Header />
<sidebar />
<div>
<div>
<div>
.......
</div>
</div>
</div>
</body>