React propsの渡し方がまるっとわかる！関数・配列・オブジェクト・型定義まで全対応ガイド

Reactでコンポーネントを作り始めたばかりの頃、「propsってどうやって渡せばいいの？」「親から渡したはずの値が子でundefinedになっている…」といった悩みにぶつかった経験はありませんか？Reactのpropsは、親コンポーネントから子コンポーネントへデータを受け渡すための基本機能ですが、仕組みを正しく理解していないと、エラーに悩まされたり、思った通りに表示されなかったりといった問題に直面しがちです。

本記事では、React初心者の方がつまずきやすい「propsの渡し方」について、基本の文法から実践的な使い方、TypeScriptを使った型安全な実装方法まで、丁寧に解説していきます。関数コンポーネントとクラスコンポーネントの違いや、Hooksとの連携、よくあるエラーの原因と対処法など、現場ですぐに役立つ知識もたっぷり詰め込みました。

「propsって何？」「どう使えばいいの？」という初歩的な疑問から、「TypeScriptでどう型定義すればいい？」という実務レベルの話まで、幅広くカバーしていますので、Reactのpropsに不安がある方は、ぜひ最後まで読んでみてください。

Reactの基本的なpropsの渡し方と構文理解

Reactのpropsとは？仕組みと使い方の基本

Reactにおけるprops（プロップス）は、コンポーネント間でデータを受け渡すための仕組みです。propsは「properties（属性）」の略称で、親コンポーネントから子コンポーネントへ情報を渡すために使用されます。

propsの基本概念

Reactはコンポーネント指向のフレームワークです。アプリケーションを小さな部品（コンポーネント）に分割し、それらを組み合わせてUIを構築します。propsは、これらのコンポーネント間でデータを共有するための「橋渡し役」となります。

// 親コンポーネント
function App() {
  return <UserProfile name="田中太郎" age={25} />;
}

// 子コンポーネント
function UserProfile(props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>年齢: {props.age}歳</p>
    </div>
  );
}

propsが必要な理由とメリット

1. コンポーネントの再利用性 同じコンポーネントを異なるデータで使い回すことができます。

function ProductCard(props) {
  return (
    <div className="card">
      <h3>{props.title}</h3>
      <p>{props.price}円</p>
    </div>
  );
}

// 異なるデータで同じコンポーネントを使用
<ProductCard title="ノートパソコン" price={89800} />
<ProductCard title="マウス" price={2980} />

2. データの一方向フロー Reactでは、データは親から子へ一方向に流れます。これにより、データの流れが予測しやすくなり、デバッグが容易になります。

3. 保守性の向上 コンポーネントが独立しているため、個別に修正・テストが可能です。

React公式ドキュメントでは、propsを「読み取り専用」として扱うことが推奨されています。子コンポーネントは受け取ったpropsを直接変更せず、新しい値を返すことでUIを更新します。

親から子への基本データ（文字列・数値・boolean）の渡し方とコード例

propsの基本的な渡し方は、JSXの属性として記述することです。HTML要素に属性を設定するのと同じような感覚で使用できます。

文字列の渡し方

// 親コンポーネント
function App() {
  return <Greeting message="こんにちは！" />;
}

// 子コンポーネント
function Greeting(props) {
  return <h1>{props.message}</h1>;
}

文字列を渡す場合は、ダブルクォートまたはシングルクォートで囲みます。

数値の渡し方

// 親コンポーネント
function App() {
  return <Counter initialValue={10} />;
}

// 子コンポーネント
function Counter(props) {
  return <p>初期値: {props.initialValue}</p>;
}

数値を渡す場合は、波括弧{}で囲みます。

真偽値（boolean）の渡し方

// 親コンポーネント
function App() {
  return (
    <div>
      <Button isDisabled={true} text="無効ボタン" />
      <Button isDisabled={false} text="有効ボタン" />
    </div>
  );
}

// 子コンポーネント
function Button(props) {
  return (
    <button disabled={props.isDisabled}>
      {props.text}
    </button>
  );
}

真偽値も波括弧{}で囲みます。なお、trueの場合は省略することも可能です：

// 以下の2つは同じ意味
<Button isDisabled={true} />
<Button isDisabled />

実際に動作する完全なコード例

import React from 'react';

// 親コンポーネント
function App() {
  return (
    <div>
      <h1>基本的なpropsの例</h1>
      <UserInfo
        name="山田花子"
        age={28}
        isPremium={true}
      />
      <UserInfo
        name="佐藤次郎"
        age={35}
        isPremium={false}
      />
    </div>
  );
}

