Reactとは？JavaScriptのUIライブラリをわかりやすく解説

Reactは、コンポーネントからユーザーインターフェースを作るためのJavaScriptライブラリです。現在のデータに対して画面がどう見えるべきかを書くと、データが変わったときにReactがページを合わせて更新します。React、React JS、ReactJSはすべて同じもので、Facebook（現在のMeta）で生まれたオープンソースのライブラリです。

import { useState } from 'react';

function Counter({ label }) {
    const [count, setCount] = useState(0);

    return (
        <p>
            {label}: {count}{' '}
            <button onClick={() => setCount(count + 1)}>Add one</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <h3>Fruit basket</h3>
            <Counter label="Apples" />
            <Counter label="Pears" />
        </div>
    );
}

両方のボタンをクリックしてください。それぞれの Counter は自分の数値を持っています。各 Counter が、自分のstateを持つコンポーネントの別々のコピーだからです。3行目に <Counter label="Plums" /> を追加すると、新しい独立したカウンターが現れます。

この短い例だけで、Reactを支える3つの考え方がすでに見えています。コンポーネント（Counter と App はUIを返す関数です）、JSX（return の中にあるHTMLに似た構文）、そして state（count のように、変わるとReactがコンポーネントを描き直す値）です。

Reactが解決する問題

ユーザーインターフェースは、あるデータの絵のようなものです。データが変われば絵も変わらなければならず、そのデータに依存する画面のすべての部分が一緒に変わる必要があります。ライブラリがなければ、そのコードを手で書くことになります。各要素を探し、そのテキスト、クラス、表示状態を自分で設定するのです。機能を追加するたびに、更新を忘れてはいけない場所がまた1つ増えます。

Reactはこれを逆にします。あるstateに対して画面がどうあるべきかを示す関数を1つ書くと、ページのどの部分を変える必要があるかをReactが判断します。これを宣言的UIと呼び、DOMの変更を1つずつ並べる命令的なコードと対比されます。次の例では2つのスタイルを並べています。

import { useEffect, useRef, useState } from 'react';

function ByHand() {
    const boxRef = useRef(null);

    useEffect(() => {
        // Plain DOM code: no React state, no JSX.
        const box = boxRef.current;
        box.innerHTML = 'By hand: <span class="num">0</span> is <span class="parity">even</span> <button>+1</button>';
        let count = 0;
        const button = box.querySelector('button');

        function handleClick() {
            count += 1;
            box.querySelector('.num').textContent = count;
            box.querySelector('.parity').textContent = count % 2 === 0 ? 'even' : 'odd';
        }

        button.addEventListener('click', handleClick);
        return () => button.removeEventListener('click', handleClick);
    }, []);

    return <p ref={boxRef} />;
}

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

    return (
        <p>
            Declarative: {count} is {count % 2 === 0 ? 'even' : 'odd'}{' '}
            <button onClick={() => setCount(count + 1)}>+1</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <ByHand />
            <Declarative />
        </div>
    );
}

ByHand は自分の段落を素のDOMコードに任せています（エフェクトは、Reactが段落を作った後にそのコードを1回だけ実行します）。数値を変数に持ち、querySelector で各要素を探して、テキストを手で設定します。Declarative は「カウントを表示し、それが偶数かどうかを表示する」とだけ書いています。handleClick の中で .parity を設定している行を削除して何回かクリックしてみてください。1行目は3が偶数だと主張し始めますが、2行目はずれることがありません。テキストがレンダリングのたびに count から計算されるからです。

Reactがページを更新する仕組み

stateが変わると、Reactはコンポーネント関数をもう一度呼びます。この呼び出しがレンダリングです。関数はUIの新しい記述を返し、Reactはそれを前回のものと比べて、実際のページのうち違う部分だけを変更します。このメモリ上の記述は、よく仮想DOMと呼ばれます。

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');

    console.log('App rendered, name is', JSON.stringify(name));

    return (
        <div>
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Type your name"
            />
            <p>Hello, {name || 'stranger'}!</p>
        </div>
    );
}

プレビューの下のコンソールを開いて、何文字か入力してください。キーを押すたびに、新しい値でのレンダリングが1回記録されます。入力欄はフォーカスとカーソル位置を保ったままです。Reactが触ったのは段落のテキストと入力欄の値だけで、ページ全体ではないからです。コンポーネントがいつ再レンダリングされるかは、レンダリングのページで詳しく説明しています。

