React Props完全ガイド！初心者でもわかるpropsの基本から実践

2025年8月4日

はじめに

Reactアプリケーションを開発する上で、コンポーネント間でのデータのやり取りは必須の機能です。
この重要な役割を担うのがpropsという仕組みです。

本記事では、React初学者の方でも理解できるよう、propsの基本概念から実際の使用方法まで、具体的なサンプルコードとともに詳しく解説していきます。

propsを正しく理解することで、再利用可能で保守性の高いReactコンポーネントを作成できるようになります。

propsとは？

props（プロップス）は「properties」の略称で、Reactコンポーネント間でデータを受け渡しするための仕組みです。

propsの特徴

親から子への一方向データ流れ：親コンポーネントが子コンポーネントにデータを渡す
読み取り専用：子コンポーネント内でpropsの値を直接変更することはできない
任意のデータ型対応：文字列、数値、オブジェクト、配列、関数など様々な型のデータを渡せる

HTMLの属性との比較

propsはHTMLの属性に似ていますが、より柔軟で強力です

// HTML属性の例
<img src="image.jpg" alt="説明文" width="300" />

// React propsの例
<UserCard 
  name="田中太郎" 
  age={30} 
  hobbies={['読書', '映画鑑賞']} 
  onButtonClick={handleClick}
/>

propsの基本的な使い方

propsを渡す（親コンポーネント側）

親コンポーネントから子コンポーネントにpropsを渡す基本的な構文は次の通りです

// 親コンポーネント
function App() {
  return (
    <div>
      <WelcomeMessage 
        userName="山田花子"
        isLoggedIn={true}
        loginTime="10:30"
      />
    </div>
  );
}

propsを受け取る（子コンポーネント側）

子コンポーネントでpropsを受け取る方法は2つあります

方法1: 分割代入を使用

function WelcomeMessage({ userName, isLoggedIn, loginTime }) {
  return (
    <div>
      {isLoggedIn ? (
        <h2>おかえりなさい、{userName}さん！</h2>
      ) : (
        <h2>ログインしてください</h2>
      )}
      <p>ログイン時刻: {loginTime}</p>
    </div>
  );
}

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

function WelcomeMessage(props) {
  return (
    <div>
      {props.isLoggedIn ? (
        <h2>おかえりなさい、{props.userName}さん！</h2>
      ) : (
        <h2>ログインしてください</h2>
      )}
      <p>ログイン時刻: {props.loginTime}</p>
    </div>
  );
}

推奨： 通常は方法1の分割代入を使用することが推奨されます。コードがより簡潔で読みやすくなります。

実践的なサンプルコード

ここでは、商品カードを表示するコンポーネントを例に、実際の開発でよく使用されるpropsの活用方法を見てみましょう。

商品カードコンポーネント

// 商品カードコンポーネント
function ProductCard({ product, onAddToCart, showDiscount = false }) {
  const { name, price, description, imageUrl, discountRate } = product;
  
  const discountedPrice = showDiscount && discountRate 
    ? price * (1 - discountRate / 100)
    : price;

  return (
    <div className="product-card">
      <img src={imageUrl} alt={name} />
      <h3>{name}</h3>
      <p>{description}</p>
      
      <div className="price-section">
        {showDiscount && discountRate ? (
          <>
            <span className="original-price">¥{price.toLocaleString()}</span>
            <span className="discounted-price">¥{discountedPrice.toLocaleString()}</span>
          </>
        ) : (
          <span className="price">¥{price.toLocaleString()}</span>
        )}
      </div>
      
      <button onClick={() => onAddToCart(product)}>
        カートに追加
      </button>
    </div>
  );
}

親コンポーネントでの使用例

// 親コンポーネント
function ProductList() {
  const products = [
    {
      id: 1,
      name: "ワイヤレスイヤホン",
      price: 8980,
      description: "高音質Bluetooth対応イヤホン",
      imageUrl: "https://example.com/earphones.jpg",
      discountRate: 15
    },
    {
      id: 2,
      name: "スマートフォンケース",
      price: 2480,
      description: "耐衝撃性に優れたケース",
      imageUrl: "https://example.com/case.jpg",
      discountRate: 0
    }
  ];

  const handleAddToCart = (product) => {
    console.log(`${product.name}をカートに追加しました`);
    // カートに追加する処理をここに実装
  };

  return (
    <div className="product-list">
      {products.map(product => (
        <ProductCard
          key={product.id}
          product={product}
          onAddToCart={handleAddToCart}
          showDiscount={true}
        />
      ))}
    </div>
  );
}

コードのポイント解説

オブジェクトの渡し方：productのように複雑なデータはオブジェクトとして渡す
関数の渡し方：onAddToCartのようにイベントハンドラーも関数として渡せる
条件付き表示：showDiscountのような真偽値でUIの表示を制御
データの加工：props内のデータを使って割引価格を計算

propsのデフォルト値設定

propsにデフォルト値を設定することで、値が渡されなかった場合の動作を制御できます。

関数パラメータでのデフォルト値

function Button({ 
  text = "クリック", 
  size = "medium", 
  variant = "primary",
  disabled = false,
  onClick 
}) {
  const buttonClass = `btn btn-${size} btn-${variant}`;
  
  return (
    <button 
      className={buttonClass}
      disabled={disabled}
      onClick={onClick}
    >
      {text}
    </button>
  );
}

使用例とデフォルト値の動作

