こんにちは！Reactの世界へようこそ。フロントエンドの現場を渡り歩いてきた私ですが、最初に言っておきます。あなたが今「Propsの受け渡しってなんだかややこしいな」「型定義とか難しそう…」と感じていたとしても、それは100%正常です。誰もが通る道ですから、どうか安心してくださいね。
さて、今回はReactの心臓部とも言える「Props（プロップス）」、そしてそのデータを安全にやり取りするための「PropTypes（プロップタイプス）」について、お茶でも飲みながらリラックスして紐解いていきましょう。
—
1. Propsってなに？ お店の「注文票」に例えてみよう
Reactの基本は「小さな部品（コンポーネント）を組み合わせて画面を作る」ことです。例えば、ボタンやカード、プロフィール欄などですね。
この部品たちに、「こういう文字を表示してね」「この色にしてね」と外からデータを渡す仕組みが Props です。
イメージしてみてください。あなたはハンバーガー屋さんでアルバイトをしています。
お客さんがカウンターにやってきて、こう注文票（Props）を渡しました。
- メニュー: チーズバーガー
- 個数: 2個
- ピクルス: 抜き
厨房にいる調理スタッフ（コンポーネント）は、この注文票を見てハンバーガーを作りますよね。もし、注文票に「メニュー：猫のぬいぐるみ」なんてヘンテコなものが書かれていたらどうでしょう？ 調理スタッフは困ってしまいますよね。
Reactの世界でも全く同じことが起きます。親から子へデータを渡すとき、「変なデータが渡されて、画面が真っ白になってエラーで崩れないようにしたい！」。そんな願いを叶えてくれるのが、今回主役の PropTypes なのです。
—
2. TypeScriptがあるのに、なぜ今更「PropTypes」なの？
ここで鋭い学習者なら、こう思うはずです。
「あれ？ 今のReact開発って、大体 `TypeScript` っていう強力な型チェックの仕組みを使うのが主流なんじゃなかったっけ？ なんで今更 PropTypes なの？」
その疑問、大正解です。実務でもTypeScriptはめちゃくちゃ使われています。
ですが、PropTypesにはTypeScriptにはない「独自の強み（お守りとしての役割）」があるんです。
- TypeScript: コードを書いている最中や、ビルド（実行する前の準備）する時に、「おいおい、ここ型が違うぞ！」と教えてくれる「事前の筆記試験」。
- PropTypes: アプリが実際に動いている最中（ランタイム）に、「今、変なデータが流れてきたよ！」とブラウザのコンソールで教えてくれる「実技チェック」。
TypeScriptを導入しているプロジェクトでも、「外部のAPIから予期せぬ変なデータが飛んできた時」や、JavaScriptと混ざったレガシーなコードベースでは、この PropTypes が最後の砦として画面を守ってくれることがあります。それに、何より仕組みがシンプルで、初学者のあなたが「データの型」を意識する第一歩としても非常に優秀なんです。
—
3. 実際に書いてみよう！ PropTypesの基本の「き」
百聞は一見に如かず。実際にコードを見てみましょう。
ここでは、ユーザーのプロフィールカードを表示するコンポーネントを作ってみます。
まずは、Reactと一緒に `prop-types` というパッケージをインポートして使います。
import React from ‘react’;
import PropTypes from ‘prop-types’; // こいつを召喚します！
// プロフィールを表示する子コンポーネント
function UserProfile(props) {
return (
お名前: {props.name}
年齢: {props.age}歳
ステータス: {props.isOnline ? ‘オンライン中 🟢’ : ‘オフライン 🔴’}
);
}
// ★ここが今回のキモ！PropTypesによるお約束（バリデーション）の定義
UserProfile.propTypes = {
name: PropTypes.string.isRequired, // 文字列であること。省略不可（必須）！
age: PropTypes.number, // 数値であること。
isOnline: PropTypes.bool, // 真偽値（true/false）であること。
};
export default UserProfile;
コードの解説：何が起きているの？
1. `UserProfile.propTypes` というおまじないをコンポーネントにくっつけています。
2. `name` は 文字列（string） で、しかも絶対に渡してほしいので `.isRequired` をつけています。「名前がないプロフィールなんてあり得ない！」という設計ですね。
3. `age` は 数値（number）、`isOnline` は 真偽値（bool） を指定しています。
もし、親から親切心のつもりで `age=”二十歳”` （文字列）なんて渡しちゃった日には、ブラウザの開発者ツールのコンソールに、赤文字で次のような警告を出して教えてくれます。
> Warning: Failed prop type: Invalid prop `age` of type `string` supplied to `UserProfile`, expected `number`.
> （おいおい、ageに文字列が渡ってるぞ！こっちは数字が欲しかったんだよ！）
画面が突然クラッシュして真っ白になるのを防ぎ、「開発者に優しく教えてくれるアラーム」として働いてくれるわけですね。
—
4. つまずきやすいポイントと、現場からのアドバイス
初心者の頃、よくやってしまうミスや、現場で気をつけておいた方がいいことをこっそりシェアしますね。
Q. 警告が出るだけで、アプリ自体は止まらないの？
A. はい、止まりません。
PropTypesはあくまで「警告（Warning）」を出すだけで、アプリの実行そのものを強制終了させるわけではありません。だからこそ気づきにくいこともあるのですが、「あ、コンソールが赤くなってるな」と気づいたら、速やかにデータを修正するサインとして受け取ってくださいね。
Q. すべてのPropsに書かなきゃダメ？
A. 無理して全部に書かなくても大丈夫です。
小さなコンポーネントや、データ構造が変わりやすい場所では少し窮屈に感じることもあります。「絶対に間違えてほしくない重要なデータ（IDや名前、コールバック関数など）」に絞って設定していくのが、無理なく続けられるコツですよ。
—
まとめ：怖がらなくて大丈夫、少しずつ仲良くなろう
今回は、実行時のProps検証を行う「PropTypes」についてお話ししました。
- Propsは、コンポーネントへの「注文票」。
- PropTypesは、変な注文が来たときに「ちょっと待った！」と教えてくれる頼もしい用心棒。
- TypeScriptとは役割が少し違うけれど、コードの安全性を高める温かいサポート役。
最初はルールが多くて難しく感じるかもしれませんが、自分で書いたコードが意図通りに動き、バリデーションがピタッとハマった時の気持ちよさは格別です。
もしエラーが出ても、「あ、用心棒がちゃんと仕事してくれたんだな」と優しく受け止めてあげてくださいね。あなたのReactの旅を、影ながらずっと応援しています！
コメント