React初心者サイト

propsとは

props（プロップス）は、コンポーネント間でデータを渡すための仕組みです。親コンポーネントから子コンポーネントに情報を渡すことで、同じコンポーネントでも異なるデータを表示できます。

📦 propsの流れを理解しよう

📚 ポイント:

propsは親コンポーネントから子コンポーネントに一方向で流れます
子コンポーネントはpropsを受け取るだけです（逆方向には流れません）
同じ親から異なるpropsを渡すことで、子コンポーネントをカスタマイズできます

📦 propsは「引っ越しの荷物」のようなもの

🏠 家の例えで理解しよう:

コンポーネント = 同じ設計図で作られた家（設計は同じ）
props = 引っ越しの荷物（中に入れる家具やインテリア）
実行結果 = 荷物を入れた後の家（中身が違えば見た目も変わる）

💡 つまり、同じコンポーネント（家）でも、props（荷物）が違えば、表示される内容（家具の配置）も変わります！

🍳 propsは「レシピと材料」のようなもの

🍳 料理の例えで理解しよう:

コンポーネント = レシピ（手順は決まっている）
props = 材料（使う食材が違う）
実行結果 = 完成した料理（材料が違えば料理も変わる）

💡 つまり、同じレシピ（コンポーネント）でも、使う材料（props）が違えば、できあがる料理（表示結果）も変わります！

💡 身近な例えで理解しよう

🏠 家と引っ越しの荷物: コンポーネントは「家の設計図」で、propsは「引っ越しの荷物」です。同じ設計の家でも、中に入れる家具（props）によって、異なる見た目や機能になります。

🍳 レシピと材料: コンポーネントは「レシピ」で、propsは「材料」です。同じレシピでも、使う材料（props）によって、異なる料理ができあがります。

🏪 お店の商品カード: コンポーネントは「カードのテンプレート」で、propsは「商品情報」です。同じデザインのカードでも、商品情報（props）が違えば、表示される内容も変わります。

📝 propsの特徴

読み取り専用: propsは変更できません（親コンポーネントから渡された値は変えられません）
一方向のデータフロー: 親コンポーネントから子コンポーネントに一方向でデータが流れます（逆方向には流れません）
再利用性の向上: propsを使うことで、同じコンポーネントを異なるデータで何度でも使えます

✅ 初心者へのアドバイス

最初は難しく感じるかもしれませんが、上記の例え（家、料理、お店）を思い出すと理解しやすくなります。 propsは「テンプレートに情報を入れる箱」のようなものだと考えると良いでしょう。

propsの基本的な使い方

propsを使うには、コンポーネントの関数の引数としてpropsを受け取り、JSX内で使用します。最初は難しく感じるかもしれませんが、段階的に理解していきましょう。

🎯 propsを使う3ステップ

コンポーネントを定義する時に、propsを受け取る引数を書く
コンポーネント内で、propsを使って表示内容を決める
コンポーネントを使う時に、propsとして値を渡す

📝 基本的なpropsの使い方

// コンポーネントの定義（propsを受け取る）
const Greeting = (props) => {
  return <h1>こんにちは、{props.name}さん！</h1>; // props.nameでpropsから値を取得
};

// コンポーネントの使用（propsを渡す）
const App = () => {
  return (
    <div>
      <Greeting name="太郎" /> // nameというpropsを渡す
      <Greeting name="花子" />
    </div>
  );
};

「Greeting」コンポーネントは「name」というpropsを受け取り、それを使って挨拶を表示します。同じコンポーネントでも、異なるpropsを渡すことで、異なる名前を表示できます。

📖 コードの読み方（初心者向け）:

