画面は、
部品の組み合わせで
できている。

React（リアクト）は、Webサイトやアプリの画面をつくるための道具です。Facebookを運営するMeta社が2013年に公開し、いまでは世界中の業務システムやWebサービスで使われています。AIに「Webアプリを作って」と頼むと、多くの場合このReactで書かれたコードが返ってきます。

Reactの考え方は一つだけです。画面を小さな部品に分けて、部品を組み合わせて全体をつくる。ヘッダー、商品カード、ボタン、一覧表。それぞれを別々の部品として作っておき、必要な場所に並べます。

なぜ部品に分けるのか

部品に分けると、次の3つの良いことがあります。

• 使い回せる：同じ「商品カード」を100個並べても、作るのは1つでよい
• 直しやすい：ボタンの色を変えたいなら、ボタン部品だけ直せばすべてに反映される
• 分担しやすい：AIに「商品カードの部品だけ直して」と範囲を絞って頼める

右の例は小さな買い物画面です。「部品の境界を表示」を押すと、画面がどんな部品でできているかが見えます。

この章を読み終えた

Reactでは、画面の部品のことをコンポーネントと呼びます。英語で「構成部品」という意味です。この先、AIのコードを読むときに一番よく出てくる言葉です。

コンポーネントの正体は、「画面の見た目を返す関数」です。関数とは「決まった手順をまとめて名前を付けたもの」のこと。Excelの SUM が「数字を受け取って合計を返す」ように、コンポーネントは「呼ばれたら画面の一部を返す」ものだと考えてください。

コードの読み方

右のコードを上から読んでみましょう。

• function Greeting()：「Greeting（あいさつ）」という名前の部品を作る、という宣言です。名前は必ず大文字で始めます。大文字で始まっていれば「これは部品だな」と見分けられます。
• return (…)：この部品が画面に出す中身です。HTMLのような書き方をします（次の章で説明します）。
• <Greeting />：作った部品を使う書き方です。3回書けば、3回表示されます。

部品の中に部品を入れる

部品は入れ子にできます。App という一番外側の部品の中に、Header、ProductList などが入り、その中にさらに ProductCard が入る。この入れ子の形を「コンポーネントツリー（部品の木）」と呼びます。実際のアプリでは、たいてい App が一番上にあります。

この章を読み終えた

// 部品をつくる
function Greeting() {
  return <p>こんにちは！</p>;
}

// 部品を使う（3回）
function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
      <Greeting />
    </div>
  );
}

コンポーネントの return の中に書かれていた <p>こんにちは！</p> のような部分を、JSX（ジェイエスエックス）と呼びます。Webページの骨組みを書くHTMLという言語にそっくりですが、JavaScript（Webで動くプログラムの言語）の中に直接書ける、Reactのための書き方です。ファイル名の .jsx はここから来ています。

覚えておく3つの決まり

1. { } の中は計算や値になる。波かっこで囲むと、その中は文字ではなくプログラムとして扱われます。{price * 1.1} と書けば、税込の金額が表示されます。Excelでセルに「=」を付けると計算式になるのと同じです。

2. 全体を1つのタグで包む。return で返せるのは1つのかたまりだけです。複数の要素を並べるときは <div> や、目に見えない包み <>…</> で全体を包みます。

3. HTMLと少しだけ名前が違う。見た目の指定に使う class は、JSXでは className と書きます。onclick は onClick のように、2語目の頭を大文字にします。

右の例では、数量の欄を変えると { } の中の計算がやり直され、合計がすぐに変わります。

この章を読み終えた

function Receipt() {
  const price = 1000;   // 単価
  const qty = 3;        // 数量
  return (
    <div className="receipt">
      <p>小計：{price * qty}円</p>
      <p>税込：{price * qty * 1.1}円</p>
    </div>
  );
}

第2章の Greeting は、何回使っても同じ「こんにちは！」しか出せませんでした。実際の画面では、同じ形の部品に、違う中身を入れたいことがほとんどです。商品カードなら、形は同じで商品名と値段だけが違います。

そこで使うのが props（プロップス）です。「properties（属性）」の略で、部品を使う側から、部品へ渡す設定値のことです。

コードの読み方

• 使う側：<ProductCard name="ボールペン" price={120} /> のように、部品名の後ろに「名前=値」を並べて渡します。
• 受け取る側：function ProductCard({ name, price }) のように、かっこの中で受け取ります。受け取った値は、JSXの {name} のように差し込めます。

大事な性質：受け取った側は書き換えない

propsは「上（使う側）から下（部品）へ」の一方通行です。部品は受け取った値を表示に使うだけで、自分で書き換えてはいけません。値を変えたいときは、渡す側で変えます。この決まりのおかげで、「この値はどこから来たのか」を上にたどれば必ず見つけられます。

右の例で、渡す値を変えてみてください。部品の中身は同じまま、表示だけが変わります。

この章を読み終えた

// 受け取る側
function ProductCard({ name, price, sale }) {
  return (
    <div className="card">
      <p>{name}</p>
      <p>{price}円</p>
      {sale && <span>セール中</span>}
    </div>
  );
}

// 使う側（値を渡す）
<ProductCard name="ボールペン" price={120} sale={true} />

この章が、Reactで一番大切なところです。少し時間をかけて読んでください。

propsは「外から渡される値」でした。一方、ボタンを押した回数や、入力欄に打ち込んだ文字のように、部品自身が覚えていて、操作によって変わる値もあります。これを state（ステート＝状態）と呼びます。

コードの読み方

const [count, setCount] = useState(0); という1行は、次の意味です。

