Reactとは — UIを部品でつくるライブラリ

Reactはひとことで言うと「UI部品の道具箱」

Reactは、Webの画面(UI = User Interface、ユーザーが見て触る部分)を作るためのJavaScriptライブラリです。特徴は、画面全体をいきなり作るのではなく、小さな「部品」を組み合わせて作るところにあります。この部品をReactでは「コンポーネント」と呼びます。ボタン、検索バー、商品カード、ヘッダー…これらをそれぞれ独立した部品として作り、レゴブロックのように組み立てて1つの画面にします。

たとえるなら、レゴブロックのカタログです。ブロック一つひとつ(コンポーネント)には決まった形と役割があり、それらを組み合わせて城でも車でも作れます。同じブロックを何度でも使い回せるのがポイントです。「商品カード」という部品を1つ作れば、100個の商品を表示するときも同じ部品を100回並べるだけで済みます。

function ProductCard() {
  return (
    <div className="card">
      <h2>りんご</h2>
      <p>120円</p>
    </div>
  );
}

なぜReactが生まれたのか

昔のWeb作りでは、画面を書き換えるたびに「この要素を探して、この文字をここに入れて、この色を変えて…」と1つずつ手作業で命令していました。これを「DOM操作」と言います。DOMとは、ブラウザが画面を木構造(ツリー)として持っているデータのことで、JavaScriptから直接いじれます。

// 手作業のDOM操作: 要素を探して、直接書き換える
const el = document.querySelector("#count");
el.textContent = "3";
el.classList.add("active");

問題は、画面が複雑になったときです。データが変わるたびに「どこを、どう書き換えるか」を人間が全部管理しなければなりません。要素が数百個あり、状態が絡み合うと、「ここを変えたらあそこも直さなきゃ」という抜け漏れが必ず起きます。バグの温床でした。Reactは、この「手作業の書き換え」から人間を解放するために生まれました。

• Reactは画面(UI)を作るためのJavaScriptライブラリ
• 画面を「コンポーネント(部品)」の組み合わせで作る
• 同じ部品を何度でも再利用できる(レゴブロックのイメージ)
• 手作業のDOM操作が大規模で破綻したことへの答えとして生まれた