Reactってなに？ウェブサイトをブロックで作ろう

たける Reactってよく聞くけど、けっきょく何なんですか？

りこ レゴブロックは知ってる？Reactは、ウェブサイトをレゴみたいな「部品」で組み立てる道具なの。

ウェブサイトは「部品」の組み合わせ

YouTubeでも、ゲームのサイトでも、画面をよーく見ると、いくつかの「部品（ブロック）」が組み合わさってできています。

ヘッダー・カード・フッター。これが全部「部品」です。

レゴブロックと同じ考え方

レゴを思い出してください。

• ブロックをひとつひとつ作って
• それを組み合わせて、家や車を作る

Reactも同じです。

• コンポーネント（部品）をひとつひとつ作って
• それを組み合わせて、ウェブサイトを作る

この「コンポーネント」が、Reactでの「ブロック」の名前です。

たける コンポーネント＝部品。でも、なんでわざわざ部品にするんですか？

りこ 同じ部品を何度でも使い回せるから。カードを100枚ならべたいとき、1個作れば100回使える。

同じものを「何回も書く」のは大変

たとえば、クラスのみんなの紹介カードを3枚ならべたいとします。手書きのHTMLだけで並べると、にた形を何回も書くことになります。

<!-- Reactなし：同じ形を何回も書く -->
<div class="card"><h2>たける</h2><p>サッカー</p></div>
<div class="card"><h2>はるか</h2><p>ダンス</p></div>
<div class="card"><h2>ゆな</h2><p>読書</p></div>
<!-- これが100人分続く…😵 -->

Reactを使うと、カードの「型」を1回だけ作って、あとはデータをならべるだけです。

// Reactあり：カードの「型」を1回作る
function NameCard({ name, hobby }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{hobby}</p>
    </div>
  )
}
// あとはデータを入れて使い回すだけ（100人でもこの型は同じ）

画面に出る見た目は、こうなります。

1個の「型」から、何枚でも同じ形のカードを作れます。これがReactの便利なところです。

Reactを使わない選択もある

3枚の固定カードだけなら、HTMLとCSSでも作れます。JavaScriptで繰り返し表示する方法もあります。Reactだけが再利用できる道具というわけではありません。

このシリーズでは、同じカードを使い回し、ボタンで変わる状態を組み合わせる練習としてReactを使います。まずは小さな部品を作り、何が共通で何が違うかを自分で説明してみましょう。

まとめ

• ウェブサイトは「コンポーネント（部品）」の組み合わせでできている
• Reactは、その部品を作って組み合わせるための道具（レゴと同じ考え方）
• 部品を1回作れば、何回でも使い回せる
• 固定ページならHTMLでも作れる。Reactでは部品と状態を組み合わせる練習をする

次の第6回では、いよいよ StackBlitz を使って、ブラウザの中でReactを動かします。「動いた！」をいっしょに体験しましょう。

確認してみる

カード3枚で、共通の形と別々の情報を指さしてみる。色を共通で変える作業と、名前を別々に変える作業を分ける。

仕様・手順の参照先