// 子コンポーネント
function UserInfo(props) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px' }}>
      <h2>{props.name}</h2>
      <p>年齢: {props.age}歳</p>
      <p>会員状態: {props.isPremium ? 'プレミアム会員' : '一般会員'}</p>
    </div>
  );
}

export default App;

子コンポーネント側でのpropsの受け取り方（引数・分割代入）

基本的な受け取り方

子コンポーネントでpropsを受け取る最も基本的な方法は、関数の第一引数として受け取ることです。

function MyComponent(props) {
  return <div>{props.title}</div>;
}

受け取ったpropsは、props.プロパティ名の形式でアクセスできます。

分割代入（Destructuring Assignment）を使った受け取り方

分割代入を使用することで、より簡潔で読みやすいコードが書けます。

// 分割代入を使わない場合
function UserCard(props) {
  return (
    <div>
      <h3>{props.name}</h3>
      <p>年齢: {props.age}歳</p>
      <p>職業: {props.job}</p>
    </div>
  );
}

// 分割代入を使った場合
function UserCard({ name, age, job }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>年齢: {age}歳</p>
      <p>職業: {job}</p>
    </div>
  );
}

分割代入のメリット

1. コードの簡潔性props.を何度も書く必要がなくなります。

2. 可読性の向上 どのpropsを使用しているかが一目でわかります。

3. エディタの補完機能 多くのエディタで、分割代入されたプロパティの補完が効きやすくなります。

実用的な分割代入の例

// 複数のpropsを分割代入で受け取る
function ProductItem({ title, price, description, imageUrl, isOnSale }) {
  return (
    <div className="product-item">
      <img src={imageUrl} alt={title} />
      <h3>{title}</h3>
      <p className="price">
        {isOnSale ? '特価: ' : ''}
        {price.toLocaleString()}円
      </p>
      <p className="description">{description}</p>
    </div>
  );
}

// 使用例
function App() {
  return (
    <ProductItem
      title="ワイヤレスイヤホン"
      price={15800}
      description="高音質でバッテリー長持ち"
      imageUrl="/images/earphones.jpg"
      isOnSale={true}
    />
  );
}

一部のpropsだけを分割代入する方法

すべてのpropsを分割代入する必要はありません。必要に応じて、一部だけを分割代入することも可能です。

function FlexibleComponent({ title, ...otherProps }) {
  return (
    <div {...otherProps}>
      <h2>{title}</h2>
      <p>その他のpropsも受け取れます</p>
    </div>
  );
}

この方法により、propsの受け渡しがより柔軟になり、コンポーネントの再利用性が向上します。

データ型別のpropsの渡し方と具体例

関数コンポーネントでのpropsの受け取り方・分割代入のベストプラクティス

現代のReact開発では、関数コンポーネントが主流となっています。関数コンポーネントでpropsを効率的に扱うためのベストプラクティスを詳しく解説します。

関数コンポーネントにおける分割代入の活用

// 基本的な分割代入
function UserProfile({ name, email, avatar }) {
  return (
    <div className="user-profile">
      <img src={avatar} alt={`${name}のアバター`} />
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
}

// デフォルト値を設定した分割代入
function Button({ text, variant = 'primary', disabled = false, onClick }) {
  return (
    <button
      className={`btn btn-${variant}`}
      disabled={disabled}
      onClick={onClick}
    >
      {text}
    </button>
  );
}

複雑なオブジェクトや配列を含むpropsの扱い

// オブジェクトを含むprops
function UserCard({ user, settings }) {
  const { name, age, address } = user;
  const { theme, language } = settings;

  return (
    <div className={`card ${theme}`}>
      <h3>{name}</h3>
      <p>年齢: {age}歳</p>
      <p>住所: {address.city}, {address.country}</p>
      <p>言語: {language}</p>
    </div>
  );
}

// 使用例
function App() {
  const userData = {
    name: "田中太郎",
    age: 30,
    address: {
      city: "東京",
      country: "日本"
    }
  };

  const userSettings = {
    theme: "dark",
    language: "ja"
  };

  return <UserCard user={userData} settings={userSettings} />;
}

配列データの扱い

// 配列を含むprops
function TaskList({ tasks, onTaskToggle }) {
  return (
    <ul className="task-list">
      {tasks.map(task => (
        <li key={task.id} className={task.completed ? 'completed' : ''}>
          <input
            type="checkbox"
            checked={task.completed}
            onChange={() => onTaskToggle(task.id)}
          />
          <span>{task.text}</span>
        </li>
      ))}
    </ul>
  );
}

// 使用例
function App() {
  const [tasks, setTasks] = useState([
    { id: 1, text: "買い物", completed: false },
    { id: 2, text: "掃除", completed: true },
    { id: 3, text: "勉強", completed: false }
  ]);

  const handleTaskToggle = (taskId) => {
    setTasks(tasks.map(task =>
      task.id === taskId ? { ...task, completed: !task.completed } : task
    ));
  };

  return <TaskList tasks={tasks} onTaskToggle={handleTaskToggle} />;
}

命名規則とコーディング規約

1. Props名の命名規則

// 良い例：明確で理解しやすい命名
function NewsCard({ title, publishDate, authorName, isHighlighted }) {
  // ...
}

// 避けるべき例：略語や曖昧な命名
function NewsCard({ t, pd, auth, highlight }) {
  // ...
}

2. ESLintの設定例

// .eslintrc.js
module.exports = {
  rules: {
    'react/prop-types': 'warn', // PropTypesの使用を推奨
    'react/jsx-props-no-spreading': 'off', // スプレッド演算子を許可
    'react/destructuring-assignment': ['error', 'always'], // 分割代入を強制
  }
};

参照渡しによる予期せぬ再レンダリングの対策

import React, { memo, useCallback, useMemo } from 'react';

// オブジェクトや配列を渡す際の注意点
function ParentComponent() {
  const [count, setCount] = useState(0);

  // 悪い例：毎回新しいオブジェクトが作成される
  const badStyle = { color: 'red', fontSize: '16px' };

  // 良い例：useMemoで最適化
  const goodStyle = useMemo(() => ({
    color: 'red',
    fontSize: '16px'
  }), []);

  // 関数もuseCallbackで最適化
  const handleClick = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent style={goodStyle} onClick={handleClick} />
    </div>
  );
}

