JavaScript, React, EcmaScript-6：デフォルトプロップとデフォルトパラメータを徹底比較
React 関数コンポーネントにおけるデフォルトプロップとデフォルトパラメータ
デフォルトプロップは、コンポーネント定義内にオブジェクトとして宣言します。
function MyComponent(props) {
const defaultProps = {
color: 'blue',
fontSize: 16,
};
const { color = defaultProps.color, fontSize = defaultProps.fontSize } = props;
return <div style={{ color, fontSize }}>コンポーネント内容</div>;
}
この例では、color と fontSize という2つのプロパティにデフォルト値を設定しています。コンポーネント使用時にこれらのプロパティが渡されなければ、デフォルト値が使用されます。
デフォルトプロップの利点
- コンポーネントの仕様を明確に示せる
- デフォルト値を後から変更しやすい
- React 16.8以前では、コンポーネントのレンダリング時に毎回デフォルト値が生成されるため、パフォーマンスに影響を与える可能性がある
デフォルトパラメータは、関数の引数宣言時に直接値を設定します。
function MyComponent(props = { color: 'blue', fontSize: 16 }) {
const { color, fontSize } = props;
return <div style={{ color, fontSize }}>コンポーネント内容</div>;
}
- React 16.8以降では、デフォルトプロップよりもパフォーマンスが良い
- デフォルト値を簡潔に記述できる
- コンポーネントの仕様が分かりにくい
- デフォルト値の変更が分かりにくい
使い分け
一般的には、以下の要件に基づいて使い分けることをおすすめします。
- コンポーネントの仕様を明確にしたい、デフォルト値を後から変更する可能性がある: デフォルトプロップ
- パフォーマンスを重視し、デフォルト値の変更頻度が低い: デフォルトパラメータ
デフォルトプロップとデフォルトパラメータは、どちらもReact 関数コンポーネントでプロパティにデフォルト値を設定する方法です。それぞれの特徴と利点・欠点を理解し、状況に応じて適切な方法を選択しましょう。
デフォルトプロップを使用したサンプルコード
import React from 'react';
function MyComponent(props) {
const defaultProps = {
color: 'blue',
fontSize: 16,
};
const { color = defaultProps.color, fontSize = defaultProps.fontSize } = props;
return <div style={{ color, fontSize }}>コンポーネント内容</div>;
}
export default MyComponent;
コンポーネントを使用する場合は、以下のように記述します。
<MyComponent />
この場合、color と fontSize プロパティは渡されないため、デフォルト値の blue と 16 が使用されます。
<MyComponent color="red" fontSize={20} />
この場合、color プロパティは red に、fontSize プロパティは 20 に設定されます。
デフォルトパラメータを使用したサンプルコード
import React from 'react';
function MyComponent(props = { color: 'blue', fontSize: 16 }) {
const { color, fontSize } = props;
return <div style={{ color, fontSize }}>コンポーネント内容</div>;
}
export default MyComponent;
このコードは、デフォルトプロップを使用したサンプルコードとほぼ同じですが、デフォルト値を直接 props オブジェクトに設定しています。
コンポーネントを使用する場合は、デフォルトプロップの場合と同様に記述できます。
<MyComponent />
<MyComponent color="red" fontSize={20} />
React 関数コンポーネントでデフォルト値を設定するその他の方法
しかし、状況によっては、以下のようなその他の方法も検討できます。
useState フックを使用して、コンポーネント内部で状態を管理し、デフォルト値を設定する方法です。
import React, { useState } from 'react';
function MyComponent() {
const [color, setColor] = useState('blue');
const [fontSize, setFontSize] = useState(16);
return (
<div style={{ color, fontSize }}>
<button onClick={() => setColor('red')}>赤色に設定</button>
<button onClick={() => setFontSize(20)}>フォントサイズを20に設定</button>
</div>
);
}
export default MyComponent;
この例では、useState フックを使用して、color と fontSize という2つの状態変数を定義しています。これらの変数にデフォルト値を設定するために、初期値として blue と 16 を渡しています。
コンポーネント内でボタンをクリックすると、setColor と setFontSize 関数を使用して状態変数の値を変更できます。
カスタムフック
デフォルト値の設定ロジックを再利用したい場合は、カスタムフックを作成する方法もあります。
import React, { useState } from 'react';
function useDefaultProps(defaultValue) {
const [value, setValue] = useState(defaultValue);
return {
value,
setValue,
};
}
function MyComponent() {
const { color, setColor } = useDefaultProps('blue');
const { fontSize, setFontSize } = useDefaultProps(16);
return (
<div style={{ color, fontSize }}>
<button onClick={() => setColor('red')}>赤色に設定</button>
<button onClick={() => setFontSize(20)}>フォントサイズを20に設定</button>
</div>
);
}
export default MyComponent;
この例では、useDefaultProps というカスタムフックを作成しています。このフックは、引数として渡されたデフォルト値を初期値として useState フックを使用し、値と値を変更するための関数オブジェクトを返します。
MyComponent コンポーネントでは、useDefaultProps フックを2回呼び出して、color と fontSize プロパティにデフォルト値を設定しています。
ロジックコンポーネント
デフォルト値の設定ロジックをコンポーネントとしてカプセル化したい場合は、ロジックコンポーネントを作成する方法もあります。
import React from 'react';
function DefaultColor() {
return 'blue';
}
function DefaultFontSize() {
return 16;
}
function MyComponent() {
const color = DefaultColor();
const fontSize = DefaultFontSize();
return (
<div style={{ color, fontSize }}>
{/* コンポーネント内容 */}
</div>
);
}
export default MyComponent;
この例では、DefaultColor と DefaultFontSize という2つのロジックコンポーネントを作成しています。これらのコンポーネントは、それぞれデフォルト値を返すように設計されています。
MyComponent コンポーネントでは、DefaultColor と DefaultFontSize コンポーネントを呼び出して、デフォルト値を取得しています。
適切な方法の選択
- シンプルなデフォルト値の設定: デフォルトプロップまたはデフォルトパラメータがおすすめです。
- 状態管理が必要な場合:
useStateフックがおすすめです。
それぞれの方法の特徴と利点を理解し、状況に応じて適切な方法を選択しましょう。
上記以外にも、ライブラリなどを利用してデフォルト値を設定する方法もあります。
- defaultProps-es6: デフォルトプロップをより簡潔に記述するためのライブラリです。
javascript reactjs ecmascript-6
