Reactとは？非エンジニア向けにわかりやすく解説

3秒でわかる

画面をボタンやカードのような部品 (コンポーネント) の組み合わせで作る、JavaScript のライブラリ。データが変わると、画面の変わった所だけを書き換えます。

30秒図解

React は、画面を部品で組み立てる JavaScript のライブラリ。言語ではなく、JavaScript で書く道具。state が変わると、その部品の表示を計算し直す

Reactをたとえると？

ブロックのおもちゃに似ています。ボタン、カード、ヘッダーといった部品を一度作れば、何度でも組み合わせて別の画面を作れます。ただしおもちゃのブロックと違い、React の部品は中に「状態」を持ち、データが変わると自分の見た目を描き直します。

実際にはこう使います

商品カードの部品を作り、一覧ページで何枚も並べる

ボタンを押した回数を画面に表示する

入力欄の文字に合わせて検索結果を絞り込む

もう少し詳しく

React は、Web の画面をボタンやカードのような「部品」に分けて作り、組み合わせて 1 つの画面にするための JavaScript のライブラリです。

まず、よくある誤解

誤解「React はプログラミング言語、または HTML の新しい書き方」と思われがちです。

本当は React は JavaScript のライブラリです。HTML に見える部分は JSX という、JavaScript の中に画面の形を書くための書き方で、HTML そのものではありません。

どういうものか

React は、ユーザーが触る画面 (UI) を作るための JavaScript のライブラリです。画面を「コンポーネント」と呼ぶ部品に分け、部品を組み合わせて 1 つのページを作ります。

部品は JavaScript の関数として書き、返す中身は HTML に似た JSX という書き方で表します。

function Greeting({ name }) {
  return <p>こんにちは、{name}さん</p>;
}

なぜ必要か

画面が大きくなると、「この数字が変わったら、あの表示とこのボタンも変える」という書き換えの手作業が増え、漏れがそのまま不具合になります。React では「このデータのときはこう見える」を書いておけば、データが変わったときの描き直しを React が受け持ちます。描き直すとき、React は前と違う所だけを画面に反映します。

具体例

次の 2 つの例は、React を動かす準備ができたプロジェクト (React の公式サイトが案内する作り方で作ったものなど) の中で、部品として画面に置いて使います。

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      {count} 回押されました
    </button>
  );
}

setCount で数を変えると、React がこのボタンの表示を描き直します。画面の文字を自分で書き換えるコードは書いていません。

つまずきやすいところ

JSX は HTML とそっくりですが、別物です。class は className と書き、<img /> のようにタグは必ず閉じます。

ふつうの変数を書き換えても画面は変わりません。count = count + 1 ではなく、useState が返す setCount を使って変えると、React が描き直しを始めます。

JavaScript の関数、配列の map、分割代入が分からないまま始めると、どこまでが React の書き方で、どこからが JavaScript の書き方なのかが見分けにくくなります。

似た用語との違い

用語	指すもの
React	画面を部品で作るライブラリ
JavaScript	React を書くための言語
JSX	JavaScript の中に HTML に似た形で画面を書く書き方
Next.js	React を土台に、Web アプリ全体を作るためのフレームワーク