こんにちは。フロントエンドの世界へようこそ。
Reactを学び始めたばかりの頃って、新しい概念が次々と押し寄せてきて、少し不安になることもありますよね。でも、安心してください。今日お話しする「Props（プロップス）」という概念は、Reactという広大な海を渡るための「羅針盤」のようなものです。

一度コツを掴んでしまえば、「なんだ、そういうことか！」と視界がパーッと開ける瞬間が必ず訪れます。肩の力を抜いて、一緒に見ていきましょう。

—

Propsは「親から子へのお手紙」

Reactのコンポーネント（部品）は、まるで「小さなお店」の集まりです。
例えば、あなたが「メニュー表」を作るコンポーネントを作ったとしましょう。でも、お店によってメニューの内容は違いますよね？

そこで登場するのが Props です。
Propsは、親コンポーネントから子コンポーネントへ渡す「指示書」や「材料」のようなもの。専門的な言葉で言えば「プロパティ（Properties）」の略ですが、現場ではシンプルに「親から渡されるデータ」と覚えておけば間違いありません。

視覚的なイメージ：お買い物の流れ

あなたは「お弁当箱」というコンポーネントを作りました。

• 親（お母さん）：お弁当箱に「唐揚げ」と「卵焼き」を入れる。
• 子（お弁当箱）：渡されたものを受け取って、きれいに詰める。

このとき、お母さんがお弁当箱に渡した「唐揚げ」や「卵焼き」が、まさにPropsです。お弁当箱は、中身を自分で勝手に決めるのではなく、お母さんから渡されたものに従って中身を作りますよね。これがReactにおける「単方向データフロー（データは上から下へ流れる）」という鉄則です。

—

「読み取り専用」という絶対ルール

ここが一番大切で、かつ初心者が一番つまずきやすいポイントです。
ReactのPropsには「読み取り専用（イミュータブル）」という絶対的なルールがあります。

どういうことかと言うと、「子コンポーネントは、受け取ったPropsを勝手に書き換えてはいけない」ということです。

もし、お弁当箱が勝手に「唐揚げをハンバーグに変えちゃおう！」と中身をいじり始めたらどうでしょう？ お母さんはビックリしてしまいますよね。Reactの世界も同じで、データを勝手に書き換えてしまうと、画面全体が「あれ？今何が起きてるの？」と混乱してしまい、バグの温床になります。

「Propsはあくまで『もらったもの』。そのまま使うか、表示を変えるためだけに使う。決して加工してはいけない。」

このルールを守るだけで、あなたのコードの品質は劇的に安定します。

—

実際に書いてみよう

さあ、理屈はこれくらいにして、コードを見てみましょう。React開発で最も標準的な書き方です。

// 子コンポーネント：メニューを表示するだけのお仕事
function MenuItem(props) {
// propsは「読み取り専用」です。
// props.name = “勝手に変更”; // ← これは絶対にやってはいけない禁じ手！

return (

);
}

// 親コンポーネント：子にデータを渡す
function App() {
return (

);
}

ポイント解説

1. 受け取り方: `MenuItem(props)` のように引数として受け取ります。
2. 使い方: `{props.name}` のように、中括弧 `{ }` で囲むだけでHTMLの中にデータを埋め込めます。
3. データ型: 文字列は `” “` で囲みますが、数字の `800` のように数字を渡すときは `{800}` と中括弧を使うのがお約束です。

—

つまずいたときは「手紙」を思い出して

もし、画面がうまく動かなかったり、データが反映されなかったりしたら、こう考えてみてください。

• 「親から正しくデータは渡されているかな？」
• 「子コンポーネントで、受け取った名前と一致する名前を使っているかな？」
• 「もしかして、Propsの中身を書き換えようとしていないかな？」

Reactは非常に論理的です。Propsという「手紙」が、親から子へしっかりと届いているかを確認するだけで、ほとんどの問題は解決します。

最初は誰だって迷います。でも、一つずつ丁寧にコードを書いていけば、必ず自分の指先がReactの作法を覚えてくれます。焦らず、楽しみながら進んでいきましょうね。

また何かあったら、いつでも相談してください。あなたのフロントエンドライフを心から応援しています！