function ButtonExample() {
  return (
    <div>
      {/* すべてのpropsを指定 */}
      <Button 
        text="送信する"
        size="large"
        variant="success"
        onClick={() => console.log("送信")}
      />
      
      {/* 一部のpropsのみ指定（残りはデフォルト値を使用） */}
      <Button 
        text="キャンセル"
        variant="secondary"
        onClick={() => console.log("キャンセル")}
      />
      
      {/* 最小限のpropsのみ指定 */}
      <Button onClick={() => console.log("クリック")} />
    </div>
  );
}

重要な注意点：
デフォルト値はundefinedが渡された場合にのみ使用されます。nullや0、空文字列""が渡された場合はデフォルト値は使用されません。

childrenプロパティの活用

childrenは特別なpropsで、コンポーネントのタグの間に書かれた内容を受け取ります。

基本的なchildrenの使用法

// カードコンポーネント
function Card({ title, children }) {
  return (
    <div className="card">
      <div className="card-header">
        <h3>{title}</h3>
      </div>
      <div className="card-body">
        {children}
      </div>
    </div>
  );
}

childrenを使った柔軟なレイアウト

function App() {
  return (
    <div>
      {/* テキストコンテンツ */}
      <Card title="お知らせ">
        <p>システムメンテナンスのお知らせです。</p>
        <p>日時: 2024年4月1日 2:00〜6:00</p>
      </Card>

      {/* より複雑なコンテンツ */}
      <Card title="ユーザー情報">
        <div className="user-info">
          <img src="avatar.jpg" alt="アバター" />
          <div>
            <h4>田中太郎</h4>
            <p>フロントエンドエンジニア</p>
            <button>プロフィール編集</button>
          </div>
        </div>
      </Card>

      {/* 他のコンポーネントを含む */}
      <Card title="統計情報">
        <ChartComponent data={statisticsData} />
        <SummaryComponent summary={summaryData} />
      </Card>
    </div>
  );
}

高度なchildrenの活用例

// モーダルコンポーネント
function Modal({ isOpen, onClose, title, children }) {
  if (!isOpen) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h2>{title}</h2>
          <button onClick={onClose}>×</button>
        </div>
        <div className="modal-body">
          {children}
        </div>
      </div>
    </div>
  );
}

注意点とベストプラクティス

やってはいけないこと

❌ propsを直接変更する

function BadComponent({ user }) {
  // これはNG！propsを直接変更してはいけない
  user.name = "新しい名前";
  
  return <div>{user.name}</div>;
}

❌ 過度に深いpropsの受け渡し

// Prop Drilling（プロップドリリング）の例 - 避けるべき
function GrandParent({ data }) {
  return <Parent data={data} />;
}

function Parent({ data }) {
  // Parentは実際にはdataを使わないが、Childのために受け渡している
  return <Child data={data} />;
}

function Child({ data }) {
  return <div>{data.message}</div>;
}

推奨されるベストプラクティス

✅ 適切な命名

// 良い例：propsの名前が明確で理解しやすい
function UserProfile({ 
  userName,          // 文字列であることが明確
  isActive,          // 真偽値であることが明確
  onStatusChange,    // 関数であることが明確
  profileData        // オブジェクトであることが予想できる
}) {
  // ...
}

✅ 型の一貫性を保つ

function ProductPrice({ price, currency = "JPY", showTax = true }) {
  // 常に同じ型のデータが渡されることを前提とした実装
  const taxRate = 0.1;
  const finalPrice = showTax ? price * (1 + taxRate) : price;
  
  return (
    <span>
      {finalPrice.toLocaleString()} {currency}
    </span>
  );
}

✅ propsの展開（Spread Operator）を適切に使用

function FormInput({ label, errorMessage, ...inputProps }) {
  return (
    <div className="form-field">
      <label>{label}</label>
      <input {...inputProps} />
      {errorMessage && <span className="error">{errorMessage}</span>}
    </div>
  );
}

// 使用例
<FormInput
  label="メールアドレス"
  type="email"
  placeholder="example@email.com"
  required
  value={email}
  onChange={handleEmailChange}
  errorMessage={emailError}
/>

パフォーマンスの考慮事項

オブジェクトや配列の渡し方：毎回新しいオブジェクトを作成すると不要な再レンダリングが発生する可能性があります
関数の定義：インライン関数よりも事前に定義した関数を渡す方が効率的です
大きなデータの取り扱い：必要最小限のデータのみを渡すことを心がけましょう

まとめ

本記事では、Reactのpropsについて基本概念から実践的な使用方法まで詳しく解説しました。

重要なポイントの振り返り

propsは読み取り専用：子コンポーネント内で直接変更してはいけない
一方向データフロー：親から子へのデータの流れを理解する
柔軟なデータ型対応：文字列、数値、オブジェクト、関数など様々な型のデータを渡せる
デフォルト値の活用：必須でないpropsにはデフォルト値を設定する
childrenプロパティ：再利用可能なレイアウトコンポーネントの作成に有効

今後の学習に向けて

propsを理解したら、次は以下のトピックを学習することをおすすめします

State（状態管理）：コンポーネント内でのデータ管理
イベントハンドリング：ユーザー操作への対応
Context API：Prop Drillingの解決策
TypeScript：propsの型安全性を向上させる

propsはReactアプリケーション開発の基礎となる重要な概念です。本記事で学んだ内容を基に、実際のプロジェクトで活用してみてください。継続的な実践を通じて、より効率的で保守性の高いコンポーネント設計ができるようになるでしょう。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！