Next.js/React初心者が混乱する「dataはどこから来るの？」をPropsで理解する

01

dataはどこから来るの？

Next.jsのコードを勉強していると、次のようなコンポーネントを見かけることがあります。

function Article({ data }) {
  return (
    <article>
      <h2>{data.title}</h2>
      <p>{data.description}</p>
    </article>
  );
}

このコードだけを見ると、 dataが突然現れたように見えます。

?

このdataは、どこで作られたの？

Article関数の中ではdataを作っていません。
importもしていません。
それなのに、なぜdata.titleを表示できるのでしょうか。

答えは、 Articleコンポーネントを呼び出している親コンポーネントから渡されている です。

<Article data={data} />

Reactでは、このようにコンポーネントへ値を渡す仕組みを Propsと呼びます。

✿

子コンポーネントに突然dataが生まれたのではなく、
親コンポーネントがPropsとしてdataを渡しています。

02

Propsとは？

Propsは、 親コンポーネントから子コンポーネントへ値を渡す仕組み です。

Props

コンポーネントへ渡される値

HTMLタグの属性に少し似ていますが、文字列だけでなく、数値、真偽値、配列、オブジェクト、関数、JSXなども渡せます。

例えば、通常のHTMLでは画像タグへ srcやaltを指定します。

<img
  src="/images/photo.jpg"
  alt="記事の写真"
/>

Reactのコンポーネントでも、見た目の似た書き方で値を渡せます。

<Article
  title="Propsの基本"
  description="値の渡し方を解説します"
/>

Props名

渡している値

title

"Propsの基本"

description

"値の渡し方を解説します"

POINT

JSXでコンポーネントへ付けた属性が、子コンポーネントではPropsとして受け取られます。

03

親と子のコンポーネントとは？

Propsを理解するためには、親コンポーネントと子コンポーネントの関係を確認すると分かりやすくなります。

function BlogPage() {
  return (
    <main>
      <h1>ブログ</h1>
      <Article />
    </main>
  );
}

このコードでは、 BlogPageの中で Articleを使用しています。

親コンポーネント BlogPage

中で呼び出す <Article />

↓

子コンポーネント Article

呼び出す側が親コンポーネント、呼び出される側が子コンポーネントです。

PARENT 親コンポーネント

値を用意して、子へ渡します。

CHILD 子コンポーネント

受け取った値を使って画面を作ります。

04

最初のdataはどこで作られる？

子コンポーネントへ渡す前に、親コンポーネント側で元になるdataを用意します。

まずは、親コンポーネントの中でオブジェクトを作る簡単な例を見てみます。

function BlogPage() {
  const data = {
    title: "Propsの基本",
    description:
      "親から子へ値を渡す仕組みです",
  };

  return <main>ブログ</main>;
}

ここでのdataは、通常のJavaScriptの変数です。

親コンポーネントにある変数 data

{
  title: "Propsの基本",
  description:
    "親から子へ値を渡す仕組みです"
}

変数名は必ずdataでなければならないわけではありません。

const article = {
  title: "Propsの基本",
  description:
    "親から子へ値を渡す仕組みです",
};

初心者メモ

dataはReactが特別に用意する予約語ではありません。開発者が付けた普通の変数名です。

05

Articleへdataを渡す

親コンポーネントで作ったdataを、 Articleコンポーネントへ渡します。

function BlogPage() {
  const data = {
    title: "Propsの基本",
    description:
      "親から子へ値を渡す仕組みです",
  };

  return (
    <main>
      <Article data={data} />
    </main>
  );
}

特に混乱しやすいのが、次の一行です。

左側のdata Propsの名前

右側のdata 親にある変数

左側と右側は、同じ文字でも役割が違います。

左側 data= 子へ渡すときの名前

右側 {data} 実際に渡す変数

Props名と変数名を変えると、役割の違いがさらに分かりやすくなります。

const article = {
  title: "Propsの基本",
};

return (
  <Article data={article} />
);

この場合は、親のarticleという変数を、子にはdataというProps名で渡しています。

06

子コンポーネントでdataを受け取る

親から渡されたPropsは、子コンポーネントの関数の引数として受け取れます。

propsオブジェクトとして受け取る

function Article(props) {
  return (
    <article>
      <h2>{props.data.title}</h2>
      <p>{props.data.description}</p>
    </article>
  );
}

親でdata={data}と渡したため、子ではprops.dataに値が入ります。

子が受け取るpropsの中身

{
  data: {
    title: "Propsの基本",
    description:
      "親から子へ値を渡す仕組みです"
  }
}

分割代入でdataだけを受け取る