// memo でプロップの変更時のみ再レンダリング
const ChildComponent = memo(({ style, onClick }) => {
  console.log('ChildComponent rendered');
  return <button style={style} onClick={onClick}>クリック</button>;
});

クラスコンポーネントでのpropsの扱い方と関数コンポーネントとの違い

クラスコンポーネントでのpropsの基本的な扱い

import React, { Component } from 'react';

class UserProfile extends Component {
  render() {
    // this.propsでアクセス
    const { name, email, age } = this.props;

    return (
      <div className="user-profile">
        <h2>{name}</h2>
        <p>Email: {email}</p>
        <p>Age: {age}</p>
      </div>
    );
  }
}

// 使用例
class App extends Component {
  render() {
    return (
      <UserProfile
        name="佐藤花子"
        email="hanako@example.com"
        age={25}
      />
    );
  }
}

デフォルトプロパティとプロパティタイプの定義

class Button extends Component {
  // デフォルトプロパティ
  static defaultProps = {
    variant: 'primary',
    disabled: false,
    size: 'medium'
  };

  // プロパティタイプ（開発時の型チェック）
  static propTypes = {
    text: PropTypes.string.isRequired,
    variant: PropTypes.oneOf(['primary', 'secondary', 'danger']),
    disabled: PropTypes.bool,
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    onClick: PropTypes.func
  };

  render() {
    const { text, variant, disabled, size, onClick } = this.props;

    return (
      <button
        className={`btn btn-${variant} btn-${size}`}
        disabled={disabled}
        onClick={onClick}
      >
        {text}
      </button>
    );
  }
}

関数コンポーネントとクラスコンポーネントの比較

// 同じ機能を関数コンポーネントで実装
function Button({
  text,
  variant = 'primary',
  disabled = false,
  size = 'medium',
  onClick
}) {
  return (
    <button
      className={`btn btn-${variant} btn-${size}`}
      disabled={disabled}
      onClick={onClick}
    >
      {text}
    </button>
  );
}

propsとuseState・Hooksの組み合わせ活用例【onClickイベント・コールバック】

propsとuseStateの基本的な組み合わせ

import React, { useState } from 'react';

// 親コンポーネント
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>カウンター: {count}</h2>
      <CounterButtons
        currentCount={count}
        onIncrement={() => setCount(count + 1)}
        onDecrement={() => setCount(count - 1)}
        onReset={() => setCount(0)}
      />
    </div>
  );
}

// 子コンポーネント
function CounterButtons({ currentCount, onIncrement, onDecrement, onReset }) {
  return (
    <div>
      <button onClick={onIncrement}>+1</button>
      <button onClick={onDecrement} disabled={currentCount <= 0}>-1</button>
      <button onClick={onReset}>リセット</button>
    </div>
  );
}

関数をpropsとして渡す実践例

// 汎用的なモーダルコンポーネント
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">
          <h3>{title}</h3>
          <button onClick={onClose}>×</button>
        </div>
        <div className="modal-body">
          {children}
        </div>
      </div>
    </div>
  );
}

