ReactにおけるデフォルトPropsの「正解」：なぜ今、`defaultProps`は死んだのか
現場でコードレビューをしていると、未だに`defaultProps`を使っているコードに出くわすことがあります。Reactの歴史を知る古参のエンジニアなら懐かしさすら覚えるかもしれませんが、モダンなReact開発においては、これはもう「アンチパターン」と言わざるを得ません。
今日は、TypeScriptと関数コンポーネントが標準となった現代のReactにおいて、Propsのデフォルト値をどう扱うのが最もスマートで、かつ型安全なのか。その「現場のリアル」を解説します。
—
なぜ `defaultProps` は使わなくなったのか？
かつてクラスコンポーネントが主流だった時代、`static defaultProps` は救世主でした。しかし、関数コンポーネントに移行し、さらにTypeScriptが標準となった今、`defaultProps` を使う理由はほとんどありません。
最大の理由は「型推論との相性の悪さ」です。`defaultProps` を定義すると、TypeScriptは「このPropsは必ず渡される」という推論を正確に行えなくなることが多く、結果として `undefined` かどうかのチェックを余儀なくされたり、不格好な型定義を書く羽目になります。
ブラウザの裏側、つまりReactのレンダリングエンジンにとっても、関数引数のデフォルト値として処理させる方が、JavaScriptのネイティブな挙動（ES6のデフォルト引数）に直結するため、非常にクリーンです。
—
推奨される実装：ES6のデフォルト引数
モダンなReactにおけるベストプラクティスは、シンプルに「関数の引数でデフォルト値を代入する」こと。これに尽きます。
まずは、現場でそのまま使える実用的なサンプルを見てください。
type ButtonProps = {
label: string;
variant?: ‘primary’ | ‘secondary’; // オプション（省略可能）
disabled?: boolean;
};
/
- 実務でよく使うボタンコンポーネントの例
- 引数の分割代入とデフォルト値を組み合わせるのが最もクリーン
/
export const Button = ({
label,
variant = ‘primary’, // 未指定なら ‘primary’ を適用
disabled = false, // 未指定なら false を適用
}: ButtonProps) => {
return (
);
};
この書き方が「最強」である理由
1. 直感的な可読性: 関数定義のシグネチャを見るだけで、何がデフォルト値なのかが一目瞭然です。
2. 型定義との完全な同期: `variant?: ‘primary’ | ‘secondary’` と定義すれば、TypeScriptは「`undefined` が入る可能性がある」と理解し、デフォルト値でそれを補完するという関係性が明確になります。
3. ランタイムの負荷: ReactがPropsを処理する前にJSエンジンがデフォルト値を割り当てるため、余計なオーバーヘッドが発生しません。
—
「Propsが渡されたら上書き」の罠を回避する
一つだけ注意点があります。「`null` はデフォルト値の対象にならない」という点です。
JavaScriptのES6デフォルト引数は、値が `undefined` の場合にのみデフォルト値を適用します。もし親コンポーネントから意図的に `null` を渡した場合、デフォルト値は適用されません。
現場でよくある「Propsが渡されるはずなんだけど、たまにデータが取れなくて `null` が入ってくる」というケースには、以下のようなガードを書くのがプロの流儀です。
export const UserProfile = ({
name = ‘名無しさん’, // undefined ならこれが適用される
bio = ‘自己紹介文はありません’
}: {
name?: string | null;
bio?: string | null;
}) => {
// null が渡される可能性がある場合は、論理和(||)でフォールバックする
const displayName = name ?? ‘名無しさん’;
const displayBio = bio ?? ‘自己紹介文はありません’;
return (
{displayName}
{displayBio}
);
};
※ `??` (Nullish coalescing operator) を使うことで、`0` や `false` といった「値としての意味を持つ falsy な値」を誤って上書きする事故を防げます。
—
まとめ：明日からの設計指針
1. `defaultProps` はもう書かない: プロジェクトのコーディング規約に「禁止」と書いてもいいレベルです。
2. 分割代入でデフォルト値を設定する: 基本はこれで解決します。
3. `undefined` と `null` を区別する: APIレスポンスなど、`null` が飛んでくる可能性がある場合は `??` を活用する。
React開発は、いかに「書くコードを減らして、意図を明確にするか」の勝負です。複雑な仕組みを使わず、標準のJS機能に寄せていくことこそが、後からコードを読むメンバー、そして未来の自分を救うことになります。
現場からは以上です。さあ、エディタを開いて、プロジェクト内の `defaultProps` を検索し、リファクタリングを始めましょう！
コメント