よく使われるのが、関数の引数で分割代入する書き方です。

function Article({ data }) {
  return (
    <article>
      <h2>{data.title}</h2>
      <p>{data.description}</p>
    </article>
  );
}

分割代入しない props.data.title

→

分割代入する data.title

POINT

function Article({ data })の波括弧は、Propsの中からdataだけを取り出す分割代入です。

07

値が移動する流れを図で確認

ここまでのコードを、 dataが移動する順番で整理します。

STEP 1 親でdataを作る const data = {...}

↓

STEP 2 Propsとして渡す <Article data={data} />

↓

STEP 3 子で受け取る function Article({ data })

↓

STEP 4 画面に表示する {data.title}

すべてを一つのコードで確認

function BlogPage() {
  const data = {
    title: "Propsの基本",
    description:
      "親から子へ値を渡す仕組みです",
  };

  return (
    <main>
      <Article data={data} />
    </main>
  );
}

function Article({ data }) {
  return (
    <article>
      <h2>{data.title}</h2>
      <p>{data.description}</p>
    </article>
  );
}

✿

dataは子コンポーネントの中で突然作られたのではなく、
親で作られ、Propsを通って子へ届いています。

08

オブジェクトをPropsで渡す

ブログ記事のように、複数の情報をまとめて渡したい場合はオブジェクトをPropsにすると便利です。

const data = {
  id: "article-01",
  title: "Propsの基本",
  description:
    "親から子へ値を渡します",
  publishedAt: "2026-07-16",
};

親では、このオブジェクトを一つのPropsとして渡します。

<Article data={data} />

子では、受け取ったオブジェクトのプロパティを使います。

function Article({ data }) {
  return (
    <article>
      <h2>{data.title}</h2>
      <p>{data.description}</p>
      <time>{data.publishedAt}</time>
    </article>
  );
}

data.title 記事タイトル

data.description 記事の説明

data.publishedAt 公開日

09

値を個別にPropsで渡す方法

オブジェクトをまとめて渡さず、値を個別のPropsとして渡すこともできます。

<Article
  title="Propsの基本"
  description="親から子へ値を渡します"
  publishedAt="2026-07-16"
/>

function Article({
  title,
  description,
  publishedAt,
}) {
  return (
    <article>
      <h2>{title}</h2>
      <p>{description}</p>
      <time>{publishedAt}</time>
    </article>
  );
}

まとめて渡す <Article data={data} />

記事データを一つのまとまりとして扱いやすい方法です。

個別に渡す <Article title={...} />

子が必要とする値を明示しやすい方法です。

どちらが必ず正しいというわけではありません。コンポーネントの役割やデータの大きさに応じて選びます。

10

TypeScriptでPropsに型を付ける

TSXでは、Propsにどのような値が渡されるのかを TypeScriptの型として定義できます。

記事データの型を作る

type ArticleData = {
  id: string;
  title: string;
  description: string;
  publishedAt: string;
};

Propsの型を作る

type ArticleProps = {
  data: ArticleData;
};

子コンポーネントへ型を付ける

type ArticleData = {
  id: string;
  title: string;
  description: string;
  publishedAt: string;
};

type ArticleProps = {
  data: ArticleData;
};

export default function Article({
  data,
}: ArticleProps) {
  return (
    <article>
      <h2>{data.title}</h2>
      <p>{data.description}</p>
      <time>{data.publishedAt}</time>
    </article>
  );
}

1 必要な値が分かる

Articleにはdataが必要だと確認できます。

2 値の種類が分かる

titleは文字列など、データ形式が明確になります。

3 間違いを発見できる

不足した値や違う型をエディターが知らせます。

11

microCMSのdataはどこから来る？

Next.jsとmicroCMSを組み合わせた場合、親コンポーネントにあるdataは、 microCMSのAPIから取得した結果であることが多いです。

microCMS 記事を登録

›

Next.js APIで取得

›

親 data変数へ入る

›

子 Propsで受け取る

microCMSから記事を取得する

import { createClient } from "microcms-js-sdk";

export type ArticleData = {
  id: string;
  title: string;
  description: string;
  publishedAt: string;
};

const client = createClient({
  serviceDomain:
    process.env.MICROCMS_SERVICE_DOMAIN!,
  apiKey:
    process.env.MICROCMS_API_KEY!,
});

export const getArticle = async (
  contentId: string
) => {
  return client.getListDetail<ArticleData>({
    endpoint: "blogs",
    contentId,
  });
};

ページで取得してArticleへ渡す

import Article
  from "@/components/Article";

import { getArticle }
  from "@/libs/microcms";

type Props = {
  params: Promise<{
    id: string;
  }>;
};

