Reactとは何ですか？

画面（UI）を組み立てるためのJavaScriptのライブラリです。ボタンやカードといった部品を「コンポーネント」として書き、データが変わったら画面のどこを書きかえるかはReactが決めます。書き手は「いまのデータならこう見える」だけを書きます。

HTMLとCSSしか知らなくてもReactは学べますか？

先にJavaScriptの基礎（変数・関数・配列・オブジェクト・イベント）が必要です。ReactはJavaScriptでHTMLの形を作る道具なので、JavaScriptを飛ばすと呪文の暗記になってしまいます。

jQueryとどう違いますか？

jQueryは「この要素をこう書きかえて」と手順を指示する道具、Reactは「このデータならこの見た目」と結果を書く道具です。書きかえの手順そのものをReactが受け持つので、更新もれによる表示のズレが起きにくくなります。

WordPressの仕事をしていてもReactを学ぶ意味はありますか？

あります。WordPressの管理画面のブロックエディタはReactで作られていますし、ブロックの自作やヘッドレス構成ではReactの知識がそのまま必要になります。フロント側の求人でもよく出てくる前提知識です。

Reactとは - 素のJavaScriptと何が違うのかを書き比べて理解する

Reactは、画面を組み立て直してくれる係です。

もう少していねいに言うと、「いまのデータならこういう見た目になる」とだけ書いておけば、データが変わったときに画面のどこを書きかえるかはReactが考えてくれる——そういうしくみです。

このコースは、HTML・CSS・JavaScriptを一通りやった人が「Reactの記事を読むと急に分からなくなる」という段差を越えるためのものです。最初の一歩として、なぜこんな道具が生まれたのかからいきます。

コースJavaScriptJavaScriptの基礎（変数・関数・配列・イベント）がまだの人は、先にこちらへ。このコースはそこを知っている前提で進みます

まず、素のJavaScriptの痛いところを体験する

「ことりずかん」に鳥を1羽追加する、という機能を素のJavaScriptで書いてみます。やることは3つです。

データの配列に1羽足す
一覧に<li>を1つ足す
「お気に入り: ◯羽」の数字を書きかえる

下のデモの左のボタンは3つとも書いてあります。右のボタンは、わざと3番目（数字の書きかえ）だけ書き忘れています。押し比べてみてください。

右のボタンを押すと、リストは増えるのに数字が増えません。データと画面が食いちがった状態です。

右のボタンで起きたことが、素のJavaScriptでいちばんよく起きるバグです。データは正しいのに、画面がそれについていっていない。

しかも実際のアプリでは、書きかえる場所は3つでは済みません。「お気に入りを外す」「検索でしぼりこむ」「並べかえる」——機能が増えるたびに「データを変えたとき、画面のどこを直すか」の組み合わせが増えていきます。

Reactの書き方に置きかえると

同じものをReactで書くと、こうなります。まだ読めなくて大丈夫です。眺めるだけにしてください。

function App() {
  const [birds, setBirds] = useState([])

  return (
    <div>
      <p>とりの数: {birds.length}羽</p>
      <ul>
        {birds.map((bird) => (
          <li key={bird.id}>{bird.name}</li>
        ))}
      </ul>
      <button onClick={() => setBirds([...birds, newBird])}>ふやす</button>
    </div>
  )
}

注目してほしいのは書いていないことのほうです。

document.getElementByIdがありません
createElementもappendChildもありません
「数字を書きかえる」という命令がどこにもありません

あるのは「birdsという配列がこうなっているとき、画面はこう見える」という対応関係だけです。birdsを新しくすると、Reactが画面のほうを合わせにいきます。

Reactの部品は「関数」

もうひとつ、Reactの根っこにある考え方があります。画面を部品（コンポーネント）に分けて、部品ひとつを関数1つで書くというものです。

function BirdCard() {
  return <div className="card">🐦 シマエナガ</div>
}

これだけで「BirdCard」という部品ができました。使うときは、自分で作ったHTMLタグのように書きます。

<BirdCard />
<BirdCard />

WordPressのテンプレートでget_template_part()を使ってパーツを切り出すのと、目的は同じです。違うのは、部品が自分の見た目だけでなく自分の状態（開いている・選ばれている）も持てることです。ここが後半の山場になります。

Reactを使うのに必要なもの

正直に書いておきます。Reactは、HTMLファイルを1つ作れば始められる——という道具ではありません。

必要なもの	なぜ要るのか
npm	Reactの本体を取ってくる。ビルドの道具もここから入れる
ビルド	上に出てきた`<div>`混じりのJavaScript（JSX）は、そのままではブラウザが読めない。変換が要る
開発サーバー	保存するたびに画面へ反映させる。この快適さがないと学習効率が落ちる

このコースではViteという道具で、この3つをまとめて用意します。コマンドは2つだけなので身がまえなくて大丈夫です。

npmnpmってなに？——npm installは何をしている？npm installが何をしているのか自信がない人は、先にこちらを1本読んでおくと安心です

使わないほうがいい場面もある

Reactは万能の上位互換ではありません。向かない場面をはっきりさせておきます。

ページに小さな動きを1つ足すだけ——ハンバーガーメニューの開閉だけなら、素のJavaScript数行のほうが速くて軽いです
WordPressのふつうのテーマ——PHPが組み立てたHTMLの上に、Reactを重ねる必要はありません
中身がほぼ変わらないページ——会社案内やブログ記事は、Reactを積むぶんだけ表示が重くなります

Reactが効くのは、同じ画面の中でデータがくるくる変わるときです。検索・絞りこみ・お気に入り・入力フォーム・管理画面——このあたりで一気に楽になります。

このコースで作るもの

全32回で、しまちゃんのことりずかんを作ります。これが完成形です。

ことりずかんの完成画面。8羽の鳥がカード形式で3列に並び、名前・すんでいる場所・説明・お気に入りの星が表示されている。上には検索ボックスと「お気に入りだけ見る」のチェックボックスがある — 最終回まで進めると、この画面が手元で動きます。検索でしぼりこめて、お気に入りはリロードしても残ります

進み方はこうです。

知る——Reactの発想と、その前に知っておきたいJavaScriptの書き方（今ここ）
動かす——ViteとTailwindで環境を作り、JSXとコンポーネントを覚える
データを流す——props・一覧・条件分岐でカードを並べる
動かす——stateとイベントで、押せる・入力できる画面にする
仕上げる——外のデータを読み、公開する

公式ドキュメントも見てみる

Reactの公式ドキュメントには日本語版があります。しかも、よくある「APIの一覧」ではなく読み物として作られた学習ページがあるので、このコースと並行して開くと理解が早くなります。

ja.react.dev外部サイトクイックスタート – React公式の学習ページ。いまは「Reactの流儀」の節だけ眺めれば十分です。全部読むのは、このコースを終えてからで大丈夫

日本語版は翻訳が追いついていない章もあります。表示が英語のままのページに当たったら、それが最新版だと思ってください。

このレッスンのまとめ

素のJavaScriptの痛いところはデータと画面がズレること——書きかえもれが起きる
Reactは「いまのデータならこう見える」だけを書き、書きかえはReactがやる（宣言的）
画面はコンポーネント（＝関数1つ）に分けて組み立てる
動かすにはnpm・ビルド・開発サーバーが要る。このコースではViteでまとめて用意する
データがくるくる変わる画面ほど効く。ほとんど変わらないページには要らない

次は、Reactを読むために必要なJavaScriptの書き方をまとめて確認します。アロー関数・分割代入・スプレッド構文——Reactの記事が読みにくい原因の大半は、実はここです。

Reactって何？