【実務・中級編】デフォルトPropsの設定パターン – React実践ガイド

脱・古い常識。Reactの「デフォルトProps」をモダンに書き換える技術

現場でコードレビューをしていると、未だに「あ、それ昔の書き方だね」と指摘したくなるような、レガシーなパターンに出くわすことがよくある。特にReactにおける「デフォルトPropsの指定方法」は、Reactの歴史の中で大きな転換点を迎えた部分だ。

今日は、中級エンジニアの君たちに向けて、なぜ今「関数引数のデフォルト値」を使うべきなのか、そしてそれがなぜReactのパフォーマンスや保守性に直結するのかを、少し裏側の話も含めて解説しようと思う。

—

1. なぜ `defaultProps` は「過去の遺物」になりつつあるのか

かつて、Reactコンポーネントでデフォルト値を設定するには `MyComponent.defaultProps = { … }` と書くのが定石だった。君たちも一度は目にしたことがあるだろう。

しかし、今のモダンなReact開発（特にTypeScript環境）において、これは非推奨に近い扱いだ。なぜか？

1. 型推論の不整合: `defaultProps` はTypeScriptの静的解析と相性が悪い。プロパティが「必須」なのか「任意」なのかの境界が曖昧になりやすく、推論が狂う原因になる。
2. 実行時のオーバーヘッド: ブラウザのJSエンジンにとって、プロパティの代入は単なる値の初期化よりもコストがかかる。
3. 可読性の分断: コンポーネントの定義箇所と、デフォルト値の定義箇所が離れてしまうため、コードを追う際に行ったり来たりする必要がある。

結論から言えば、現代のReactでは 「ES6のデフォルト引数構文」 を使うのが最強のプラクティスだ。

—

2. 現場で即採用すべき「デフォルト引数」パターン

書き方は至ってシンプルだ。コンポーネントの引数（props）を分割代入する際、そのままデフォルト値を割り当てる。これだけで、Reactの仮想DOM処理系は綺麗に型を解決し、最適化された形でレンダリングを実行してくれる。

// コンポーネントのProps型定義
interface ButtonProps {
label: string;
variant?: ‘primary’ | ‘secondary’; // オプショナルなプロパティ
disabled?: boolean;
}

推奨パターン：関数の引数で直接デフォルト値を定義する

/
const Button = ({
label,
variant = ‘primary’, // 渡されなかったらデフォルトで’primary’にする
disabled = false, // 渡されなかったらデフォルトでfalseにする
}: ButtonProps) => {

return (

);
};

export default Button;

なぜこれが「綺麗」なのか？

ブラウザのJavaScriptエンジン（V8など）は、関数の引数が `undefined` であることを検知して、即座にデフォルト値をメモリ上にバインドする。これはReactコンポーネントが呼び出される直前の、極めて低コストな処理だ。

また、TypeScriptの型定義と完全に同期しているため、`variant` を渡さなくても型エラーは起きず、かつ内部では確実に値が存在することが保証される。これが実務で「バグを減らす」ための最適解だ。

—

3. 注意点：オブジェクト全体が渡されない場合

中級者ほど陥りやすい罠がある。それは「Propsオブジェクトそのものが `undefined` になるケース」だ。例えば、親コンポーネントが `;
};

ただし、実務では `interface` で `label` を必須（`string`）にして、親側で必ず渡すように設計するのが基本だ。デフォルト値を多用しすぎると「どの値がどこから来たのか」が見えなくなる「マジック・ナンバー」的な弊害が出る。「デフォルト値はあくまで保険である」 という哲学を忘れないでほしい。

—

4. チーフアーキテクトからのアドバイス

実務でコードを書く際、君たちには「そのコードがブラウザでどう展開されるか」を少しだけ想像してみてほしい。

`defaultProps` を使っていた頃は、Reactが内部で「Propsをマージする」という動的な処理を挟んでいた。今の書き方は、純粋なJSの挙動として処理される。つまり、Reactのランタイムを頼るのではなく、JavaScriptの言語仕様に頼る。これこそが、パフォーマンスを削り出し、バグを未然に防ぐアーキテクトの視点だ。

明日からのコードレビューで、もし `defaultProps` を見かけたら、ぜひこう言ってやってくれ。
「これ、モダンなデフォルト引数で書き換えない？そっちの方が型も綺麗に効くし、何よりコードがスッキリするよ」と。

それが、君たちのチームの技術力を一段階引き上げるきっかけになるはずだ。