• useState(0)：「覚えておく値」を1つ用意する。最初の値は0。
• count：いま覚えている値を読むための名前。
• setCount：値を書き換えるための専用の道具。名前は「set＋値の名前」にするのが慣習です。

そして一番大事な決まりがこれです。setCount で値を変えると、Reactがその部品を自動で描き直す。画面を直接いじるのではなく、「値を変えれば、画面は勝手に追いついてくる」のがReactの仕組みです。

普通の変数ではだめな理由

右の例では、左が普通の変数、右が state です。左は裏側で数が増えていても、Reactは「描き直す合図」を受け取っていないので画面が変わりません。画面に反映したい値は state にする。これがAIのコードで useState がたくさん出てくる理由です。

イベント：操作に反応する

onClick={…} は「クリックされたら、波かっこの中の処理をする」という意味です。ほかにも、入力されたら onChange、送信されたら onSubmit などがあります。on＋出来事 という名前で統一されているので、見ればすぐ分かります。

この章を読み終えた

// 普通の変数（画面が変わらない）
let count = 0;
<button onClick={() => count = count + 1}>

// state（画面が変わる）
const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>

業務の画面には、取引先一覧や明細のように同じ形の行がたくさん並ぶものと、「データが0件なら『ありません』と出す」のように条件で表示を変えるものがよく出てきます。この2つの書き方を知っておくと、AIのコードの大部分が読めるようになります。

一覧：map で並べる

tasks.map(task => <li>…</li>) は、「tasks（やること一覧）の1件ずつについて、<li>（一覧の1行）を作る」という意味です。データが3件なら3行、100件なら100行になります。

このとき key={task.id} という指定が付きます。これは行ごとの背番号で、Reactがどの行が増えたか・消えたかを見分けるために使います。AIのコードで key を見かけたら「一覧の行の目印」と思ってください。

出し分け：条件で表示を変える

• {条件 && <表示>}：条件に合うときだけ表示する。
• {条件 ? <A> : <B>}：条件に合えばA、合わなければBを表示する。Excelの IF(条件, A, B) と同じです。

右の例で、やることを追加したり、完了にしたりしてみてください。「完了を隠す」を押すと出し分けが働き、全部消すと「ありません」の表示に変わります。

この章を読み終えた

function TodoList({ tasks, hideDone }) {
  const shown = hideDone
    ? tasks.filter(t => !t.done)
    : tasks;

  return shown.length === 0
    ? <p>やることはありません</p>
    : (
      <ul>
        {shown.map(task => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>
    );
}

部品の仕事は、基本的には「見た目を返す」ことだけです。でも実際のアプリでは、画面を表示した後に、別の仕事をしたいことがあります。代表的なのは次のようなものです。

• サーバー（データを置いてある別のコンピューター）から、売上データを取ってくる
• 一定時間ごとに表示を更新する（時計、自動保存など）
• ブラウザのタブに表示される題名を変える

こうした「表示の後に行う処理」を書く場所が useEffect（ユーズエフェクト）です。effect は「副作用」、つまり画面を描くこと以外の仕事を指します。

コードの読み方

useEffect(() => { 処理 }, [見張る値]); の形をしています。

• 1つ目：実行したい処理。
• 2つ目の [ ]：いつ実行するかを決める「見張り役」のリスト。[]（空）なら最初に表示したとき1回だけ。[userId] なら、userId が変わるたびに実行し直します。

右の例は、表示した後にデータを取りにいく様子を、時間をずらして再現したものです。取引先を切り替えると、見張っている値が変わったので処理がもう一度実行されます。下の記録欄で、いつ実行されたかを確かめてください。

この章を読み終えた

function SalesPanel({ clientId }) {
  const [sales, setSales] = useState(null);

  useEffect(() => {
    setSales(null);       // 読み込み中にする
    fetchSales(clientId)  // データを取りにいく
      .then(data => setSales(data));
  }, [clientId]);         // clientIdが変わったら再実行

  return sales === null
    ? <p>読み込み中…</p>
    : <p>今月の売上：{sales}円</p>;
}

ここまでで、Reactの基本の部品はそろいました。最後に、AIが作ったプロジェクトを開いたときに戸惑わないための知識をまとめます。

React の「周りの道具」

Reactは画面の部品をつくる道具なので、アプリ全体を作るときは周りの道具と組み合わせて使います。よく出てくる名前を表にしました。

よくあるファイル構成

Next.jsのプロジェクトは、たいてい右のような構成です。迷ったら components フォルダを開くのが近道です。部品の名前がそのままファイル名になっています。

AIのコードを読む5つの手順

1. 直したい画面に表示されている文字で、ファイルを検索する（例：「請求書一覧」）
2. 見つかったファイルの function 大文字の名前 を探し、どの部品かを確認する
3. useState を探し、その部品が覚えている値を把握する
4. 引数の ({ … }) を見て、外から何を受け取っているか（props）を確認する
5. AIには部品名と値の名前を添えて頼む

この先に学ぶとよいこと

この教材では、あえて省いた内容があります。必要になったら次の順で学ぶと無理がありません：フォームの入力と送信 → ページの切り替え（ルーティング） → サーバーとのデータのやりとり → TypeScript の型。

この章を読み終えた

my-app/
├─ package.json     ← 使う道具の一覧
├─ app/
│  ├─ layout.tsx    ← 全ページ共通の枠
│  ├─ page.tsx      ← トップページ
│  └─ invoices/
│     └─ page.tsx   ← /invoices のページ
├─ components/      ← 部品はここ
│  ├─ Header.tsx
│  ├─ InvoiceList.tsx
│  └─ InvoiceRow.tsx
└─ public/          ← 画像などの素材