// 使用例
function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div>
      <button onClick={openModal}>モーダルを開く</button>
      <Modal
        isOpen={isModalOpen}
        onClose={closeModal}
        title="確認"
      >
        <p>この操作を実行しますか？</p>
        <button onClick={closeModal}>キャンセル</button>
        <button onClick={() => {
          // 何らかの処理
          closeModal();
        }}>実行</button>
      </Modal>
    </div>
  );
}

子コンポーネントから親コンポーネントへのコールバックパターン

// フォーム入力値を親に伝達する例
function ContactForm({ onSubmit }) {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleChange = (field, value) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 親コンポーネントにデータを渡す
    onSubmit(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <FormInput
        label="名前"
        value={formData.name}
        onChange={(value) => handleChange('name', value)}
      />
      <FormInput
        label="メール"
        type="email"
        value={formData.email}
        onChange={(value) => handleChange('email', value)}
      />
      <FormTextarea
        label="メッセージ"
        value={formData.message}
        onChange={(value) => handleChange('message', value)}
      />
      <button type="submit">送信</button>
    </form>
  );
}

// 再利用可能な入力コンポーネント
function FormInput({ label, type = 'text', value, onChange }) {
  return (
    <div className="form-group">
      <label>{label}</label>
      <input
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    </div>
  );
}

function FormTextarea({ label, value, onChange }) {
  return (
    <div className="form-group">
      <label>{label}</label>
      <textarea
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    </div>
  );
}

// 親コンポーネント
function App() {
  const handleFormSubmit = (formData) => {
    console.log('受信したデータ:', formData);
    // APIに送信するなどの処理
  };

  return (
    <div>
      <h1>お問い合わせフォーム</h1>
      <ContactForm onSubmit={handleFormSubmit} />
    </div>
  );
}

複雑な状態管理とpropsの組み合わせ

// ショッピングカートの例
function ShoppingCart() {
  const [items, setItems] = useState([]);
  const [isCheckoutOpen, setIsCheckoutOpen] = useState(false);

  const addItem = (product) => {
    setItems(prev => {
      const existingItem = prev.find(item => item.id === product.id);
      if (existingItem) {
        return prev.map(item =>
          item.id === product.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        );
      }
      return [...prev, { ...product, quantity: 1 }];
    });
  };

  const removeItem = (productId) => {
    setItems(prev => prev.filter(item => item.id !== productId));
  };

  const updateQuantity = (productId, newQuantity) => {
    if (newQuantity === 0) {
      removeItem(productId);
      return;
    }
    setItems(prev => prev.map(item =>
      item.id === productId
        ? { ...item, quantity: newQuantity }
        : item
    ));
  };

  const getTotalPrice = () => {
    return items.reduce((total, item) => total + (item.price * item.quantity), 0);
  };

  return (
    <div>
      <h2>ショッピングカート</h2>
      <CartItems
        items={items}
        onUpdateQuantity={updateQuantity}
        onRemoveItem={removeItem}
      />
      <CartSummary
        items={items}
        totalPrice={getTotalPrice()}
        onCheckout={() => setIsCheckoutOpen(true)}
      />
      {isCheckoutOpen && (
        <CheckoutModal
          items={items}
          totalPrice={getTotalPrice()}
          onClose={() => setIsCheckoutOpen(false)}
        />
      )}
    </div>
  );
}

// カート内商品一覧コンポーネント
function CartItems({ items, onUpdateQuantity, onRemoveItem }) {
  if (items.length === 0) {
    return <p>カートは空です</p>;
  }

  return (
    <div className="cart-items">
      {items.map(item => (
        <CartItem
          key={item.id}
          item={item}
          onUpdateQuantity={onUpdateQuantity}
          onRemove={onRemoveItem}
        />
      ))}
    </div>
  );
}

// 個別商品コンポーネント
function CartItem({ item, onUpdateQuantity, onRemove }) {
  return (
    <div className="cart-item">
      <h4>{item.name}</h4>
      <p>単価: {item.price}円</p>
      <div className="quantity-controls">
        <button onClick={() => onUpdateQuantity(item.id, item.quantity - 1)}>-</button>
        <span>{item.quantity}</span>
        <button onClick={() => onUpdateQuantity(item.id, item.quantity + 1)}>+</button>
      </div>
      <button onClick={() => onRemove(item.id)}>削除</button>
    </div>
  );
}

このように、propsとHooksを組み合わせることで、複雑な状態管理も効率的に実装できます。コンポーネント間でのデータの流れを意識し、適切な粒度でコンポーネントを分割することが重要です。

TypeScriptによる型安全なprops設計と実践Tips

