こんにちは！Reactの世界へようこそ。
フロントエンドの最前線でコードを書いていると、たまに「型定義って正直面倒くさいな……」なんて思う日もあります。でもね、この「型」というやつは、実は「未来の自分を助けるための最強の保険」なんです。
今日は、ReactとTypeScriptを組み合わせて、Props（プロップス）にバシッと型を当てる方法について、一緒に紐解いていきましょう。難しいことは考えなくて大丈夫。「お買い物の注文書」をイメージしながら進めていきましょうね。
—
1. Propsってなんだっけ？「注文書」でイメージしよう
Reactのコンポーネントは、いわば「料理人」です。そしてPropsは、お客さんがキッチンに渡す「注文書」です。
例えば、「ハンバーグ」というメニューを作るコンポーネントがあったとします。
注文書（Props）には、こんなことが書かれていますよね。
- ソースの種類（デミグラスか、和風か）
- チーズをトッピングするか（はい／いいえ）
もし、注文書に「チーズ」という項目があるはずなのに、何も書かれていなかったら？ あるいは、ソースの種類を書く欄に突然「猫」なんて書かれていたら、キッチンはパニックですよね。
TypeScriptによる型定義は、この注文書の「記入ルール」を厳格に決めてしまう仕組みです。「ここには文字しか書いちゃダメ！」「トッピングは『あり』か『なし』しか選べないよ！」と決めておくことで、コードが壊れるのを未然に防ぐんです。
—
2. インターフェース（interface）でルールを作る
では、実際にコードを見てみましょう。`interface` という言葉が出てきますが、これは単なる「申込用紙のフォーマット」だと思ってください。
// 料理（コンポーネント）に必要な材料をリスト化します
interface HamburgerProps {
sauce: “demi-glace” | “japanese”; // ソースは2種類から選ぶ
hasCheese: boolean; // チーズは「あり」か「なし」か
price: number; // 値段は数字で書く
message?: string; // 「?」をつけると「書いても書かなくてもいい」という意味！
}
この `interface` を作っておけば、もし誰かが「ソース：いちごジャム」なんて書き込もうとした瞬間に、エディタが「ダメですよ！」と真っ赤な波線で教えてくれます。これが静的解析の威力です。
—
3. コンポーネントに型を当てはめる
さて、作ったルールを実際にコンポーネントに適用してみましょう。
// Reactのコンポーネントに、先ほどの「注文ルール（HamburgerProps）」を渡します
const Hamburger = ({ sauce, hasCheese, price, message }: HamburgerProps) => {
return (
ハンバーグ定食
ソース: {sauce}
チーズトッピング: {hasCheese ? “あり” : “なし”}
価格: {price}円
{/ messageは「?」をつけたので、なくてもエラーになりません /}
{message &&
備考: {message}
}
);
};
ここがポイント！
- `{ sauce, hasCheese, … }: HamburgerProps` のように書くことで、「このコンポーネントは、HamburgerPropsというルールに従って動くよ」と宣言しています。
- もし、呼び出す側（親コンポーネント）で `price` を渡し忘れたら？ エディタが即座に「priceがないよ！」と怒ってくれます。これが、夜中のバグを減らす魔法なんです。
—
4. なぜこれが「最高」なのか？
初心者のうちは「コードを書く量が増えて面倒だな」と感じるかもしれません。でも、想像してみてください。
数ヶ月後、久しぶりに自分で書いたコードを開いたとき、「あれ、このコンポーネントって何を渡せば動くんだっけ？」と迷うことはありませんか？ そんなとき、型定義があれば、エディタが「必要なのはソースとチーズと価格だよ！」と全部教えてくれます。
型定義は、未来の自分へのラブレターであり、チームメンバーへの優しさです。
—
最後に：つまずいても大丈夫
最初はエラーメッセージが怖く感じるかもしれません。「型が合いません」と怒られて、心が折れそうになることもあるでしょう。でも大丈夫、それはエディタが「君のコードをバグから守ろうとしている」証拠です。
まずは「なんとなく、Propsにルールを書いてみる」ことから始めてみてください。完璧である必要はありません。今日この一歩を踏み出しただけで、あなたはもう、以前よりずっと「プロフェッショナルなエンジニア」に近づいています。
また何か分からないことがあれば、いつでも聞きに来てくださいね。一緒に一歩ずつ、楽しくコードを書いていきましょう！
コメント