💡 宣言的UIとは何か？

🤔 問題提起：なぜUIの書き方が2種類あるのか？

JavaScriptでDOMを操作したことがある人なら、こういうコードを書いたことがあるはずです。

// 「命令的」なアプローチ
const btn = document.getElementById('like-btn');
const count = document.getElementById('count');
let likes = 0;

btn.addEventListener('click', () => {
  likes++;
  count.textContent = likes;         // DOMを直接更新
  if (likes > 0) {
    btn.classList.add('liked');       // クラスを直接操作
    btn.textContent = '♥ いいね済み';
  }
  if (likes >= 10) {
    btn.disabled = true;              // 属性を直接操作
    count.style.color = 'gold';       // スタイルを直接操作
  }
});

一方、Reactでは同じUIをこう書きます。

// 「宣言的」なアプローチ
function LikeButton() {
  const [likes, setLikes] = useState(0);

  return (
    <div>
      <button
        onClick={() => setLikes(l => l + 1)}
        disabled={likes >= 10}
        className={likes > 0 ? 'liked' : ''}
      >
        {likes > 0 ? '♥ いいね済み' : 'いいね'}
      </button>
      <span style={{ color: likes >= 10 ? 'gold' : 'inherit' }}>
        {likes}
      </span>
    </div>
  );
}

この2つの違いは単なる「書き方のスタイル」ではありません。 根本的な思想の違いがあります。それが「命令的 vs 宣言的」という概念です。

🎯 結論から言う

🗺️ 構造図：命令的 vs 宣言的

📚 概念説明：命令的UIの何が問題だったのか

jQuery時代のWebアプリを想像してください。ページには複数のUIパーツがあり、 それぞれが互いに影響し合います。

// jQuery時代の典型的なコード
// ユーザーがログインしたとき、
// 複数の場所を「手動で」更新しなければならない

function onUserLogin(user) {
  // ヘッダーのログインボタンを非表示
  $('#login-btn').hide();
  // ログアウトボタンを表示
  $('#logout-btn').show();
  // ユーザー名を表示
  $('#username').text(user.name);
  // アバター画像を更新
  $('#avatar').attr('src', user.avatarUrl);
  // ウェルカムメッセージを表示
  $('#welcome-msg').show().find('.name').text(user.name);
  // ナビゲーションのリンクを変更
  $('#nav-profile').attr('href', '/users/' + user.id);
  // カートアイコンを表示
  if (user.cartItems > 0) {
    $('#cart-icon').show();
    $('#cart-count').text(user.cartItems);
  }
  // プレミアム会員なら特別表示
  if (user.isPremium) {
    $('body').addClass('premium-user');
  }
}

命令的UIが抱える3つの問題

💻 コード例：state → UI マッピング

Reactの宣言的UIの核心は「stateが決まれば、UIが一意に決まる」という関係です。 数学的な関数に似ています：UI = f(state)

例：フォームの状態管理

// 命令的アプローチ（問題がある）
function setupForm() {
  const form = document.getElementById('login-form');
  const submitBtn = form.querySelector('button[type=submit]');
  const emailInput = form.querySelector('#email');
  const errorMsg = form.querySelector('.error');

  // 送信中の状態にする関数
  function setLoading() {
    submitBtn.disabled = true;
    submitBtn.textContent = '送信中...';
    errorMsg.style.display = 'none';
  }

  // エラー状態にする関数
  function setError(message) {
    submitBtn.disabled = false;
    submitBtn.textContent = 'ログイン';
    errorMsg.textContent = message;
    errorMsg.style.display = 'block';
    emailInput.classList.add('error');
  }

  // 成功状態にする関数
  function setSuccess() {
    submitBtn.disabled = false;
    form.style.display = 'none';
    // ...redirect logic
  }
  // すべての状態遷移を手動管理している...
}

// 宣言的アプローチ（React）
type FormStatus = 'idle' | 'loading' | 'error' | 'success';

function LoginForm() {
  const [status, setStatus] = useState<FormStatus>('idle');
  const [errorMessage, setErrorMessage] = useState('');

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setStatus('loading');

    try {
      await login(/* ... */);
      setStatus('success');
    } catch (err) {
      setErrorMessage(err.message);
      setStatus('error');
    }
  }

  // ↓ stateからUIを「宣言」するだけ
  if (status === 'success') return <div>ログイン成功！</div>;

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" className={status === 'error' ? 'border-red-500' : ''} />
      {status === 'error' && (
        <p className="text-red-500">{errorMessage}</p>
      )}
      <button type="submit" disabled={status === 'loading'}>
        {status === 'loading' ? '送信中...' : 'ログイン'}
      </button>
    </form>
  );
}

🔧 仕組み分解：Reactのコンポーネントモデル

Reactが宣言的UIを実現できる理由は、レンダリングを「純粋関数」として扱う設計にあります。

純粋関数としてのコンポーネント

// コンポーネントは純粋関数に近い
// 同じprops/stateを渡せば、常に同じJSXを返す

function Counter({ initialCount }: { initialCount: number }) {
  const [count, setCount] = useState(initialCount);

  // stateが決まれば、UIが一意に決まる
  // 同じstateなら何度呼び出しても同じ結果
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
    </div>
  );
}

// 純粋関数との比較
// 純粋関数: f(x) = x * 2  → 常に同じ入力 = 同じ出力
// Reactコンポーネント: UI = f(props, state) → 常に同じ入力 = 同じUI

なぜ「再レンダリング」という概念が生まれるのか

宣言的UIの設計上、Reactは「stateが変わったら、UIを最初から計算し直す」アプローチを取ります。 これを再レンダリングと呼びます。

// 概念的なイメージ（実際の実装は最適化されている）
function render(component, state) {
  // stateから新しいUIツリーを計算
  const newUI = component(state);
  
  // 現在のUIと比較（diff）
  const changes = diff(currentUI, newUI);
  
  // 差分だけDOMに反映
  applyChanges(changes);
  
  // 新しいUIが「現在のUI」になる
  currentUI = newUI;
}

// stateが変わるたびにrender()が呼ばれる
// → 開発者はDOMを意識せず、stateだけ管理すればいい

宣言的設計の制約

宣言的UIには利点だけでなく、理解すべき制約もあります。

🧩 宣言的UIの本当の価値

宣言的UIの最大の価値は「パフォーマンス」ではありません（むしろ純粋なDOM操作より遅い面もある）。 本当の価値は複雑さの管理にあります。

// 5つの状態があるフォーム
const [isLoading, setIsLoading] = useState(false);   // 2通り
const [hasError, setHasError] = useState(false);     // 2通り
const [isSuccess, setIsSuccess] = useState(false);   // 2通り
const [isDisabled, setIsDisabled] = useState(false); // 2通り
const [isDirty, setIsDirty] = useState(false);       // 2通り

// 命令的: 全ての状態遷移（最大2^5=32通り）のDOM操作を記述？
// 宣言的: stateを宣言すればUIは自動計算。
//         組み合わせを意識しなくていい。