React コンポーネントのデフォルトプロパティ：知っておくべき5つのポイント

2024-04-11

React コンポーネントのデフォルトプロパティを設定する方法

デフォルトプロパティを設定するには、以下の2つの方法があります。

コンポーネントクラスの defaultProps プロパティを使用する

この方法は、クラスベースのコンポーネントでデフォルトプロパティを設定する最も一般的な方法です。defaultProps プロパティは、オブジェクトであり、各プロパティはデフォルト値として設定されます。

class MyComponent extends React.Component {
  static defaultProps = {
    // デフォルトプロパティ
    name: "デフォルトの名前",
    age: 30,
  };

  render() {
    const { name, age } = this.props;
    return (
      <div>
        <h1>{name}</h1>
        <p>年齢: {age}</p>
      </div>
    );
  }
}

関数コンポーネントの useMemo フックを使用する

この方法は、関数コンポーネントでデフォルトプロパティを設定するために使用できます。useMemo フックを使用して、デフォルト値を計算し、それらをプロパティとして返すことができます。

const MyComponent = () => {
  const defaultName = "デフォルトの名前";
  const defaultAge = 30;

  const props = useMemo(() => ({
    // デフォルトプロパティ
    name: defaultName,
    age: defaultAge,
  }), []);

  return (
    <div>
      <h1>{props.name}</h1>
      <p>年齢: {props.age}</p>
    </div>
  );
};

どちらの方法を使用する場合でも、以下の点に注意する必要があります。

デフォルトプロパティは、コンポーネントがレンダリングされる前に設定されます。
コンポーネントにプロパティが明示的に渡された場合、デフォルトプロパティは上書きされます。
デフォルトプロパティは、コンポーネントの内部状態とは関係ありません。

上記のコード例は、説明を簡潔にするために簡略化されています。実際のコードでは、必要に応じて型チェックやその他の処理を追加する必要があります。
デフォルトプロパティを設定する方法は他にもいくつかあります。詳細は、React の公式ドキュメントを参照してください。

class MyComponent extends React.Component {
  static defaultProps = {
    // デフォルトプロパティ
    name: "デフォルトの名前",
    age: 30,
  };

  render() {
    const { name, age } = this.props;
    return (
      <div>
        <h1>{name}</h1>
        <p>年齢: {age}</p>
      </div>
    );
  }
}

// コンポーネントの使用例
const App = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

const MyComponent = () => {
  const defaultName = "デフォルトの名前";
  const defaultAge = 30;

  const props = useMemo(() => ({
    // デフォルトプロパティ
    name: defaultName,
    age: defaultAge,
  }), []);

  return (
    <div>
      <h1>{props.name}</h1>
      <p>年齢: {props.age}</p>
    </div>
  );
};

// コンポーネントの使用例
const App = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

上記2つのコード例は、どちらも同じ結果を出力します。

どちらの方法を使用するかは、開発者の好みやコードのスタイルによって異なります。

上記のサンプルコードを参考に、デフォルトプロパティを有効活用して、React アプリケーション開発を効率化しましょう。

デフォルトプロパティを設定するその他の方法

コンポーネントのコンストラクタを使用して、デフォルトプロパティを設定することができます。この方法は、コンポーネントの状態に依存するデフォルト値を設定する場合に役立ちます。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      // 状態
    };

    // デフォルトプロパティ
    this.defaultProps = {
      name: "デフォルトの名前",
      age: 30,
    };
  }

  render() {
    const { name, age } = this.props;
    return (
      <div>
        <h1>{name}</h1>
        <p>年齢: {age}</p>
      </div>
    );
  }
}

React.defaultProps を使用して、すべてのコンポーネントにデフォルトプロパティを設定することができます。これは、すべてのコンポーネントで共通するデフォルトプロパティを設定する場合に役立ちます。

React.defaultProps = {
  // デフォルトプロパティ
  name: "デフォルトの名前",
  age: 30,
};

class MyComponent extends React.Component {
  render() {
    const { name, age } = this.props;
    return (
      <div>
        <h1>{name}</h1>
        <p>年齢: {age}</p>
      </div>
    );
  }
}

TypeScript を使用している場合は、デフォルトプロパティを型定義に直接設定することができます。

interface MyComponentProps {
  // デフォルトプロパティ
  name?: string;
  age?: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>年齢: {age}</p>
    </div>
  );
};