先生と生徒の会話形式で理解しよう

生徒

「Reactの特徴に“宣言的UI”って書いてあるのを見たんですけど、どういう意味なんですか？」

先生

「それはReactの大きなポイントの1つです。従来の“命令型”と比べると考え方が全然違うんですよ。」

生徒

「命令型と宣言型って何が違うんですか？わかりやすく教えてください！」

先生

「もちろん！初心者でも理解できるように、Reactの“宣言的UI”について詳しく説明していきましょう。」

1. 宣言的UIと命令型UIの違いとは？

React（リアクト）は宣言的（せんげんてき）UIという考え方を採用しています。これは、「現在の状態がこうだから、画面はこのように表示する」と“結果”だけを書けばよいスタイルです。たとえるなら、「完成図を提示するだけで、作り方はReactが自動でやってくれる」という感覚に近いものです。

それに対して、従来の命令型（めいれいがた）UIは、「まず要素を作る → 配置する → テキストを変更する → スタイルを当てる」と、プログラマーが手順を細かく書き並べる必要があります。料理で言えば、工程をすべて自分で指示しながら作るレシピのようなものです。


// とても簡単な比較例

// 【命令型】手順を細かく書くイメージ（概念例）
// 1. 要素を取得して
// 2. テキストを書き換えて
// 3. 必要ならクラス名を変更して…
// とにかく手順が多い

// 【宣言的UI】Reactでは結果だけ書く
function Message(props) {
  return <p>{props.isOK ? "大丈夫です！" : "まだ準備中です。"}</p>;
}

このように、宣言的UIでは「状態によって表示が切り替わる」というルールだけを書いておけば、実際のDOM更新処理はすべてReactが自動で最適にやってくれます。プログラマーは“どう表示したいか”だけに集中できるため、初心者でも理解しやすく、コードが驚くほどスッキリします。

2. 命令型のUIはどう書く？

命令型の書き方は、まさに料理レシピを一行ずつ書いていくイメージです。「材料を用意して」「切って」「焼いて」「盛り付けて」と順番を細かく指定するように、画面づくりでも「この要素を取得して」「この文字を差し替えて」「この色に変えて」と、手を動かす手順をすべてプログラマーが指示していきます。

Webの場合の命令型UIでは、ユーザーがボタンを押したときに、自分でHTML要素（DOM）を探して、テキストを書き換えたり、クラス名を付け替えたりします。「何が起きたら、どの要素をどう変更するか」を一つひとつ命令として書く必要があるため、画面の状態が増えるほど処理の流れが複雑になりやすいのが特徴です。


// 命令型で「ボタンを押したら文字を変える」イメージ（素のJavaScript）
// HTML側に <p id="message">まだ少ないです。</p>
//          <button id="btn">増やす</button> があるとします。

let count = 0;

const messageEl = document.getElementById("message");
const buttonEl  = document.getElementById("btn");

buttonEl.addEventListener("click", () => {
  count = count + 1;              // 1. 数を更新する
  if (count >= 5) {               // 2. 条件をチェックする
    messageEl.textContent = "多いです！";   // 3. 表示する文字を手動で差し替える
  } else {
    messageEl.textContent = "まだ少ないです。";
  }
});

このように命令型では、「クリックされたらイベントを登録して」「変数を更新して」「該当するHTML要素を探して」「テキストを書き換える」と、画面更新の手順をすべて自分で組み立てます。処理の流れを細かくコントロールできる反面、状態が増えるとコードが長くなりやすく、初心者にとっては頭の中で追いかけるのが少し大変です。次の宣言的UIの考え方を見ると、この違いがよりはっきり感じられるようになります。

3. 宣言的UIはどう違う？

宣言的なUIでは、「どんな状態のときに、どんな見た目にしたいか」だけを素直に書きます。「ボタンが押されたらこの処理をして、そのあとこの要素の文字を変えて…」といった細かい手順はほとんど意識しません。先ほどの命令型の例と違って、 最終的な画面の姿を“宣言する”だけという考え方です。

