今日から、Reactのシリーズ物、Reactの哲学を連載します。全5回です。

今回は宣言的UIの話をしていきたいです。この宣言的UIは、Reactの核をなす哲学の1つです。宣言的UIとは、アプリのステータスに応じて、どの表示（UI）になるべきかを宣言するように実装していく手法です。Reactでは、開発者は最終的な目標を宣言し、その達成方法の詳細を気にする必要がありません。DOMの状態を直接操作するのではなく、状態の変化をReactが把握し、自動的にUIを更新します。対義語として、命令的UIがあり、これは状態の変化を手動で管理します。

まず、Vanilla JSの命令的なUIから見ていきましょう。

対例：Vanilla JSの命令的なUI

1let count = 0;
2const h1 = document.querySelector("h1");
3const button = document.querySelector("button");
4
5button.addEventListener("click", () => {
6  count++;// 状態 (count) を増やす
7  h1.textContent = `カウント: ${count}`; // 何を変更するか：カウント表示を更新
8
9});

細かく見ていきましょう。

ポイント

1. 状態を変更する処理：

1count++;// 状態 (count) を増やす

ボタンが押されたときに、countという変数に1を加算して、状態を更新しています。

2.UI（DOM）を更新する処理

1countElement.textContent = `カウント: ${count}`;

countElementのテキスト内容を手動で更新しています。カウントを更新する処理が、ここで明示的に記述されています。

命令的UIの流れ

①イベント（クリック）が発動する。

② count++;で 状態 (count) を増やす。

③カウント表示を更新することを明示して、更新する。

この流れのように、UIをどのように変更するのかを1ステップずつ命令的に書く必要があるため、コードが冗長になりやすいのが命令的UIの特徴です。

例：Reactの宣言的なUI

1const App = () => {
2  const [count, setCount] = React.useState(0);
3
4  return (
5    <div>
6      <h1>カウント: {count}</h1>
7      <button onClick={() => setCount(count + 1)}>増やす</button>
8    </div>
9  );
10};

Reactでは、状態が変わればReactがUIを自動的に更新してくれます。

1<button onClick={() => setCount(count + 1)}>増やす</button>
2<h1>カウント: {count}</h1>

setCount(count + 1)で状態を更新するだけ。

UIの更新はReactが自動的に処理してくれるため、手動でDOMを操作する必要がありません。

Reactは、宣言的UIによって、簡潔で分かりやすいコードが書けるのです。

それでは以上。