TypeScriptでのprops型定義方法【interface/type/ComponentProps】

TypeScriptを使用することで、propsの型安全性を確保し、開発時のエラーを減らすことができます。型定義は開発効率の向上とコードの保守性向上に直結する重要な要素です。

interfaceを使った型定義

// interfaceを使用した型定義
interface UserProfileProps {
  name: string;
  age: number;
  email: string;
  isActive: boolean;
  avatar?: string; // オプショナル
}

function UserProfile({ name, age, email, isActive, avatar }: UserProfileProps) {
  return (
    <div className="user-profile">
      {avatar && <img src={avatar} alt={`${name}のアバター`} />}
      <h2>{name}</h2>
      <p>年齢: {age}歳</p>
      <p>メール: {email}</p>
      <p>ステータス: {isActive ? 'アクティブ' : '非アクティブ'}</p>
    </div>
  );
}

typeを使った型定義

// typeを使用した型定義
type ButtonProps = {
  text: string;
  variant: 'primary' | 'secondary' | 'danger';
  size: 'small' | 'medium' | 'large';
  disabled?: boolean;
  onClick?: () => void;
};

function Button({ text, variant, size, disabled = false, onClick }: ButtonProps) {
  return (
    <button
      className={`btn btn-${variant} btn-${size}`}
      disabled={disabled}
      onClick={onClick}
    >
      {text}
    </button>
  );
}

interfaceとtypeの使い分け

// interfaceの拡張例
interface BaseProps {
  id: string;
  className?: string;
}

interface ButtonProps extends BaseProps {
  text: string;
  onClick: () => void;
}

// typeのユニオン型例
type Status = 'loading' | 'success' | 'error';
type AlertProps = {
  message: string;
  status: Status;
};

// 複雑なtype定義
type ConditionalProps<T> = T extends string
  ? { textValue: T }
  : { numericValue: T };

React.ComponentPropsの活用

既存のHTML要素やコンポーネントのpropsを継承する場合に便利です。

// HTMLボタン要素のpropsを継承
type CustomButtonProps = React.ComponentProps<'button'> & {
  variant?: 'primary' | 'secondary';
  loading?: boolean;
};

function CustomButton({
  variant = 'primary',
  loading = false,
  children,
  disabled,
  ...buttonProps
}: CustomButtonProps) {
  return (
    <button
      {...buttonProps}
      disabled={disabled || loading}
      className={`btn btn-${variant} ${loading ? 'loading' : ''}`}
    >
      {loading ? 'Loading...' : children}
    </button>
  );
}

// 既存コンポーネントのpropsを取得
type ExistingComponentProps = React.ComponentProps<typeof UserProfile>;

// 特定のpropsのみを選択
type PickedProps = Pick<UserProfileProps, 'name' | 'email'>;

// 特定のpropsを除外
type OmittedProps = Omit<UserProfileProps, 'age'>;

複雑なpropsの型定義例

// ネストしたオブジェクトの型定義
interface Address {
  street: string;
  city: string;
  zipCode: string;
  country: string;
}

interface User {
  id: number;
  name: string;
  email: string;
  address: Address;
  preferences: {
    theme: 'light' | 'dark';
    language: 'ja' | 'en';
    notifications: boolean;
  };
}

interface UserCardProps {
  user: User;
  onEdit: (userId: number) => void;
  onDelete: (userId: number) => void;
  isEditable?: boolean;
}

// 配列とジェネリクスを含む型定義
interface ListProps<T> {
  items: T[];
  renderItem: (item: T, index: number) => React.ReactNode;
  keyExtractor: (item: T) => string | number;
  emptyMessage?: string;
}

function List<T>({ items, renderItem, keyExtractor, emptyMessage }: ListProps<T>) {
  if (items.length === 0) {
    return <div className="empty-list">{emptyMessage || 'No items'}</div>;
  }

  return (
    <div className="list">
      {items.map((item, index) => (
        <div key={keyExtractor(item)} className="list-item">
          {renderItem(item, index)}
        </div>
      ))}
    </div>
  );
}

型定義のベストプラクティス

1. ファイル構成

// types/index.ts - 型定義専用ファイル
export interface User {
  id: number;
  name: string;
  email: string;
}

export interface UserCardProps {
  user: User;
  onEdit: (userId: number) => void;
}

// components/UserCard.tsx - コンポーネントファイル
import { UserCardProps } from '../types';

export function UserCard({ user, onEdit }: UserCardProps) {
  // ...
}

2. 命名規則

// Props型には接尾辞「Props」を付ける
interface ButtonProps { }
interface ModalProps { }

// 汎用的な型は明確な名前を付ける
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