イメージとしては、「完成した盛り付けの写真（ゴール）を用意すると、そこにたどり着く手順はReactが自動で考えてくれる」といった感覚です。プログラミング未経験の方でも、「この状態ならこの文章を出したい」「この数字ならこの色で表示したい」といったルールを書くだけなので、手順を追いかけるよりもずっとシンプルに考えられます。


// 宣言的UIのイメージ例（状態によって表示を切り替えるだけ）
function Message(props) {
  // 「count が 5以上なら '多いです！'、それ以外なら 'まだ少ないです。'」という
  // 見た目のルールだけを書いている
  return (
    <p>{props.count >= 5 ? "多いです！" : "まだ少ないです。"}</p>
  );
}

このコードでは、「クリックされたら要素を探してテキストを書き換える」といった手順は一切書いていません。あくまで、「countという値が5以上かどうかで表示するメッセージを変える」というルールだけが書かれています。実際にcountの値が変わったとき、どのタイミングで画面を更新するか、どの部分だけを書き換えるか、といった処理はすべてReactが裏側で行ってくれます。

このように宣言的UIでは、状態から画面を「計算する」イメージでコードを書きます。「今の状態（count）がこうだから、表示はこのパターンになる」と考えればよいので、命令型のように細かなDOM操作を覚える必要がありません。その結果、画面の状態が増えてもコードの見通しがよく、Reactの挙動も理解しやすくなります。

4. Reactの宣言的UIのサンプルコード

では、Reactで「数値によって表示を変える」サンプルを見てみましょう。宣言的に書くと、こうなります。


import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>カウント: {count}</h1>
      <p>{count >= 5 ? "多いです！" : "まだ少ないです。"}</p>
      <button onClick={() => setCount(count + 1)}>1増やす</button>
    </div>
  );
}

export default App;

（カウントが5未満なら「まだ少ないです。」と表示され、5以上になると「多いです！」に変わります）

5. 宣言的UIのメリットとは？

Reactの宣言的UIには、多くのメリットがあります。

① コードがシンプルになる
何をしたいかが直感的に読めるため、コードがわかりやすくなります。
② バグが少なくなる
状態に応じた見た目だけを書けばいいので、手順ミスや見落としが減ります。
③ 状態とUIがズレにくい
「状態＝表示」になるため、状態管理がしやすくなります。

Reactが自動で変更点を見つけてUIを更新してくれるので、開発効率もアップします。

6. 命令型だとどうなるか想像してみよう

もし命令型で同じ処理を書くと、「カウントを更新して」「表示されている文字を探して」「HTMLを手動で書き換えて」と、複雑でミスもしやすいです。

Reactの宣言的UIでは「状態に応じた見た目を決めるだけ」で済むので、初心者でも安心して開発できるのです。

7. 宣言的UIは初心者にもおすすめ

Reactのような宣言的なUI設計は、初心者にとっても学びやすく、複雑なアプリでも迷わずに画面を作れるようになります。

特に、「状態と見た目が一致する」という考え方に慣れると、バグの少ない安全なコードが書けるようになります。

はじめは少し不思議に感じるかもしれませんが、Reactのサンプルをいくつか触っていくうちに、宣言的UIの便利さがわかってきます。

まとめ

Reactの宣言的UIを振り返る

Reactが採用している宣言的UIという考え方は、現代のフロントエンド開発においてとても重要な位置を占めています。これまで多くの開発者が経験してきた命令型のUIでは、画面の変更を細かく指示していく必要があり、状態が複雑になるほどコードも長くなり、更新漏れや手順の混乱が起こりやすいものでした。特に、複数の箇所が連動して変化する画面を扱うと、DOM操作を手作業で行い続けることに限界を感じる場面も少なくありませんでした。しかし、Reactの宣言的UIでは、状態と見た目の関係だけを記述しておけば、実際の画面更新はReactが自動で行ってくれます。このシンプルな構造は、開発者にとって理解しやすく、コードを安全に保つうえでもとても効果的です。