const Greeting = (props) => {→ 「Greeting」という名前のコンポーネントを作成。propsを受け取る準備
{props.name}→ propsの中の「name」という値を使う
<Greeting name="太郎" />→ Greetingコンポーネントを使う。nameというpropsに「太郎」という値を渡す

✅ ポイント

propsを受け取るコンポーネントは、関数の引数としてpropsを定義します
propsを使うときは、props.名前の形式でアクセスします
propsを渡すときは、HTMLの属性のように<コンポーネント名属性名="値" />の形式で書きます

🎯 より便利な書き方: 構造化代入

propsを使うときは、構造化代入（分割代入）を使うと、コードがより読みやすくなります。

📝 通常の書き方

const Greeting = (props) => {
  // props.nameでpropsオブジェクトからnameを取得
  return <h1>こんにちは、{props.name}さん！</h1>;
};

毎回props.を書く必要があります

✅ 構造化代入を使った書き方（推奨）

// 構造化代入を使って、propsから直接nameを取り出す
const Greeting = ({ name }) => {
  // props.を書かずに、直接nameを使える
  return <h1>こんにちは、{name}さん！</h1>;
};

props.を書かずに、直接nameを使えます

実際の表示結果

名前:

こんにちは、太郎さん！

💡 propsで渡された名前が表示されます。名前を変更すると、表示も自動的に更新されます！

複数のpropsを渡す

1つのコンポーネントに複数のpropsを渡すこともできます。カンマで区切って複数の属性を指定します。

📝 複数のpropsを渡す例

// 複数のpropsを受け取るコンポーネント（構造化代入を使用）
const UserProfile = ({ name, age, job }) => {
  return (
    <div>
      <h2>{name}</h2> {/* name propsを表示 */}
      <p>年齢: {age}歳</p> {/* age propsを表示 */}
      <p>職業: {job}</p> {/* job propsを表示 */}
    </div>
  );
};

// 複数のpropsを渡す
const App = () => {
  return (
    <div>
      {/* 文字列は引用符、数値は中括弧で囲む */}
      <UserProfile name="山田太郎" age={25} job="エンジニア" />
      <UserProfile name="佐藤花子" age={30} job="デザイナー" />
    </div>
  );
};

数値や真偽値などのJavaScriptの式を渡す場合は、中括弧{}を使います。文字列の場合は、引用符で囲むか、中括弧で囲むか、どちらでも可能です。

💡 初心者へのヒント:

文字列はname="太郎"のように引用符で囲み、数値はage={25}のように中括弧で囲むと覚えておきましょう。

💡 propsの値の書き方

文字列: name="太郎"またはname="太郎"
数値: age=25（中括弧が必要）
真偽値: isActive=またはisActive（trueの場合は省略可能）
配列: items=abc
オブジェクト: user={ name: "太郎" }

実際の表示結果

名前:

年齢:

職業:

山田太郎

年齢: 25歳

職業: エンジニア

💡 複数のpropsを渡すことで、異なる情報を含むプロフィールを表示できます。値を変更して動作を確認してみましょう！

propsを使ったコンポーネントの再利用

propsの最大のメリットは、同じコンポーネントを異なるデータで何度でも使えることです。これにより、コードの重複を減らし、保守性を向上させることができます。

📝 商品カードの例

// 商品カードコンポーネント（再利用可能な設計）
const ProductCard = ({ name, price, description }) => {
  return (
    <div className="card">
      <h3>{name}</h3> {/* 商品名を表示 */}
      {/* toLocaleString()で数値を3桁区切りに */}
      <p className="price">¥{price.toLocaleString()}</p>
      <p>{description}</p> {/* 商品説明を表示 */}
    </div>
  );
};

// 商品リストコンポーネント
const ProductList = () => {
  return (
    <div>
      {/* 同じProductCardコンポーネントに異なるpropsを渡す */}
      <ProductCard 
        name="ノートPC" 
        price={98000} 
        description="高性能なノートパソコン" 
      />
      <ProductCard 
        name="マウス" 
        price={2500} 
        description="エルゴノミクスデザインのマウス" 
      />
      <ProductCard 
        name="キーボード" 
        price={8500} 
        description="メカニカルキーボード" 
      />
    </div>
  );
};

同じ「ProductCard」コンポーネントに異なるpropsを渡すことで、3つの異なる商品カードを表示できます。 propsを使わない場合、3つそれぞれのコンポーネントを書く必要があります。

✅ propsを使うメリット

コードの再利用性: 1つのコンポーネントを様々な場面で使えます
保守性の向上: コンポーネントの修正が1箇所で済みます
柔軟性: 異なるデータで同じコンポーネントを使えます
コードの可読性: コンポーネントの役割が明確になります

🏪 propsは「お店の商品カード」のようなもの

🏪 お店の例えで理解しよう:

コンポーネント = 商品カードのテンプレート（デザインは同じ）
props = 商品情報（商品名、価格、説明など）
実行結果 = 完成した商品カード（情報が違えば表示も変わる）

💡 つまり、同じテンプレート（コンポーネント）でも、商品情報（props）が違えば、表示されるカードの内容も変わります！

実際の表示結果

ノートPC

¥98,000

高性能なノートパソコン

マウス

¥2,500

エルゴノミクスデザインのマウス

キーボード

¥8,500

メカニカルキーボード

💡 同じProductCardコンポーネントに異なるpropsを渡すことで、異なる商品情報を表示できます。propsを使うことで、コンポーネントの再利用性が大幅に向上します！

propsのデフォルト値

propsにデフォルト値を設定することで、propsが渡されなかった場合でも、コンポーネントが正しく動作するようにできます。

🎯 デフォルト値の例え

デフォルト値は「お店のメニューに書いてある標準的な注文」のようなものです。

メニューの例: 「カレーライス（標準: 辛さ普通）」というメニューがあるとします。お客さんが「辛さ」を指定しなければ、標準の「普通」が使われます。
propsの例: text="クリック"というデフォルト値を設定すれば、propsを渡さなくても「クリック」というボタンが表示されます。

📝 デフォルト値の設定方法

// デフォルト値付きのコンポーネント
// text="クリック"とcolor="blue"がデフォルト値
const Button = ({ text = "クリック", color = "blue" }) => {
  return (
    // テンプレートリテラルを使ってクラス名を動的に生成
    <button className={`btn btn-${color}`}>
      {text}
    </button>
  );
};

// デフォルト値を使う（propsを渡さない）
const App1 = () => {
  // propsを渡さないので、デフォルト値（"クリック"、"blue"）が使われる
  return <Button />;
};

// propsを渡す
const App2 = () => {
  return (
    <div>
      {/* デフォルト値を上書きして、異なるテキストと色を指定 */}
      <Button text="購入する" color="green" />
      <Button text="削除" color="red" />
    </div>
  );
};

関数の引数に= 値を書くことで、デフォルト値を設定できます。 propsが渡されなかった場合、デフォルト値が使われます。

📖 デフォルト値の書き方（初心者向け）:

text = "クリック"→ 「text」というpropsのデフォルト値を「クリック」に設定
<Button />→ propsを渡さない場合、「クリック」というボタンが表示される
<Button text="購入する" />→ propsを渡した場合、デフォルト値ではなく「購入する」が表示される

⚠️ 注意点

propsがundefinedの場合のみ、デフォルト値が使われます
nullやfalseを渡した場合は、デフォルト値は使われません

実際の表示結果

ボタンのテキスト:

ボタンの色:

💡 propsでテキストや色などの属性を変更することで、同じコンポーネントを異なる見た目や機能で使えます！

📚 例題

実際にpropsを使ってコンポーネントを作成してみましょう。

例題1: 挨拶コンポーネント

「name」というpropsを受け取り、「こんにちは、[name]さん！」と表示する「Greeting」コンポーネントを作成してください。

const Greeting = ({ name }) => {
  return <h1>こんにちは、{name}さん！</h1>;
};

// 使用例
const App = () => {
  return (
    <div>
      <Greeting name="太郎" />
      <Greeting name="花子" />
    </div>
  );
};

例題2: ユーザープロフィールコンポーネント

「name」「age」「job」というpropsを受け取り、ユーザー情報を表示する「UserProfile」コンポーネントを作成してください。

const UserProfile = ({ name, age, job }) => {
  return (
    <div>
      <h2>{name}</h2>
      <p>年齢: {age}歳</p>
      <p>職業: {job}</p>
    </div>
  );
};

// 使用例
const App = () => {
  return (
    <div>
      <UserProfile name="山田太郎" age={25} job="エンジニア" />
    </div>
  );
};

例題3: カスタマイズ可能なボタンコンポーネント

「text」と「color」というpropsを受け取り、カスタマイズ可能な「Button」コンポーネントを作成してください。「text」のデフォルト値は「クリック」、「color」のデフォルト値は「blue」にしてください。

const Button = ({ text = "クリック", color = "blue" }) => {
  return (
    <button className={`btn btn-${color}`}>
      {text}
    </button>
  );
};

// 使用例
const App = () => {
  return (
    <div>
      <Button />
      <Button text="購入する" color="green" />
      <Button text="削除" color="red" />
    </div>
  );
};

まとめ

🎯 覚えておきたい3つのポイント

propsは「データを渡す箱」: 親コンポーネントから子コンポーネントに情報を渡すための仕組みです。
同じコンポーネント、異なるデータ: propsを使うことで、同じコンポーネントを異なるデータで何度でも使えます（家に例えると、同じ設計の家に異なる家具を入れるようなもの）。
デフォルト値で柔軟性を向上: デフォルト値を設定することで、propsが渡されなくてもコンポーネントが正しく動作します（メニューの標準注文のようなもの）。

propsの基本的な使い方: コンポーネント間でデータを渡すための仕組みです。

構造化代入: const Greeting = ({ name }) => {}のように書くと、コードがより読みやすくなります。

複数のprops: カンマで区切って複数のpropsを渡すことで、より柔軟なコンポーネントを作成できます。

💪 次のステップ

propsの基本的な使い方を理解できたら、実際にコードを書いて練習してみましょう。例題に挑戦して、propsを使ったコンポーネントを作成してみてください。最初は難しく感じるかもしれませんが、繰り返し練習することで必ず理解できるようになります！

← 前のレッスン: コンポーネントの作成レッスン一覧に戻る次のレッスン: イベントハンドリング →