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

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

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

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

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

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

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

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

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

Reactも同じです。

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

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

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

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

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

たとえば、クラスのみんなの紹介カードを3枚ならべたいとします。Reactを使わないと、にたような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はみんなが使っている

Reactはとても人気があって、有名なアプリもたくさん使っています。

みんなが毎日見ているアプリの裏側で、Reactが動いているのです。

たける Instagramも！じゃあ、ぼくもいつかあんなのが作れるんですか？

りこ なれるよ。最初は小さな部品から。次回、いよいよブラウザでReactを動かしてみよう。

まとめ

• ウェブサイトは「コンポーネント（部品）」の組み合わせでできている
• Reactは、その部品を作って組み合わせるための道具（レゴと同じ考え方）
• 部品を1回作れば、何回でも使い回せる
• Instagram・Netflixなど、有名なアプリもReactを使っている

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