React実践入門

第7回

はじめてのコンポーネント：名まえカードを作ろう

Reactのコンポーネントを初めて作る回。名まえカードを作りながら、関数コンポーネント・JSXのルール・波かっこで変数を表示する書き方を小学生向けに解説します。

·8分で読める
たける
たける 部品（コンポーネント）って、どうやって作るんですか？
りこ
りこ まずは「名まえカード」を作ってみよう。StackBlitzにコードを書いて、画面に出すところまでやるよ。

コンポーネントは「関数」で作る

Reactのコンポーネント（部品）は、関数というもので作ります。「関数」と聞くとむずかしそうですが、料理のレシピと同じです。

  • レシピ … 材料を受け取って → 料理を作る
  • コンポーネント … 情報を受け取って → 画面を作る

名まえカードのコード

まずはコード全体を見てください。こわくないです！

function NameCard() {
  return (
    <div>
      <h2>山田たける</h2>
      <p>好きなもの：サッカー⚽</p>
    </div>
  )
}

3つのパーツに分けて見てみましょう。

パーツ①：名前をつける

function NameCard() {
//       ^^^^^^^^
//       コンポーネントの名前。大文字ではじめるのがルール！

function（ファンクション）は「これは関数（部品）だよ」というしるし。そのあとに名前を書きます。名前は大文字ではじめるのがルールです。

パーツ②：画面に出したいものを書く

  return (
    <div>
      <h2>山田たける</h2>
      <p>好きなもの：サッカー⚽</p>
    </div>
  )

return（リターン）のあとに、画面に出したいものを書きます。<h2> や <p> のようなHTMLっぽいタグをそのまま書けます。これを JSX（ジェイ・エス・エックス） と呼びます。

パーツ③：{ から } まで

function NameCard() { で始まって、最後の } でおわり。これで1つのコンポーネントの完成です。

このコードを画面に出すと、こう見えます。

実行結果（実際の見た目）

山田たける

好きなもの：サッカー⚽

たける
たける なんとなく分かりました！でも `<div>` ってなんですか？
りこ
りこ 箱のこと。中に他のタグを入れる、とうめいな入れ物だよ。コンポーネントの中身は、1つの箱でまとめるルールがあるの。

JSXの3つのルール

JSXはHTMLに似ていますが、ちょっとだけちがうルールがあります。

ルール1：1つの箱でくるむ

// ❌ ダメ：箱が2つある
return (
  <h2>たける</h2>
  <p>サッカー</p>
)

// ✅ OK：<div> でくるんで1つにする
return (
  <div>
    <h2>たける</h2>
    <p>サッカー</p>
  </div>
)

ルール2：閉じタグを忘れない

HTMLでは <br> と書けますが、JSXでは <br /> のように、さいごをスラッシュで閉じます。

<br />
<img src="photo.jpg" />

ルール3：class は className と書く

CSSのクラスをつけるとき、HTMLでは class="..."、JSXでは className="..." です。

<div className="card">...</div>

{} で変数を表示する

JSXの中で { }（波かっこ）を使うと、変数の中身を表示できます。

function NameCard() {
  const myName = '山田たける'
  const myHobby = 'サッカー⚽'

  return (
    <div>
      <h2>{myName}</h2>
      <p>好きなもの：{myHobby}</p>
    </div>
  )
}

{myName} と書くと、変数 myName に入っている「山田たける」が表示されます。

計算もできます。

const age = 2026 - 2015   // 11

return <p>わたしは {age} 歳です</p>
// → 「わたしは 11 歳です」と表示される
実行結果（実際の見た目）

山田たける

好きなもの：サッカー⚽

わたしは 11 歳です

やってみよう

StackBlitzの App.jsx に NameCard を作って、myName や myHobby を自分の名前と好きなものに書きかえてみましょう。右のプレビューが、あなたのカードに変わります。

まとめ

  • コンポーネントは function で作る（名前は大文字から）
  • return のあとに、画面に出したいJSXを書く
  • JSXの3ルール：①1つの箱でくるむ ②閉じタグを忘れない ③class は className
  • { } の中に変数を書くと、その中身が表示される（計算もできる）

次の第8回では、このカードに外から情報をわたして、何枚もならべる方法（propsとmap）を学びます。自己紹介カード集（ミニ図鑑）を作りますよ。