こんにちは！Reactの世界へようこそ。チーフアーキテクトの私です。
Reactを学び始めの頃って、次から次へと新しい概念が出てきて、頭がパンクしそうになりますよね。「コンポーネント」「State」「Props」……。うんうん、その気持ち痛いほどよく分かります。私も昔は、画面に何も表示されなくて夜中に天井を見上げたものです。
でも、大丈夫ですよ。一つひとつ、身近なものに例えて紐解いていけば、必ず「なーんだ、そういうことか！」と腑に落ちる瞬間がやってきます。
今回は、そんなReactの基礎のキモである「Props（プロップス）のデフォルト値（初期値）」について、おしゃべりするように優しく、でも実務でスグに使える確かな知識をお伝えしていきますね。
—
そもそも「Props」ってなんだっけ？
難しい言葉を覚える必要はありません。Propsとは、一言で言うと「親から子へ渡すお使いのメモ」です。
例えば、あなたが街の小さなカフェの店長さんだとしましょう。メニュー表（コンポーネント）を作る時、「今日のオススメのメニュー名」や「値段」を、その都度書き換えてお客さん（画面）に出したいですよね。
このとき、親である店長が、子であるメニュー表に対して「今日のオススメは『カフェラテ』ね！」と渡すデータ、これがPropsです。
—
デフォルトPropsって、どういうこと？
さて、ここで問題です。
もし、うっかり店長が「今日のオススメ」のメモを渡し忘れてしまったら、メニュー表はどうなってしまうでしょうか？
「えっ、今日のおすすめ何！？ 空欄になっちゃったよ！」と、画面がパニックを起こしてエラーで真っ白になってしまうかもしれません。それは困りますよね。
そんなときにあらかじめ、
「もし店長からメモをもらえなかったら、とりあえず定番の『ブレンドコーヒー』にしておいてね！」
と決めておくお約束。これが「デフォルトProps（初期値）」です。
日々のWeb制作やアプリ開発でも、「値が渡されなかったときのために、安全ネットを張っておく」というのは、プロの現場でもめちゃくちゃ大事なテクニックなんですよ。
—
JavaScript（ES6）の「デフォルト引数」でスッキリ書こう
昔のReactでは `defaultProps` という専用の書き方をしていましたが、今のモダンなReact（そして私たちプロが日常的に使っているスタイル）では、JavaScriptの機能である「デフォルト引数」を使うのが主流です。
実際のコードを見てみましょう。身近な「ボタン」を例にしますね。
// ボタンコンポーネント
// 引数のところで「= ‘クリックしてね’` と書くのがデフォルト引数です！
const Button = ({ text = “クリックしてね”, color = “blue” }) => {
return (
);
};
export default Button;
これ、すごくスッキリしていませんか？
`text` や `color` というPropsが親から渡されなかった場合、自動的にそれぞれ `”クリックしてね”` と `”blue”` が代入される仕組みになっています。
親側でこう使います。
import React from ‘react’;
import Button from ‘./Button’;
function App() {
return (
{/ 2. あえてPropsを何も渡さないパターン（デフォルト値が使われます！） /}
);
}
export default App;
2つ目の `` では、何も文字や色を指定していませんが、コンポーネント側で「もし無ければこれ！」と決めてあるので、画面には「クリックしてね」と書かれた青いボタンがちゃんと表示されます。優しい世界ですね。
—
TypeScriptで「型安全」に守ってもらおう
さて、ここから少しだけステップアップ。
「型（Type）」という言葉を聞いて、アレルギー反応を起こしていませんか？「うっ、TypeScript難しそう…」と思いました？
大丈夫、深呼吸してください。TypeScriptはあなたを縛る厳しい警察官ではなく、うっかりミスを防いでくれる「超優秀で優しいアシスタント」です。
先ほどのボタンの例に、TypeScriptの型をつけてみましょう。
import React from ‘react’;
// 1. まず、このボタンが受け取れるPropsの「設計図（インターフェース）」を作ります
interface ButtonProps {
text?: string; // 「?」をつけることで、「このデータは渡されないこともあるよ（任意だよ）」と伝えます
color?: string; // こっちも同様に任意
}
// 2. コンポーネントにその設計図を教えつつ、デフォルト値を設定します
const Button: React.FC
text = “クリックしてね”,
color = “blue”
}) => {
return (
);
};
export default Button;
ここで「なるほど！」と膝を打つポイント
`text?: string` のように、ハテナ（`?`）をつけていることに注目してください。
これが「このPropsはなくてもいい（省略可能）」という意味になります。
そして、引数のところで `= “クリックしてね”` と初期値を書くことで、TypeScriptに対してこう伝えているんです。
「おにいさん、親からデータが来なかったときは、ボクが責任を持ってこのデフォルト値を入れるから、型エラー（怒りマーク）を出さないでね！」
この組み合わせ（`?` による任意の型定義 ＋ デフォルト引数）が、実務の現場で最も美しく、エラーの起きない鉄板のパターンとして愛用されています。
—
まとめ：今日から使える小さな自信
お疲れ様でした！ここまで読んでくださりありがとうございます。
今回のポイントをギュッと凝縮して振り返ってみましょう。
1. Propsのデフォルト値は、データが届かなかったときの「安心の安全ネット」
2. 書き方はシンプルに、引数のところで `({ name = “初期値” })` と書くだけ
3. TypeScriptを使うときは、型定義に `?` をつけて、デフォルト値をセットであげる
最初は呪文のように見えたコードも、こうして「お使いのメモ」や「お店のメニュー」に置き換えてみると、なんだか少し身近に感じられるようになったのではないでしょうか？
Web制作やアプリ開発の道は長いですが、つまずいたときはいつでも立ち止まって、今日覚えた「安全ネット」の存在を思い出してくださいね。あなたのReactライフが、少しでも楽しく温かいものになりますように。
それでは、次のコンポーネントの旅へ、いってらっしゃい！
コメント