// イベントハンドラーは「onXxx」で統一
interface FormProps {
  onSubmit: (data: FormData) => void;
  onCancel: () => void;
  onChange: (field: string, value: string) => void;
}

propsのデフォルト値・オプショナル・複数props管理のベストプラクティス

デフォルト値の設定方法

// 方法1: 関数の引数でデフォルト値を設定
interface ButtonProps {
  text: string;
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
}

function Button({
  text,
  variant = 'primary',
  size = 'medium',
  disabled = false
}: ButtonProps) {
  return (
    <button className={`btn btn-${variant} btn-${size}`} disabled={disabled}>
      {text}
    </button>
  );
}

// 方法2: defaultPropsを使用（クラスコンポーネント）
class ClassButton extends React.Component<ButtonProps> {
  static defaultProps: Partial<ButtonProps> = {
    variant: 'primary',
    size: 'medium',
    disabled: false
  };

  render() {
    const { text, variant, size, disabled } = this.props;
    return (
      <button className={`btn btn-${variant} btn-${size}`} disabled={disabled}>
        {text}
      </button>
    );
  }
}

オプショナルプロパティの活用

// 条件付きpropsの型定義
interface ConditionalProps {
  mode: 'view' | 'edit';
  data: any;
  // editモードの時のみ必要
  onSave?: (data: any) => void;
  onCancel?: () => void;
}

// より厳密な条件付き型定義
type ViewModeProps = {
  mode: 'view';
  data: any;
};

type EditModeProps = {
  mode: 'edit';
  data: any;
  onSave: (data: any) => void;
  onCancel: () => void;
};

type DataDisplayProps = ViewModeProps | EditModeProps;

function DataDisplay(props: DataDisplayProps) {
  if (props.mode === 'edit') {
    // TypeScriptがonSave, onCancelの存在を保証
    return (
      <div>
        <div>{JSON.stringify(props.data)}</div>
        <button onClick={() => props.onSave(props.data)}>保存</button>
        <button onClick={props.onCancel}>キャンセル</button>
      </div>
    );
  }

  return <div>{JSON.stringify(props.data)}</div>;
}

複数propsの効率的な管理

// スプレッド演算子を活用したprops管理
interface BaseComponentProps {
  id: string;
  className?: string;
  style?: React.CSSProperties;
}

interface CardProps extends BaseComponentProps {
  title: string;
  content: string;
  footer?: React.ReactNode;
  onClick?: () => void;
}

function Card({ title, content, footer, onClick, ...baseProps }: CardProps) {
  return (
    <div {...baseProps} className={`card ${baseProps.className || ''}`} onClick={onClick}>
      <h3>{title}</h3>
      <p>{content}</p>
      {footer && <div className="card-footer">{footer}</div>}
    </div>
  );
}

// propsの分割とグループ化
interface ComplexComponentProps {
  // データ関連
  data: any[];
  loading: boolean;
  error: string | null;

  // レイアウト関連
  layout: 'grid' | 'list';
  columns?: number;
  gap?: number;

  // イベント関連
  onItemClick: (item: any) => void;
  onLoadMore?: () => void;
  onRefresh?: () => void;

  // 表示制御
  showHeader?: boolean;
  showFooter?: boolean;
  emptyMessage?: string;
}

function ComplexComponent({
  // データ関連propsをグループ化
  data, loading, error,

  // レイアウト関連propsをグループ化
  layout, columns = 3, gap = 16,

  // イベント関連propsをグループ化
  onItemClick, onLoadMore, onRefresh,

  // 表示制御propsをグループ化
  showHeader = true, showFooter = true, emptyMessage
}: ComplexComponentProps) {
  // 実装...
}

型安全なpropsの合成

// 複数のprops型を合成する際のパターン
interface BaseModalProps {
  isOpen: boolean;
  onClose: () => void;
  title?: string;
}

interface ConfirmModalProps extends BaseModalProps {
  type: 'confirm';
  message: string;
  onConfirm: () => void;
  confirmText?: string;
  cancelText?: string;
}

interface FormModalProps extends BaseModalProps {
  type: 'form';
  fields: FormField[];
  onSubmit: (data: Record<string, any>) => void;
  initialData?: Record<string, any>;
}

type ModalProps = ConfirmModalProps | FormModalProps;