export default async function BlogPage({
  params,
}: Props) {
  const { id } = await params;

  const data = await getArticle(id);

  return (
    <main>
      <Article data={data} />
    </main>
  );
}

Articleで受け取って表示する

import type {
  ArticleData,
} from "@/libs/microcms";

type Props = {
  data: ArticleData;
};

export default function Article({
  data,
}: Props) {
  return (
    <article>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
      <time>{data.publishedAt}</time>
    </article>
  );
}

APIから返った記事 const data = await getArticle(id)

↓

Articleへ渡す <Article data={data} />

↓

Articleで受け取る function Article({ data })

dataの正体

microCMSを使う場合のdataは、 APIから返ってきた記事データを入れた変数です。

12

記事一覧でPropsを使う

microCMSから複数の記事を取得した場合は、 map()で一件ずつArticleへ渡せます。

export default async function BlogPage() {
  const data = await getArticles();

  return (
    <main>
      {data.contents.map((article) => (
        <Article
          key={article.id}
          data={article}
        />
      ))}
    </main>
  );
}

このコードには、 dataに関連する名前が複数出てきます。

data microCMSのレスポンス全体

data.contents 記事オブジェクトの配列

article 繰り返し中の一件の記事

data={article} 一件の記事をdataというProps名で渡す

記事一覧

記事A

記事B

記事C

→

13

Propsでよくあるつまずき

CHECK 01 Props名が一致していない

親 <Article data={article} />

≠

子 function Article({ item })

親でdataという名前を付けた場合、子でもdataとして受け取ります。

CHECK 02 波括弧を付け忘れている

文字列を直接渡す title="記事タイトル"

変数を渡す title={title}

JavaScriptの変数やオブジェクトを渡す場合は、波括弧を使用します。

CHECK 03 props.dataとdataを混同している

// propsとして受け取る
function Article(props) {
  return <h2>{props.data.title}</h2>;
}

// 分割代入で受け取る
function Article({ data }) {
  return <h2>{data.title}</h2>;
}

CHECK 04 存在しないプロパティを表示している

const data = {
  title: "Propsの基本",
};

// data.descriptionは存在しない
<p>{data.description}</p>

CHECK 05 Propsを書き換えようとしている

Propsは親から受け取る読み取り専用の値として扱います。子側で直接変更しません。

// 子で直接変更しない
data.title = "別のタイトル";

CHECK 06 keyを通常のPropsとして読もうとしている

keyはReactが一覧管理に使う特別な値で、子コンポーネントへ通常のPropsとして渡されません。

<Article
  key={article.id}
  articleId={article.id}
  data={article}
/>

✿

Propsで迷ったときは、
親で付けた名前・実際に渡した値・子で受け取る名前を順番に確認すると整理しやすくなります。

14

Propsの流れをもう一度整理

1．データを取得・作成 const data = …

親コンポーネントに、子へ渡したい値を用意します。

↓

2．Props名を付けて渡す <Article data={data} />

左側がProps名、右側が実際に渡す変数です。

↓

3．子で受け取る function Article({ data })

Propsオブジェクトから dataを分割代入しています。

↓

4．表示に使用 {data.title}

受け取った値を使ってコンポーネントの画面を作ります。

15

まとめ：dataは親からPropsで渡されている

function Article({ data })に出てくるdataは、 Articleコンポーネントの中で突然作られた値ではありません。

親コンポーネントが、 <Article data={data} />と書いて Propsとして渡した値です。

今回覚えておきたいこと

Propsは親コンポーネントから子へ値を渡す仕組み
dataはReactの予約語ではなく普通の変数名
<Article data={data} />の左側はProps名
右側の{data}は親にある変数
子では関数の引数としてPropsを受け取る
function Article({ data })は分割代入
microCMSの場合、dataはAPIの取得結果であることが多い
Propsは子側で直接書き換えない

最後に、この流れを覚えておきます

function BlogPage() {
  const data = {
    title: "Propsの基本",
    description:
      "親から子へ値を渡します",
  };

  return (
    <Article data={data} />
  );
}

function Article({ data }) {
  return (
    <article>
      <h2>{data.title}</h2>
      <p>{data.description}</p>
    </article>
  );
}

最初は、同じdataという名前が何度も出てくるため、値がどこから来たのか分かりにくく感じます。

けれど、「親で作る」「Propsとして渡す」「子で受け取る」という順番に分けると、コードの流れが見えやすくなりました。

Next.js・microCMS初心者の学習記録 dataは突然現れたのではなく、
親コンポーネントからPropsで届いています。

Draft-LAB「D-ラボ」