LESSON 03 · 約25分

Reactの部品・JSX・props

小さなUIを関数に分け、データを渡して使い回します。

コードを試す前に

まずはコードを読んで考えましょう。Next.jsのコードを実行する演習は、05で環境を作ってから戻って試せます。02の通常のJavaScriptはブラウザーのコンソールでも実行できます。

短い学習用の例です。各例は段階ごとの独立した例であり、全コードを一つのプロジェクトへ順に上書きして完成する形式ではありません。必要なファイル・依存関係・前提条件は注記に記載しています。

開発環境の準備を確認する →

このレッスンでわかること

JSXを返すコンポーネントを書ける
propsで親から子にデータを渡せる

画面を小さな責任に分ける

コンポーネントは、表示のまとまりを表す関数です。名前は大文字で始めます。最初から細かく分けすぎず、繰り返す部分や役割が明確な部分から切り出しましょう。まず固定データで画面を作ると、構造を考えやすくなります。

JSXはJavaScriptの中で使うUIの記法

HTMLに似ていますが、classではなくclassNameを使い、タグを閉じ、複数の要素は一つの親かフラグメントで包みます。波括弧の中ではJavaScriptの値や式を使えます。

propsは部品への入力

親が渡した値を子が受け取ります。propsを直接書き換えず、受け取った値から表示を作りましょう。一覧をmapで描くときのkeyは、兄弟の中で安定して識別できるIDを選びます。

propsと一覧表示

app/page.jsx

const topics = [
  { id: 'react', title: 'React', minutes: 25 },
  { id: 'routing', title: 'ルーティング', minutes: 20 },
]

function LessonCard({ title, minutes }) {
  return <li>{title}・{minutes}分</li>
}

export default function Page() {
  return (
    <ul>
      {topics.map((topic) => (
        <LessonCard key={topic.id} {...topic} />
      ))}
    </ul>
  )
}

{...topic}はオブジェクト内の値をpropsとして渡す記法です。

TRY IT YOURSELF

学習カードを増やす

LessonCardにlevelというpropsを追加する
親の配列からlevelを渡す
カードに難易度を表示する

できたらOK：同じ部品で異なる内容のカードを3枚表示できる

QUICK CHECK

理解を確かめよう

公式資料でもう少し詳しく

ここまで読めたら、ひとつ前進。