コンポーネント、JSX、stateの概要

コンポーネントは、名前が大文字で始まるJavaScriptの関数です。画面に表示するものを返し、HTMLタグのように <Counter /> と書いて使います。ページはコンポーネントのツリーで、ボタンのような小さなものから設定画面全体のような大きなものまであります。コンポーネントを参照してください。

JSXは、JavaScriptの中にマークアップを書けるようにする構文です。波かっこでJavaScriptに戻れるので、{count} で値を表示し、{items.map(...)} で配列をリストに変えられます。ブラウザが実行する前に、ビルドツールがJSXを普通の関数呼び出しにコンパイルします。

stateは、コンポーネントがレンダリングの間で覚えておくデータです。useState フックで作り、そのセッターを呼ぶことで、何かが変わったことをReactに伝えます。データはpropsを通じて親から子へ流れます。propsはコンポーネントの引数です。

次の例はそのすべてを使っています。stateにある配列から描画したリストと、そこに項目を追加するフォームです。

import { useState } from 'react';

function TaskList({ tasks }) {
    if (tasks.length === 0) return <p>Nothing to do.</p>;
    return (
        <ul>
            {tasks.map((task) => (
                <li key={task}>{task}</li>
            ))}
        </ul>
    );
}

export default function App() {
    const [tasks, setTasks] = useState(['Learn JSX', 'Learn props']);
    const [draft, setDraft] = useState('');

    function addTask() {
        if (draft.trim() === '') return;
        setTasks([...tasks, draft.trim()]);
        setDraft('');
    }

    return (
        <div>
            <input value={draft} onChange={(e) => setDraft(e.target.value)} />
            <button onClick={addTask}>Add</button>
            <TaskList tasks={tasks} />
            <p>{tasks.length} tasks</p>
        </div>
    );
}

タスクを追加すると、リストとその下の件数の2つが同時に変わります。件数を更新するようには一度も指示していません。どちらも tasks を読んでいるので、どちらもそれに従うのです。最初の配列を [] に変えると、リストの代わりに「Nothing to do.」と表示されます。

Reactではないもの

Reactはライブラリであり、完全なフレームワークではありません。コンポーネント、state、それらをUIに変えることを担当し、完全なアプリに必要ないくつかのものは意図的に含めていません。

• ルーティング。URLをページに対応させる仕組みは組み込まれていません。React Routerやフレームワークのルーターがその穴を埋めます。
• データ取得とサーバーレンダリング。Reactはエフェクトや Suspense などの道具を提供しますが、データをどこから取得するか、ページをサーバーでどう描画するかについては決めていません。
• ビルド環境。ブラウザはJSXを理解しないので、Viteのようなツールでコンパイルする必要があります。

フレームワークはReactの上にこれらの部品を用意します。Next.jsとReact Routerのフレームワークモードは、ルーティング、サーバーレンダリング、データ読み込みを追加します。Reactチームは、本格的なアプリはそのどちらかで始めることを勧めています。クライアントサイドのアプリや学習用なら、Viteと素のReactが小さく速い出発点です。Reactのインストール方法を参照してください。

ReactとReact Nativeの違い

React自体は、コンポーネントとその変化を記述するだけです。別のレンダラーがそれを目に見えるものに変えます。React DOMはWebページに描画し、このサイトのすべての例はこれを使っています。React Nativeは同じ種類のコンポーネントをiOSやAndroidのネイティブビューに描画します。そのため <div> や <p> の代わりに <View> や <Text> を書き、HTMLやCSSのファイルはありません。コンポーネント、props、state、フックはどちらでも同じように動くので、ここで学んだことはそのまま活かせます。

Reactを学ぶタイミング

ReactのすべてはJavaScriptなので、JavaScriptの基本を身につけてからReactを学びましょう。始める前に、次のものに慣れておくべきです。

• 変数、関数、アロー関数
• 配列と、その map と filter メソッド
• オブジェクト、分割代入、スプレッド構文（...）
• import と export
• データを読み込むためのPromiseと async/await

これらに見覚えがあれば、JSXとコンポーネント、次にpropsとstateから始めましょう。エフェクト、ref、コンテキスト、パフォーマンスの道具は、小さな対話的コンポーネントを作るのが自然に感じられるようになってからで十分です。