React（リアクト）

React（リアクト）とは、Meta社（旧Facebook）が開発した、Webページのユーザーインターフェース（UI）を作るためのJavaScriptライブラリです。画面上のボタンや入力欄といった部品を「コンポーネント」という単位で組み立て、再利用しながら効率よく開発できる点が特徴です。

現実世界に例えると、Reactは「レゴブロック」のような開発スタイルです。あらかじめ作っておいたパーツ（コンポーネント）を組み合わせるだけで、複雑な画面を効率よく組み立てられます。同じパーツを別の場所でも繰り返し使い回せるそこ、開発や修正の手間を大きく減らせます。

Reactの特徴

• コンポーネント指向
  画面をボタンやフォームなどの部品単位に分割し、組み合わせて画面を構築します。
• 仮想DOM
  画面の変更が必要な部分だけを見つけて効率よく更新する仕組みを持ちます。
• 宣言的な記述
  「画面をどう変えるか」ではなく「どんな状態を表示したか」を書くだけで画面が更新されます。

仮想DOMの仕組み

Webページの構造は「DOM」と呼ばれる形で管理されていますが、DOMを直接何度も書き換えると処理が重くなりがちです。Reactは変更内容をまず仮想DOMという仮の構造上で計算し、実際に変わった部分だけを本来の画面（DOM）に反映します。この仕組みにより、無駄の少ない高速な画面更新を実現しています。

主な用途

Reactは、ページ遷移なしに画面が切り替わるSPA（シングルページアプリケーション）の開発によく使われます。ECサイトの商品一覧や、SNSのタイムラインなど、頻繁にデータが更新される画面と相性が良く、スマートフォンアプリを開発する「React Native」という関連技術もあります。

他のフレームワークとの違い

Reactを支えるエコシステム

Reactでは、HTMLに似た記法でコンポーネントの見た目を書けるJSXという構文がよく使われます。また「Hooks」という仕組みを使うと、画面の状態（state）や副作用のある処理を、シンプルな関数の形でコンポーネントに組み込めます。実際の開発では、Reactに加えてNext.jsのようなフレームワークを組み合わせ、ページ遷移やサーバー側の処理まで含めて効率よく開発するケースも増えています。

あわせて知っておきたい用語

• コンポーネント：
  画面を構成する部品単位のまとまりです。
• 仮想DOM：
  実際の画面表示の前に変更内容を計算するための仮の構造です。
• SPA：
  ページ全体を再読み込みせずに画面を切り替えるWebアプリの形式です。
• JavaScript：
  Webページに動きを付けるためのプログラミング言語です。