このツールの動作
JSON の標本が PropTypes の形になります。オブジェクト一つにつき const が一つです。
{ "id": 1, "name": "Ada", "address": { "city": "Paris" } }
import PropTypes from 'prop-types';
export const AddressShape = PropTypes.shape({
city: PropTypes.string.isRequired,
});
export const RootShape = PropTypes.shape({
id: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
address: AddressShape.isRequired,
});
子が先です。これらは実行時の値であり、別の形から参照される前に存在している必要があります。根が配列なら、それ自身の const として PropTypes.arrayOf(UsersItemShape) がつきます。
必須とは「そこにあった」ということ
標本のすべての鍵が .isRequired で出ます。標本がそれを含んでいたからです。これは確かめられる主張であり、外れているところは一箇所消すだけで直ります。逆にすべてを省略可能とすれば、誰も見せていないデータについて主張することになり、肝心なところで検査が役に立たなくなります。
二つの場合だけ緩くしています。null と、型の分からない値は、どちらも .isRequired の付かない PropTypes.any になります。null は鍵があることを告げるだけで型については何も言いません。必須にすれば、標本が支える以上のことを主張してしまいます。
開発時だけ、それは承知のうえ
PropTypes の警告は開発時に出て、本番では飛ばされます。作りとしてそうなっています。これは欠陥ではなく取り決めです。最も高くつく場所で何の費用もかからない実行時検査、ということです。裏を返せば、壊れた荷が利用者のもとに届いても警告は一切出ません。PropTypes は開発の助けであって、検証の層ではありません。どこでも走る検証が要るなら、この場所の Zod 生成器がそれを出します。
React 19 はもう読まない
React 19 は部品の propTypes 検査を取り除きました。Component.propTypes への代入は、黙って何の効果も持ちません。prop-types は今も存在し、これらの形は自分で呼べる値のままです——PropTypes.checkPropTypes(…)——が、今日、新しい React で始めるなら、この生成器は新しいコードよりも既存のコードのためにあります。
標本ひとつの、いつもの限界
型の混ざった配列は PropTypes.oneOfType([...]) になり、見たものとちょうど同じ広さになります。空の配列は PropTypes.array になり、要素については何も述べません。妥当な識別子でない鍵は引用符を保ちます。JavaScript はそれを黙って受け入れます。
プライバシー
すべての処理はブラウザ内のJavaScriptだけで完結します。データがアップロードされることはないため、機密情報でも安心して利用でき、オフラインでも動作します。