【入門編】コンポーネントへのPropsの受け渡し構文 – React実践ガイド

Propsによるデータの受け渡し（チルドレン属性、コンポーネントへの型付け）

2026.09.16

やあ、Reactの世界へようこそ！フロントエンドの最前線でコードを書き続けている僕から、一つだけ最初に伝えておきたいことがあるんだ。

Reactで一番最初につまずきやすい場所、それが「Props（プロップス）」なんだよね。公式ドキュメントを見ると「コンポーネントにデータを渡すインターフェース」なんて書いてあるけれど、そんな堅苦しい言葉は今日でおしまい。

今日は、Reactという「部品屋さん」で、「どうやって部品に情報を伝えて、組み立てるのか」という、もっとも楽しくて大切な話をしよう。

—

想像してみてほしい。あなたは今、自分好みの「特製ハンバーガー」を作る店長さんだ。
お客さん（親コンポーネント）が、「チーズは入れてね」「ソースは多めで！」と注文書を渡してくれるよね。

ReactにおけるPropsとは、まさにこの「注文書」のことなんだ。
コンポーネントという「調理器具」に対して、どんな具材（データ）を使ってほしいかを伝えるための仕組みだよ。

まずは一番簡単なやり方を見てみよう。ダブルクォーテーションで囲むと、それは「ただの文字列」としてコンポーネントに届くよ。

// 部品（コンポーネント）の定義
function Burger({ topping }) {
return

今日のトッピングは「{topping}」です！

;
}

// 使う側（親）
function App() {
// 文字列の時は、そのままポンと渡すだけ
return ;
}

「あれ、なんで `topping` を波括弧で囲んでいるの？」って思ったかな？
これは「注文書から中身を取り出す」ための儀式みたいなもの。難しく考えず、「おっ、ここから先は注文内容が入っているぞ」という合図だと思ってね。

さて、次は少し応用編。数値や、計算結果、あるいは変数そのものを渡したいときはどうする？
そんなときは、波括弧 `{ }` を使うんだ。これは「JavaScriptの魔法の箱」だと思ってほしい。

function PriceTag({ price }) {
return

価格は {price} 円です

;
}

function App() {
const discount = 500;

// 数字や変数を渡すときは必ず波括弧！
// これがないと、Reactはただの文字列として扱っちゃうから注意してね
return ;
}

この波括弧の中では、JavaScriptの計算式が自由に書ける。これこそがReactの真骨頂。静かな画面が、この波括弧のおかげで「動くプログラム」に変わる瞬間なんだ。

実務で一番よく使うテクニックがこれ。
例えば、トッピングが10個も20個もあるとき、全部 `` って書くのは面倒だよね？

そんなときは、スプレッド演算子（`…`）の出番だ。これは「このカバンの中身を全部、一気に渡してくれ！」という魔法の呪文なんだ。

function Burger(props) {
// ここには { cheese: true, onion: false, sauce: “BBQ” } がまとめて入ってくる
return

チーズ: {props.cheese ? “あり” : “なし”}

;
}

function App() {
const order = { cheese: true, onion: false, sauce: “BBQ” };

// …order と書くことで、中身をバラして一気に渡せる
// つまりと書くのと同じ！
return ;
}

この「丸投げ」ができるようになると、コードの見た目が劇的にスッキリするよ。

—

初心者の頃、僕もよくこれで悩んだから大丈夫。みんな通る道だよ。

もし「チーズ追加」というフラグを立てたいとき、`` と書くと、それは「文字列の”true”」になっちゃう。「真偽値（boolean）のtrue」を渡したいときは、必ず `` と波括弧を使ってね。これ、本当に多い間違いなんだ。

Propsの名前は、その部品が「何を受け取るか」を明確にしよう。`data1` とかじゃなくて、`userName` とか `isLoggedIn` みたいに、見ただけで中身が想像できる名前をつけるのが、プロへの第一歩だよ。

—

Propsの受け渡しをマスターすることは、大きな画面を小さな部品に分けて、それを綺麗に組み立てていく「パズル」のスキルを身につけることと同じなんだ。

最初はうまくいかなくても、全然平気。
エラーが出たら「あ、注文書の書き方を間違えたかな？」って、一つずつ確認していけばいいんだよ。

もし分からないことがあっても、それはあなたが新しいスキルを学んでいる証拠。焦らず、一歩ずつ進んでいこう。僕も最初は、波括弧とダブルクォーテーションの使い分けだけで、一日中悩んでいたんだから。

それじゃあ、また現場で会おう。君の書くコードが、誰かをワクワクさせるものになりますように！