Reactとは？非エンジニアのための平易なガイド

Reactは、ユーザーインターフェース、つまり人が見てクリックする部分のアプリを作るためのJavaScriptライブラリです。画面は、ボタン、商品カード、ページ全体など、再利用可能な部品（コンポーネント）を組み合わせて作ります。Reactはデータと画面を常に同期させます。データが変わると、そのデータに依存する部分のページだけを更新します。Facebook（現在のMeta）で作られ、オープンソースで公開されており、Webアプリを作るもっとも広く使われている方法の一つです。

AIでアプリを作るときに重要な理由

AIツールでWebアプリを作るなら、そのアプリがReactで書かれている可能性は高いです。多くのAIアプリビルダーは、人気があり、ドキュメントが充実していて、AIモデルが学習できるReactのコードが大量にあるという理由で、デフォルトでReactを使っています。

AIでアプリを作るのにReactを書く必要はありません。しかし少し知っておくと、次のような場面で役立ちます。

• 変更を正確に伝えられる。 「価格が目立つように、ProductCardコンポーネントを変更してください」は、「どこかで価格を目立たせてください」よりもはっきり伝わります。
• エラーを理解できる。 「Cannot read properties of undefined」や「Too many re-renders」といったメッセージの意味がわかります。
• 適切な選択ができる。 通常のReactアプリはブラウザ上で描画されるため、検索での見つけやすさや初回表示の速さに影響します。それを知っていれば、別の構成を頼むべきかを判断できます。
• 後で開発者と協力できる。 Reactは一般的なスキルなので、開発者は通常、Reactのコードベースをすぐに引き継げます。

日常の例え

LEGOを想像してください。1つのブロックからモデル全体を彫り出すのではなく、標準的なブロックを組み合わせて作ります。数個のブロックで車輪ができ、車輪と他の部品を組み合わせると車になります。すべての車の車輪を赤にしたいなら、車輪の設計を一度変えるだけです。

Reactのコンポーネントがそのブロックです。ButtonコンポーネントはProductCardの中で使われ、ProductCardはProductGridの中で使われ、ProductGridはShopPageの一部になっています。Buttonを一度変更すれば、アプリ内のすべてのボタンが変わります。

この例えにはもう一つの側面があります。説明書を変えるたびに、LEGOのモデルが自ら組み直されるとします。それがReactのもう一つの仕組みです。現在のデータに対して画面がどう見えるべきかを記述すれば、Reactがページ上で何を変えるべきかを判断します。

中心となる考え方

コンポーネント

コンポーネントは、インターフェースの一部を返すJavaScriptの関数です。Reactのドキュメントでは、コンポーネントを、独自のロジックと見た目を持つUIの一部として説明しています。コンポーネント名は大文字で始まります。

JSX

コンポーネントは通常JSXで書かれます。JSXは、HTMLのような書き方をJavaScriptに混ぜたものです。

function Greeting() {
  return <h1>Welcome back!</h1>;
}

JSXは必須ではありませんが、ほとんどのプロジェクトで使われている、とReactのドキュメントは述べています。ブラウザで実行される前に、普通のJavaScriptに変換されます。

props

propsは、コンポーネントに渡す入力値です。再利用できる部品の設定項目のようなものです。

<ProductCard name="Lavender Candle" price={24} />

同じProductCardが、どの商品でも表示できます。

state

stateは、アプリの実行中に変わることがある、コンポーネントが覚えている情報です。メニューが開いているか、検索ボックスに何が入力されているか、カートに何個入っているかなどです。stateが変わると、Reactはその画面に合うようにコンポーネントを再描画します。

フック

フックは、名前がuseで始まる関数です。例えば、値を覚えるuseStateや、描画の後にコードを実行するuseEffect（データ取得など）があります。AIが生成するReactのコードでは、これらがいたるところに出てきます。

具体例：カートの数字

オンラインショップに「カートに追加」ボタンと、商品数を示すカートアイコンがあるとします。Reactでは、おおよそ次のように書きます。

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

買い物客が「カートに追加」をクリックすると、次のことが起きます。

1. ボタンのonClickがonAddを呼び出し、それがsetCartCountを呼び出します。
2. ReactがcartCountの状態を0から1に更新します。
3. ReactがShopを再描画し、count={1}をCartIconに渡します。
4. ページには「Cart (1)」と表示されます。「カートという文字を探して書き換えろ」というコードは誰も書いていません。画面がデータに従うのです。

ここには限界もあります。このカウントはブラウザのメモリにあるため、ページを再読み込みすると0に戻ります。カートを維持したいなら、Cookie、ブラウザのストレージ、またはバックエンドを通じたデータベースなど、永続的な場所に保存する必要があります。Reactは画面を扱いますが、データを保存はしません。

WebアプリにおけるReactの位置づけ

「Vite + React」のアプリはブラウザ上で描画されます（シングルページアプリ）。Next.jsのアプリは、ページを先にサーバーで描画できるため、検索エンジンや初回表示の速さに役立ちます。

用語の説明

よくある間違いと誤解

• 「Reactはプログラミング言語だ」。 違います。JavaScript（またはTypeScript）で書かれ、そこから使うライブラリです。
• 「Reactがデータを保存する」。 stateはブラウザにあり、再読み込みすると消えます。永続するデータにはバックエンドとデータベースが必要です。
• Reactのコードに秘密情報を書くこと。 Reactアプリのすべてが、訪問者のブラウザに送られます。そこにあるAPIキーは公開されてしまいます。秘密情報はサーバー側に置いてください。
• 「ReactのWebアプリは検索で上位表示できない」。 ブラウザ上だけで描画する方式は検索に不利ですが、事前レンダリングやサーバー側での描画で、ほとんど解決できます。
• 巨大なコンポーネント。 1,000行のコンポーネントは、人にもAIにも安全に変更するのが困難です。小さく分けてもらいましょう。
• ReactのWebアプリはスマホアプリだと思い込むこと。 ブラウザで動き、スマホでも使えますが、App Storeのアプリではありません。

AIビルダーに頼むこと

• 「このページを小さく名前のついたコンポーネントに分け、それぞれがどのファイルにあるか教えてください。」
• 「ProductCardコンポーネントを再利用できるようにし、name、price、imageをpropsにしてください。」
• 「カートをデータベースに保存し、再読み込み後も残るようにしてください。」
• 「APIキーはすべてサーバーに置き、Reactのコードは自社のAPIを呼び出すようにしてください。」
• 「サーバーから取得するデータについて、読み込み中とエラーの状態を追加してください。」
• 「検索での見つけやすさが大切なページなら、事前レンダリングするか、サーバー描画の構成にしてください。」
• 「このエラーが何を意味するのか、どのコンポーネントから来ているのかを、平易な日本語で説明してください。」

全体像については、フロントエンドとバックエンドを、AIが書いたコードの確認方法についてはAI生成コードのレビュー方法をご覧ください。

MythexでのReact

別の指定がない限り、Mythexは新しいプロジェクトをVite + React + TypeScript + Tailwindで始めます。チャット中はライブプレビューが動いています。最初のプロンプトで別の構成を指定することもできます。例えば「Next.jsを使ってください」や「素のHTMLのランディングページ」などです。Mythexは書かれた内容から選択します。そのための設定画面はありません。選択肢については技術の選び方のドキュメントで説明しています。コードエディタは無料プランでは読み取り専用です。Proプランでは、Reactのコードを直接編集でき、別の場所で作業を続けるためにプロジェクトをエクスポートできます。

よくある質問