こんにちは！Reactの世界へようこそ。
フロントエンドの最前線でコードを書き続けていると、たまに「あぁ、この概念、最初に教えてくれる人がいたらどんなに楽だっただろう」と思うことがあります。
今日は、ReactとTypeScriptを組み合わせる際に誰もが一度は悩み、そして「なるほど！」と腑に落ちる「オプショナルProps（任意設定のプロパティ）」についてお話しします。
難しく考えすぎなくて大丈夫。まずは、カフェでの注文をイメージしてみてください。
—
「あったら嬉しい」を伝える魔法の記号：`?`
Reactのコンポーネントは、いわば「メニュー」です。親コンポーネントから「これを使ってね！」とデータ（Props）を渡すとき、TypeScriptでは「これは絶対に必要なものですか？」を厳密に決める必要があります。
例えば、「名前（name）」は必須だけど、「ニックネーム（nickname）」はあってもなくてもいい、という状況。これをコードで書くとき、私たちは`?`（クエスチョンマーク）という魔法の記号を使います。
コードで見てみよう
まずは、このコードを眺めてみてください。
// ユーザー情報を表示するコンポーネント
type UserProps = {
name: string; // これは必須！ないとエラーになる
nickname?: string; // ?がついているので「なくてもいいよ」という意味
};
const UserCard = ({ name, nickname }: UserProps) => {
return (
名前: {name}
{/ ニックネームがあるときだけ表示したい！ /}
ニックネーム: {nickname ?? “なし”}
);
};
ここで使った `nickname?: string` が、まさに「オプショナル」の正体です。
`?` を付けるだけで、TypeScriptは「この値は `undefined`（中身が空っぽ）である可能性があるよ」と優しく教えてくれます。
—
現場でよくある「うっかり」と「安心感」
初心者の頃、僕もよく悩みました。「`?` をつけた後、中身が空っぽだったらどうすればいいの？」と。
実は、`?` をつけると、その変数は自動的に「文字列かもしれないし、`undefined` かもしれない」という状態になります。何も対策せずに画面に表示しようとすると、真っ白な画面になったりエラーが出たりすることがありますよね。
そんなとき、現場のエンジニアがよく使うのが「デフォルト値」という考え方です。
「空っぽなら、こうしてね」と教えてあげる
さっきのコードに、少しだけ工夫を加えてみましょう。
const UserCard = ({ name, nickname = “呼び名なし” }: UserProps) => {
// nicknameが空っぽ（undefined）のときは、自動的に「呼び名なし」が入る！
return (
名前: {name}
ニックネーム: {nickname}
);
};
このように、引数のところで `= “呼び名なし”` と書いておくと、親コンポーネントがニックネームを渡し忘れても、コンポーネント側で勝手に補完してくれるんです。これ、すごく便利で安心ですよね。
—
なぜ TypeScript で書くのか？
「わざわざ `?` とか `undefined` とか気にしなきゃいけないの？ 面倒じゃない？」と思うかもしれません。
でもね、これは「未来の自分へのプレゼント」なんです。
数ヶ月後にこのコードを読み返したとき、「あ、このニックネームは入れなくても動くんだな」とひと目で分かれば、バグを防ぐことができます。TypeScriptは、僕たちのうっかりミスを未然に防いでくれる、頼もしい相棒のような存在なんです。
—
まとめ：怖がらなくて大丈夫！
今日覚えて帰ってほしいのは、たったの2点です。
1. `?` をつければ「任意（あってもなくてもいい）」になる。
2. `undefined`（空っぽ）が怖いときは、デフォルト値を用意してあげれば安心。
Reactの学習は、パズルを組み立てるようなものです。最初から完璧を目指さなくても大丈夫。まずは「あ、この値はあってもなくてもいいやつだな」と思ったら `?` をつけてみてください。
もしエラーが出ても、それはTypeScriptが「ここ、中身が空っぽかもしれないから気をつけてね！」と親切に教えてくれているサインです。それを一つずつケアしていけば、あなたの書くコードはどんどん強固で、美しいものになっていきますよ。
何か分からないことがあったら、いつでも聞いてくださいね。応援しています！
コメント