こんにちは！Reactの世界へようこそ。
フロントエンドの荒波を渡り歩いてきた身として、今日はお話ししたいことがあります。
Reactを学び始めると、コンポーネントをたくさん作って、親から子へデータを渡す「Props」という仕組みに出会いますよね。でも、ふとこんな不安を感じたことはありませんか？
「あれ、このコンポーネントに渡すはずのデータ、数字だっけ？ 文字列だっけ？」
「うっかり『名前』を渡すべき場所に『年齢』を渡しちゃったけど、画面はどうなっちゃうんだろう……」
今日は、そんなあなたの不安を魔法のように解消してくれる「PropTypes」という頼もしい相棒についてお話ししますね。
—
1. PropTypesは「配送センターの検品係」
想像してみてください。あなたは今、大きなおもちゃ工場のラインで働いています。
いろんなパーツ（Props）がベルトコンベアで流れてきて、それを組み立てておもちゃ（コンポーネント）を作ります。
もし、組み立て説明書には「赤いネジ」が必要だと書いてあるのに、誰かが間違えて「青い消しゴム」を流してきたらどうなるでしょう？ おもちゃは完成しませんよね。
PropTypesは、まさにそのベルトコンベアの入り口に立っている「超優秀な検品係」なんです。
「おーい、それは赤いネジじゃないよ！消しゴムだよ！」
と、おもちゃが壊れる前に、現場（開発中のブラウザ画面のコンソール）で大きな声で教えてくれる。それがPropTypesの役割です。
2. なぜ型チェックが必要なのか？
「動けばいいじゃん」と思うかもしれません。でも、アプリが大きくなると、どこで間違ったのかを探すのは、広大な迷路で落とし物を探すくらい大変です。
PropTypesを使うと、「バグが発生したその場所」で「何が間違っていたか」をすぐに教えてくれます。 これがどれだけ開発者の精神安定につながるか、計り知れません。
—
3. さっそく書いてみよう！
まずは、ReactアプリにPropTypesを取り入れてみましょう。
（※最近のReactプロジェクトでは個別のインストールが必要な場合が多いので、`npm install prop-types` を忘れずに！）
例えば、「ユーザーの名前」と「年齢」を表示するシンプルなコンポーネントを作ってみます。
import React from ‘react’;
import PropTypes from ‘prop-types’; // これを忘れずにインポート！
const UserCard = ({ name, age }) => {
return (
名前: {name}
年齢: {age}
);
};
// ここで「検品ルール」を定義します！
UserCard.propTypes = {
// nameは「文字列（string）」であるべき！
name: PropTypes.string.isRequired,
// ageは「数値（number）」であるべき！
age: PropTypes.number.isRequired,
};
export default UserCard;
このコードのポイント
- `.isRequired`: 「これは絶対にないと困る！」という必須項目につけます。これがないと、データが渡ってこなかった時に怒ってくれます。
- `.string` や `.number`: データの形を指定します。他にも配列なら `.array`、関数なら `.func` など、バリエーションも豊富です。
もし、ここで誤って `age=”二十歳”`（文字列）のように渡すと、開発者ツールを開いた時に「おいおい、ここは数字（number）じゃないとダメだよ！」と、ブラウザが赤字で優しく指摘してくれます。
—
4. 初学者のあなたへ伝えたいこと
ここまで読んで「覚えることが増えたな……」と少し疲れてしまったかもしれませんね。大丈夫ですよ。
最初は、全部のコンポーネントに細かく書かなくてもいいんです。まずは「自分がいま一番『何が入ってくるか不安だな』と思うコンポーネント」にだけ書いてみてください。
- 「あれ、このデータは空っぽになることもあるのかな？」→ `isRequired` を外してみる
- 「これって配列だっけ？」→ `PropTypes.arrayOf` を調べてみる
このように、少しずつ「検品ルール」を増やしていく感覚でOKです。
最後に
型チェックは、「未来の自分へのラブレター」です。
数ヶ月後、久しぶりに自分のコードを開いたとき、PropTypesが書いてあると「ああ、ここは数字を渡せばいいんだな」と、コードが自分に語りかけてくれます。
Reactは自由度が高い分、迷子になりやすいフレームワークです。でも、こうやって少しずつ「お約束」を守る癖をつけていくことで、あなたの書くコードは驚くほど読みやすく、そして壊れにくいものに変わっていきますよ。
まずは小さな一歩から。今日のコードに、ひとつだけ `propTypes` を書いてみませんか？ それだけで、あなたはもう一歩、プロフェッショナルに近づいていますよ！
コメント