また、宣言的UIはコンポーネント指向の設計とも相性がよく、再利用できる部品を組み立てるようにアプリを構築できます。命令型では一つひとつの手順を正確に管理する必要がありましたが、宣言的UIでは状態に応じて自然に形が変わるため、複雑な画面でも迷いにくく、初心者でも構造を掴みやすい特徴があります。特にReactでは、状態の更新が発生するたびに仮想DOMが新しい構造を作り、その差分だけが実際の画面に反映されるため、宣言的UIの書き方がパフォーマンスの向上にも繋がっています。

状態とUIの関係が明確に保たれるため、アプリ全体の見通しも良くなり、どの状態でどんな見た目になるのかが一目で分かるようになります。これはチーム開発でも大きな利点で、他のメンバーがコードを読んでも理解しやすく、機能追加や修正が容易になります。宣言的UIの考え方は、ReactだけではなくVueやSvelteなどの他のモダンフレームワークにも影響を与えています。画面の挙動を状態と結びつけて捉える設計は、これからのWebアプリ開発の中心となり続けるでしょう。

サンプルコードで宣言的UIを再確認

宣言的UIの理解を深めるために、状態に応じて表示内容を切り替える小さなコンポーネントをもう一つ確認してみましょう。Reactでは状態が変われば自動的に見た目が変わるので、複雑な手順を記述する必要はありません。


import React, { useState } from "react";

function MessageBox() {
  const [text, setText] = useState("");

  return (
    <div className="p-3">
      <h2>入力に応じたメッセージ表示</h2>
      <input
        className="form-control mb-2"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <p>
        {text === "" ? "入力待ちです。" : `入力された文字: ${text}`}
      </p>
    </div>
  );
}

export default MessageBox;

このように、宣言的UIでは状態と表示を直接結びつけるだけで、入力変化に応じた画面の切り替えが自然に実現します。余計な手順を管理する必要がないため、初心者でも混乱しにくく、アプリの状態を頭の中で把握しやすい構造になっています。Reactの使いやすさは、こうした宣言的な書き方をベースにしていることが大きな理由です。

宣言的UIの理解がReact学習を加速させる

Reactを学ぶうえで宣言的UIの考え方を理解することは大きな前進になります。状態と見た目がどのように結びつくかを理解すると、コンポーネントの書き方やデータの扱い方にも余裕が生まれます。また、イベント処理や条件分岐なども自然に組み合わせられるようになり、部品としてのコンポーネントをどのように設計すればよいかも見えてきます。宣言的UIは表面的な記法ではなく、アプリ全体を組み立てるときの大きな軸になる考え方なので、今回の学びがこれからのReact開発の大きな支えになるはずです。

特に、状態に応じて動的に変化するUIを扱うときは、宣言的UIのメリットが際立ちます。複雑な画面であっても、状態に応じた見た目を書くだけで整ったコードになるため、読みやすさも保ちやすくなります。Reactのコンポーネントを組み合わせていくことで、より大きなアプリでも宣言的UIの恩恵を受けながら開発できるようになります。

先生と生徒の振り返り会話

生徒

「今日の内容で、宣言的UIがどういうものなのかだいぶ理解できました！状態が変わると見た目が自動で切り替わるのが便利ですね。」

先生

「そうですね。命令型だとどの順番で画面を操作するか全部書かないといけませんが、宣言的UIなら『状態に応じてこうなる』と書くだけで済みます。」

生徒

「Reactが裏で処理してくれるから、書く量も減ってスッキリしますね。コードの見通しもよくなる感じがします。」

先生

「その通りです。宣言的UIはReactの基本であり、これが分かるとコンポーネントの仕組みも理解しやすくなりますよ。どんどんコードを書いて慣れていきましょう。」