function Modal(props: ModalProps) {
  const { isOpen, onClose, title } = props;

  if (!isOpen) return null;

  return (
    <div className="modal">
      <div className="modal-content">
        {title && <h2>{title}</h2>}

        {props.type === 'confirm' && (
          <div>
            <p>{props.message}</p>
            <button onClick={props.onConfirm}>
              {props.confirmText || '確認'}
            </button>
            <button onClick={onClose}>
              {props.cancelText || 'キャンセル'}
            </button>
          </div>
        )}

        {props.type === 'form' && (
          <form onSubmit={(e) => {
            e.preventDefault();
            // フォームデータを取得してonSubmitを呼び出し
          }}>
            {/* フォームフィールドの描画 */}
          </form>
        )}
      </div>
    </div>
  );
}

よくあるpropsのエラー・バグの原因と解決策【undefined・型エラー】

典型的なエラーパターンと解決策

1. undefined値の表示問題

// 問題のあるコード
interface UserProps {
  name: string;
  age?: number; // オプショナル
}

function User({ name, age }: UserProps) {
  return (
    <div>
      <h2>{name}</h2>
      {/* ageがundefinedの場合「undefined」と表示される */}
      <p>年齢: {age}歳</p>
    </div>
  );
}

// 解決策
function User({ name, age }: UserProps) {
  return (
    <div>
      <h2>{name}</h2>
      {/* 条件付きレンダリングで解決 */}
      {age !== undefined && <p>年齢: {age}歳</p>}
      {/* または */}
      <p>年齢: {age ?? '未設定'}</p>
    </div>
  );
}

2. 型エラーの原因と解決

// 問題: propsの型が一致しない
interface ButtonProps {
  onClick: () => void;
  disabled: boolean;
}

// エラー: numberを渡しているがbooleanが期待される
// <Button onClick={() => {}} disabled={1} />

// 解決策1: 正しい型で渡す
// <Button onClick={() => {}} disabled={true} />

// 解決策2: 型定義を柔軟にする
interface FlexibleButtonProps {
  onClick: () => void;
  disabled?: boolean | number; // 複数の型を許可
}

function FlexibleButton({ onClick, disabled }: FlexibleButtonProps) {
  return (
    <button onClick={onClick} disabled={Boolean(disabled)}>
      Click me
    </button>
  );
}

3. 必須propsの未指定エラー

// 問題: 必須propsが未指定
interface RequiredProps {
  title: string;
  content: string;
  author: string;
}

// エラー: authorが未指定
// <Article title="タイトル" content="内容" />

// 解決策1: すべての必須propsを指定
// <Article title="タイトル" content="内容" author="作者" />

// 解決策2: デフォルト値を提供
interface ArticleProps {
  title: string;
  content: string;
  author?: string;
}

function Article({ title, content, author = '匿名' }: ArticleProps) {
  return (
    <article>
      <h1>{title}</h1>
      <p>by {author}</p>
      <div>{content}</div>
    </article>
  );
}

4. オブジェクトpropsの型エラー

// 問題: ネストしたオブジェクトの型が不一致
interface Address {
  street: string;
  city: string;
  zipCode: string;
}

interface UserProps {
  name: string;
  address: Address;
}

// エラー: countryプロパティは定義されていない
// const user = { name: "太郎", address: { street: "...", city: "...", zipCode: "...", country: "Japan" } };
// <UserComponent name={user.name} address={user.address} />

// 解決策: 型定義を更新
interface ExtendedAddress extends Address {
  country?: string;
}

interface UserProps {
  name: string;
  address: ExtendedAddress;
}

5. 関数propsの型エラー

// 問題: 関数の引数や戻り値の型が不一致
interface SearchProps {
  onSearch: (query: string) => void;
}

// エラー: Promise<void>を返す関数を渡している
// const handleSearch = async (query: string) => {
//   return await searchAPI(query);
// };
// <SearchComponent onSearch={handleSearch} />

// 解決策1: 型定義を更新
interface SearchProps {
  onSearch: (query: string) => void | Promise<void>;
}

// 解決策2: ラッパー関数を使用
const handleSearchWrapper = (query: string) => {
  searchAPI(query); // Promiseを無視
};
// <SearchComponent onSearch={handleSearchWrapper} />

デバッグのポイントと実践的な対処法

// 1. propsの値を確認するためのデバッグ用コンポーネント
function DebugProps<T extends Record<string, any>>({
  component: Component,
  ...props
}: T & { component: React.ComponentType<T> }) {
  console.log('Props:', props);
  console.table(props);
  return <Component {...props} />;
}

// 使用例
// <DebugProps component={UserProfile} name="太郎" age={25} />

// 2. 型チェック用のユーティリティ関数
function validateProps<T>(props: T, validator: (props: T) => boolean): T {
  if (!validator(props)) {
    throw new Error('Invalid props provided');
  }
  return props;
}

// 3. エラーバウンダリーでpropsエラーをキャッチ
class PropsErrorBoundary extends React.Component<
  { children: React.ReactNode },
  { hasError: boolean; error: Error | null }
