この記事で扱うこと

React（リアクト）は、画面を部品に分けて作る仕組みです。

この記事では、Reactで画面を部品に分けるとはどういうことかを確認したあと、部品の書き方、部品に値を渡すprops、部品が覚えておくstateを順に見ていきます。

Reactは、自分のパソコンに何もインストールせずに試せます。React公式サイトのクイックスタートのページは、ページの中のコードをその場で書き換えて動かせるので、読みながら試す場所として使えます。

画面を部品に分ける

Reactでは、画面をコンポーネント（見出し・カード・ボタンのような部品）に分けて作ります。

1つの画面が、上のヘッダー、真ん中に同じ形のメンバーカードが3枚、下のフッターという部品に分かれている図。3枚のカードは同じ部品に違う名前を渡して作っている

同じ形の部品は1回だけ作り、中身を変えて何度も使えます。メンバーが10人になっても、カードの部品を10回呼ぶだけで済みます。

コンポーネントの書き方

コンポーネントは、HTMLに似たもの（JSX）を返す関数です。

function MemberCard() {
  return (
    <div className="card">
      <h2>たろう</h2>
      <p>1年生</p>
    </div>
  );
}

export default function MemberList() {
  return (
    <section>
      <MemberCard />
      <MemberCard />
    </section>
  );
}
決まり 意味
名前は大文字で始める MemberCard のように書く。小文字だと HTML のタグとして扱われる
<MemberCard /> 作った部品を使う書き方
className HTML の class の代わりに書く（class は JavaScript で別の意味があるため）
return ( ... ) の中は1つにまとめる 全体を <div> や <section> で囲む
export default この部品を、ほかのファイルから使えるようにする

このままでは、2枚のカードがどちらも「たろう」になります。カードごとに違う名前を出すには、次のpropsを使います。

propsで値を渡す

props（プロップス）は、部品の外から渡す値です。{ } で囲むと、JSXの中にJavaScriptの値を入れられます。

function MemberCard({ name, grade }: { name: string; grade: number }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{grade}年生</p>
    </div>
  );
}

// 使う側
<MemberCard name="たろう" grade={1} />
<MemberCard name="はなこ" grade={2} />

{ name: string; grade: number } の部分は、TypeScriptの型です。name には文字、grade には数を渡す、という約束を書いています。TypeScriptの読み方は、Noemaの「AI駆動開発で困らないためのTypeScript」にまとめています。

stateで画面を変える

state（ステート）は、部品が覚えておく値です。stateが変わると、Reactがその部品を描き直します。

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      {count} 回押されました
    </button>
  );
}
部分 意味
useState(0) 最初の値が 0 の state を作る
count 今の値
setCount(...) 値を変える関数。これを通して変えると画面も変わる
onClick={...} 押されたときの処理。素の JavaScript の addEventListener と同じ役割

count = count + 1 のように直接書き換えても、画面は変わりません。値を変えるときは setCount を使います。

まとめ

Reactでは、画面をコンポーネントという部品に分けて作ります。コンポーネントはJSXを返す関数で、名前は大文字で始めます。外から値を渡すときはprops、部品の中で値を覚えておくときはstateを使います。stateは useState で作り、値を変えるときは setCount のような専用の関数を通します。そうすると、Reactが部品を描き直して画面が変わります。

参考にした資料

  • React「クイックスタート」は、Reactの書き方を短い例で順に説明している公式のページです。「コンポーネントの作成とネスト」から「フックの使用」までが、この記事の範囲にあたります
  • React「チュートリアル：三目並べ」は、ブラウザの中でゲームを作りながらpropsとstateを使う公式のチュートリアルです。「チュートリアルのセットアップ」と「概要」の2節で1時間ほどです
  • Progate「React」は、ブラウザの中で書きながら進められる学習サイトです。最初のレッスンは無料会員の範囲で1時間ほどです
  • Next.js Learn「React Foundations」は、Reactがなぜ生まれたかを、素のJavaScriptと比べながら説明する英語の学習コースです
  • Noema「AI駆動開発で困らないためのTypeScript」は、propsの例に出てきた型の書き方を扱っています