こんにちは！Reactの学習、楽しく進められていますか？
画面にボタンを表示できた！文字を出せた！と感動したあとに、必ずと言っていいほどぶ wall（壁）がありますよね。そう、それが「コンポーネントへのデータ受け渡し（Props）」と、今回の主役である「初期値の設定方法」です。
「親からデータが届かなかったときのために、あらかじめデフォルトの用意をしておきたい……あれ、書き方が2種類あるぞ？」
そう気づいて手が止まってしまったあなた、大丈夫ですよ。すごく自然な疑問です！
今回は、現場のエンジニアも一度は悩む「デフォルト引数」と「defaultProps」の使い分けについて、身近な例えを交えながら、優しく紐解いていきましょう。
—
そもそも「デフォルトの初期値」ってどういうこと？
想像してみてください。あなたは今、街で見かける「自動おみくじマシーン」を作っています。
このマシーンは、お客さんがボタンを押すと「大吉」や「凶」といった結果の文字を表示する仕組みです。でも、もしもうっかりデータを渡し忘れてしまって、マシーンが「……（無言）」となってしまったら困りますよね。
そんなときのために、「もし結果のデータが空っぽだったら、とりあえず『中吉』を表示しておいてね！」という「お守り」を用意しておくこと。これが、Propsの初期値設定（デフォルト値）です。
Reactの世界では、この初期値を設定する方法が歴史的経緯もあり、主に次の2つ存在します。
1. JavaScriptの標準機能である「デフォルト引数」
2. Reactが昔から用意してきた「defaultProps」
現代のReact開発では、どちらを使うべきなのでしょうか？結論からお伝えすると、「1のデフォルト引数を使いましょう！」というのが今のスタンダードです。その理由を、分かりやすく見ていきましょう。
—
1. 現代の主流！「デフォルト引数」の安心感
まずは、今のReactで一番おすすめされている「JavaScriptのデフォルト引数」を使った書き方です。
これは、関数を作る（定義する）ときに、`=` を使って「もし値が来なかったらこれにしてね」と直接書いてあげる方法です。
🛒 例え話：カフェの看板メニュー
カフェの店員さん（コンポーネント）を想像してください。「いらっしゃいませ、本日のドリンクは〇〇です！」と看板に書くお仕事です。
もし本部から「今日のドリンク名」の指示が届いていなかったら、店員さんは困る代わりに、あらかじめ決めておいた「本日のブレンドコーヒー」を看板に書くことにします。
コードで見てみましょう
import React from ‘react’;
// カフェの看板を表示するコンポーネント
// 引数のところで「drinkName = ‘本日のブレンドコーヒー’」と書くのがデフォルト引数です！
function CafeSign({ drinkName = ‘本日のブレンドコーヒー’ }) {
return (
本日のおすすめ
{drinkName}
);
}
export default function App() {
return (
{/ パターンB：データを何も渡していない場合（デフォルト引数が発動します！） /}
);
}
どうでしょう？すごくスッキリしていませんか？
関数を見た瞬間に「あ、何もデータが来なかったときはこれが使われるんだな」と一目で分かるのが、デフォルト引数の最高に優しいところです。
—
2. 昔ながらの「defaultProps」の正体
次に、ネット上の古い記事や、既存の大きなReactアプリでよく見かける`defaultProps`についてお話します。
これは、コンポーネントの機能として「おまけの初期値（defaultProps）」を後からくっつける書き方です。
import React from ‘react’;
function CafeSign({ drinkName }) {
return (
本日のおすすめ
{drinkName}
);
}
// コンポーネントの「外側」で初期値を定義する
CafeSign.defaultProps = {
drinkName: ‘本日のブレンドコーヒー’,
};
export default function App() {
return
}
「あれ、これでもちゃんと動くじゃん！何がダメなの？」と思いますよね。
実は、現場のエンジニアたちが `defaultProps` から離れつついのには、ちゃんとした理由があるんです。
なぜ `defaultProps` は避けられ始めているの？
1. コードが少し離れてしまう
関数本体と、初期値の設定場所が上下に離れてしまうため、コードが長くなったときに「あれ、初期値どこで設定したっけ？」とスクロールして探す手間が増えてしまいます。
2. TypeScript（型付け）との相性がちょっと複雑になる
最近のReact開発では、型安全（バグを未然に防ぐ仕組み）のためにTypeScriptを使うことが増えていますが、`defaultProps` を使うと型の推論（コンピュータが勝手に種類を予測してくれる機能）がうまく働かなくなるケースがあり、コードの記述が複雑になりがちでした。
3. React公式のロードマップでの位置づけ
実は、Reactの公式チームからも「関数コンポーネントにおける `defaultProps` は、将来的にサポートを縮小していく方向だよ」というアナウンスが出ています。
こうした理由から、今から新しくコードを書くなら、迷わずデフォルト引数を選ぶのが安全でスマートな選択なのです。
—
💡 初学者のあなたが安心して進むためのまとめ
ここまで読んでいただきありがとうございます！最後に、明日からのコーディングで迷わないためのポイントをギュッとまとめますね。
- 基本の選択: コンポーネントの引数（`props`）を受け取る場所で、`= ‘初期値’` と書く「デフォルト引数」を使いましょう。これが現代のスタンダードです。
- 困ったときは: もし古い教材や他の人のコードで `defaultProps` を見かけても、「あ、昔の書き方なんだな」と知っていれば焦る必要はありません。ご自身の書くコードでは、デフォルト引数に挑戦してみてください。
最初は覚えることが多くて、「合ってるかな……」と不安になることもあるかもしれませんが、一つひとつ実際にエディタにコードを書いて動かしていけば、必ず自分の血肉になっていきます。
あなたのReactの旅を、心から応援していますよ！今日も楽しくコードを書いていきましょう！
コメント