> {
  constructor(props: { children: React.ReactNode }) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error('Props error:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="error-boundary">
          <h2>Propsエラーが発生しました</h2>
          <details>
            <summary>詳細</summary>
            <pre>{this.state.error?.message}</pre>
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

// 4. 型安全なpropsの動的生成
function createTypedProps<T>() {
  return {
    validate: (props: any): props is T => {
      // 実際の検証ロジック
      return typeof props === 'object' && props !== null;
    },

    withDefaults: (props: Partial<T>, defaults: T): T => {
      return { ...defaults, ...props };
    }
  };
}

// 使用例
const UserPropsHelper = createTypedProps<UserProps>();

if (UserPropsHelper.validate(receivedProps)) {
  // propsが有効な場合の処理
}

React Developer Toolsの活用

// React Developer Toolsでpropsを確認しやすくするためのカスタムhook
function usePropsDebugger<T>(props: T, componentName: string) {
  React.useEffect(() => {
    if (process.env.NODE_ENV === 'development') {
      console.group(`${componentName} Props`);
      console.log('Props:', props);
      console.groupEnd();
    }
  }, [props, componentName]);

  return props;
}

// 使用例
function UserProfile(props: UserProps) {
  const debuggedProps = usePropsDebugger(props, 'UserProfile');

  return (
    <div>
      <h2>{debuggedProps.name}</h2>
      {/* ... */}
    </div>
  );
}

TypeScriptを使用することで、これらの多くのエラーを開発時に検出・修正できます。適切な型定義とデバッグ手法を組み合わせることで、より堅牢なReactアプリケーションを構築できます。

よくある質問（FAQ)

まとめ

この記事では、Reactにおけるpropsの渡し方について、基本的な概念から実践的な応用まで幅広く解説してきました。propsはReactコンポーネント間でデータを受け渡すための重要な仕組みであり、適切に理解し活用することで、より効率的で保守性の高いReactアプリケーションを構築できるようになります。

propsをマスターすることで、あなたの開発体験は劇的に向上するでしょう。コンポーネントの再利用性が高まり、コードの保守性も大幅に改善されます。特にTypeScriptを使った型安全な開発では、実行時エラーを事前に防げるため、プロダクションレベルの品質向上につながります。

また、関数コンポーネントとHooksの組み合わせによる現代的なReact開発では、propsの適切な活用が不可欠です。useState やuseEffectなどのHooksと組み合わせることで、より動的で柔軟なコンポーネント設計が可能になります。

実際の開発現場では、propsを通じた適切なデータフローの設計が、チーム開発での生産性向上やコードレビューの効率化にも直結します。propsの命名規則や型定義のベストプラクティスを身につけることで、より読みやすく、他の開発者との協業もスムーズに進められるでしょう。

今回学んだpropsの知識を基に、次はContext APIやReduxなどの状態管理ライブラリについても学習を進めることをお勧めします。大規模なアプリケーションでは、propsだけでは管理しきれない複雑な状態管理が必要になるケースも多いためです。

propsの理解を深めることで、あなたのReact開発スキルは確実に向上し、より高品質なアプリケーション開発が可能になります。ぜひ実際のプロジェクトで今回学んだテクニックを活用し、継続的にスキルアップを図っていってください。

Create React Appは非推奨！今選ぶべきReact開発環境と技術選定【2025年版】

Create React Appがなぜ非推奨になったのか、React公式の見解や技術的な背景を解説します。ビルド速度や最新Reactとの非互換性など、避けられない課題に加え、今選ばれている代替ツール（Vite・Next.jsなど）の特徴や選び方も詳しくご紹介。React開発の現在地とこれからがわかる内容です。

watashi.xyz

2025.07.01

ReactをCDNで利用した場合のuseState、useEffectの書き方

はじめにReactをCDNから利用することは以前の記事で書きました。▼過去の記事はこちらReactに限らずjavascriptのフレームワークでは状態管理が便利です。Reactの状態管理useStateとuseEffectですが、npmで構築する時と書き方が少し変わってきます。今回はCDNでuseState、useEf...

watashi.xyz

2023.11.06

これなら簡単！cdnでreactとjsxを呼び出してサイトに組み込む方法

はじめにjavascriptの人気ライブラリ「React」ですが使用方法を調べるとnpmでインストールする方法にたどりつくと思います。それも良いのですが既にReactなしで出来上がったサイトに組み込みたい時や気軽にReactの良いとこどりをしたい時はnpmは使用せずcdnを利用するのも良い選択かもしれません。この記事で...

watashi.xyz

2023.11.02