React は、Meta（旧 Facebook）が2013年に公開した、Web画面をつくるためのJavaScriptライブラリです。いまでは業務システムの管理画面から一般向けのサービスまで、幅広く使われています。

画面を部品として組み立てる

React の中心にあるのは「コンポーネント」という考え方です。ボタン、カード、入力フォームといった見た目の単位をひとつずつ作り、それを組み合わせて画面にします。

function Button({ label, onClick }) {
  return (
    <button className="btn" onClick={onClick}>
      {label}
    </button>
  );
}

// 使うときは、これを並べるだけ
<Button label="送信する" onClick={submit} />

HTML に見える部分は JSX という書き方で、実際には JavaScript に変換されます。HTML と JavaScript を別ファイルに分けず、部品ごとにまとめて持つのが React の流儀です。

変わった所だけ描き替わる

React は、表示に使うデータ（state）が変わると、その影響を受ける部分だけを描き替えます。ページ全体を読み込み直さないので、絞り込みや並べ替えを繰り返す画面でも、待ち時間がほとんどありません。

管理画面や業務アプリで React がよく使われるのは、この性質が効くためです。入力・検索・並べ替えが多い画面ほど、体感の差が出ます。

気をつけるところ

検索エンジンへの見え方

React だけで作ると、最初にブラウザへ返るHTMLはほぼ空になり、中身はブラウザ側で組み立てられます。検索からの集客が目的のサイトでは、サーバー側でHTMLを書き出せる Next.js を使うのが一般的です。

最初の表示にかかる時間

画面を組み立てる JavaScript を読み込むぶん、素のHTMLより初回表示が遅くなりがちです。使うライブラリを絞る、画像を最適化するといった手当てが要ります。

更新のしかた

文章や画像をお客様側で直したい場合は、更新する箇所だけを WordPress などのCMSに持たせ、React から読み込む構成にします。この設計を最初に決めておかないと、公開後に「直せない」ことになります。

向いている案件

• 入力・絞り込み・並べ替えが多い管理画面や業務アプリ
• 同じ形のカードや表を大量に並べるサービス
• 読み込んだデータで中身が変わるページ
• 長く手を入れ続ける予定のプロジェクト

反対に、数ページの会社案内サイトのように内容がほとんど変わらないものは、素のHTMLか WordPress で作ったほうが、費用も運用も軽く済みます。