Zenn
💡

Reactの「宣言的UI」を理解する

に公開
React
tech

宣言的UIと命令的UI

まず「宣言的UI」とは何かを説明する前に、「宣言的UI」と「命令的UI」の2つの考え方があることをお伝えし、その違いを理解していただくことで、宣言的UIの意味をより深く掴めるようにしたいと思います。

結論から言うと、宣言的UIとは「UIの更新の責任をフレームワークが持つ」ことを指します。
逆に、命令的UIとは「UIの更新の責任を開発者自身が持つ」ものです。

本質的な違いがここにありますが、それが表面的にはどう現れるかを見てみましょう。

宣言的UI

宣言的UIとは“こうなってほしいUI”を先に書いて、あとはフレームワークが勝手にやってくれる考え方です。
UI更新の責任がフレームワークにある場合（宣言的UI）は、開発者は状態に応じたUIの“あるべき姿”をHTML（JSXなど）で宣言するだけで済みます。DOMの操作を記述する必要はなく、状態が変わればフレームワークが自動でUIを更新してくれます。
以下は宣言的UI(React)の実際のコード例です。

import React, { useState } from "react";

function WelcomeMessage() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
　　　 // 状態に応じたUIを宣言
      {isLoggedIn ? <p>ようこそ！</p> : <p>ログインしてください。</p>}
    </div>
  );
}

上記では、HTMLの部分に、状態に応じたUIが宣言されています。
また、DOMの操作を記述しておらず、状態が変わればフレームワークが自動でUIを更新してくれます。
これが冒頭で説明したとおり、宣言的UIとは「UIの更新の責任をフレームワークが持つ」こと
ということです。

命令的UI

一方で命令的UIの場合は、状態が変わるたびにどのDOMをどう変更するかを自分で記述する必要があります。
HTML（テンプレート）だけではUIの変化は読み取れず、ロジックとDOM操作が密接に結びついています。
以下はvanillaJSの具体的なコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>命令的UIの例</title>
</head>
<body>
  <p id="message"></p>

  <script>
    let isLoggedIn = false;
    const message = document.getElementById("message");

    function updateUI() {
      if (isLoggedIn) {
        message.textContent = "ようこそ！";
      } else {
        message.textContent = "ログインしてください。";
      }
    }

    // 状態を切り替える
    isLoggedIn = true;
    updateUI();
  </script>
</body>
</html>

上記では、状態に応じてDOMの操作をしており、これが、「UIの更新の責任を開発者自身が持つ」
ということです。

命令的UIに関して補足

vanillaJSでも、if文などを使えば表示するテキストを変えることができるので、部分的には宣言的UIを実現できているように思えてしまいます。
しかし、たとえ表示内容の条件分岐がコード上で明確になっていても、DOMを直接操作していれば命令的UIです。UIの“理想形”を宣言しているだけではなく、その理想形をどう反映するかまで開発者が記述する必要があるのが命令的UIです。

const isLoggedIn = true;

// 一見、三項演算子で状態を元にメッセージを決めているので宣言的に見えますが、
// 「DOMにどう反映するか」まで開発者が記述しているため、これは命令的UIです。
const message = isLoggedIn ? 'ようこそ！' : 'ログインしてください';

const p = document.createElement('p');
p.textContent = message;
document.body.appendChild(p);

（上記の例も結局は命令的UIです。）

まとめ

観点 宣言的UI 命令的UI
UI更新の責任 フレームワーク 開発者
DOMの操作 不要（自動で反映） 手動で操作が必要
コードの読みやすさ 状態に応じて分かりやすいUI記述 状態とDOM操作が分離しにくい
例 React, Vue など Vanilla JS, jQuery など

理解度テスト

Q1.次の説明のうち、宣言的UIの特徴として正しいものはどれですか？

A. DOMの状態変更はすべて手動で書く必要がある
B. 状態に応じたUIの「理想の形」を書いておけば、フレームワークが自動で更新してくれる
C. 変数を使ってUIを動的に書いていれば、それはすべて宣言的UIである
D. DOMを直接操作する方が、宣言的でわかりやすい

Q2.以下のコードは宣言的UIですか？命令的UIですか？

const message = document.getElementById("message");
if (isLoggedIn) {
  message.textContent = "ようこそ！";
} else {
  message.textContent = "ログインしてください。";
}

Q3.Reactを使っていても、命令的な書き方になることはありますか？

A. ない。Reactは常に宣言的UIになる
B. ある。Reactの中でも DOM を直接操作したり状態に依存しない記述をすると命令的になる
C. ない。状態の管理方法に関係なく宣言的UIと呼ばれる

Q4.以下のようなコードで UI が切り替わるのはなぜですか？

{isLoggedIn ? <p>ようこそ！</p> : <p>ログインしてください。</p>}

A. JavaScriptが自動的にDOMを書き換えるから
B. if文の代わりに三項演算子を使っているから
C. Reactが状態に応じてUIを更新してくれるから
D. HTMLに直接条件を書いているから

Q5.命令的UIの本質とは何ですか？

A. UIをCSSでスタイリングすること
B. フレームワークにDOM更新を任せること
C. UIの更新を開発者が直接記述・制御すること
D. ユーザーの命令に従って表示が切り替わること
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓

答え

Q1.次の説明のうち、宣言的UIの特徴として正しいものはどれですか？

答え:B
解説：状態に応じたUIの「理想的な状態」をコードで宣言すれば、ReactのようなフレームワークがDOMの更新を自動で行ってくれます。

Q2.以下のコードは宣言的UIですか？命令的UIですか？

答え:命令的UI
解説：textContent を使って開発者が自らDOMを操作しているため、命令的UIです。

Q3.Reactを使っていても、命令的な書き方になることはありますか？

答え:B
解説：Reactでも、document.getElementById などで直接DOMを操作すれば命令的になります。Reactは宣言的に書ける手段を提供するだけで、強制するわけではありません。

Q4.以下のようなコードで UI が切り替わるのはなぜですか？

答え:C
解説：Reactが isLoggedIn の状態を監視し、必要に応じてDOMを更新してくれるので、開発者はDOM操作を気にする必要がありません。

Q5.命令的UIの本質とは何ですか？

答え:C
解説：命令的UIとは、UIの更新ロジックを開発者が直接記述する必要があるスタイルです。DOM更新の手順を書く＝UIの責任を持つ、ということです。

Discussion