ReactのPropsにデフォルト値を設定して、エラーを防ぐ！初心者向けの詳細解説

Reactでは、コンポーネント間でデータをやり取りするために「Props（プロパティ）」が頻繁に使われますが、Propsにはデフォルト値を設定することができます。デフォルト値を設定することで、Propsが渡されなかった場合でも意図した動作をさせたり、コンポーネントの安定性を保つことができます。

本記事では、ReactのPropsにデフォルト値を設定する方法について、初心者でも理解しやすいように具体例を交えて詳しく解説していきます。ぜひ参考にしてみてください。

Propsのデフォルト値とは？
デフォルト値の設定方法
1. defaultPropsを使用したデフォルト値の設定
2. 関数のデフォルト引数を使用したデフォルト値の設定
どちらを使うべきか？
まとめ

Propsのデフォルト値とは？

まず、Propsのデフォルト値とは何かを確認しましょう。デフォルト値とは、Propsが親コンポーネントから渡されなかったときに使われる「初期値」です。たとえば、コンポーネントがcolorというPropsを受け取るとしましょう。このPropsにデフォルト値として「青」を設定しておくことで、もし親から値が渡されなかった場合でもコンポーネントは「青」を使います。

デフォルト値の設定は、予期せぬエラーの回避や、コードの可読性向上にも役立つため、Reactコンポーネントの開発では重要なテクニックです。

デフォルト値の設定方法

ReactでPropsにデフォルト値を設定する一般的な方法は次の2つです。

defaultPropsを使用する
関数のデフォルト引数を使用する

defaultPropsを使用したデフォルト値の設定

defaultPropsは、コンポーネントのデフォルト値を指定するためのプロパティです。

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello/>
  );
}

export default App;

Hello.js

import React from 'react';

function Hello({ name }){

  return (
    <div>
      <h2>name: {name}</h2>
    </div>
  );
}

Hello.defaultProps = {
  name: "デフォルト値"
}

export default Hello;

ゆーや

親コンポーネント（App）からnameを渡さずとも、defaultPropsに設定してる値を子コンポーネントで使用できていますね！

関数のデフォルト引数を使用したデフォルト値の設定

Functionalコンポーネントでは、関数のデフォルト引数を活用してデフォルト値を設定する方法もあります。この方法はdefaultPropsを使う代わりとしてよく利用されます。

Hello.js

import React from 'react';

function Hello({ name = "デフォルト値" }){

  return (
    <div>
      <h2>name: {name}</h2>
    </div>
  );
}

export default Hello;

ゆーや

引数で設定することも可能です！

こちらは自然な書き方で設定できますが、引数をたくさん受け取る時を考えると、

ちょっと悩ましいですね！

どちらを使うべきか？

ReactのFunctionalコンポーネントが主流になりつつある現在では、関数のデフォルト引数を使う方法が推奨される傾向があります。ただし、特定の理由でClassコンポーネントを使う場合や、既存のコードベースで一貫性を保つためにdefaultPropsを使う場合もあります。どちらを選ぶかはプロジェクトの要件やチームの方針に合わせると良いでしょう。