100% ローカル — データがブラウザの外に出ることはありません

JSONをPropTypesに変換|形の違うpropが開発中に分かる

JSONのサンプルをPropTypesのshapeに変換します。オブジェクトごとに一つ、既定で必須になるので、形の違うpropは開発中のコンソールに出てきます。

高速 プライベート Cookieゼロ

JSON 入力

PropTypes 出力

このツールの動作

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だけで完結します。データがアップロードされることはないため、機密情報でも安心して利用でき、オフラインでも動作します。

よくある質問

React 19 でも動きますか。
React 経由では動きません。React 19 は部品の `propTypes` を完全に無視します。非推奨ではなく、検査そのものが取り除かれました。`prop-types` の配布物は、あなたが自分で呼ぶ独立した検証器として今も動き、以下の形も妥当な JavaScript のままです。React 19 で prop を検査したいなら、答えは TypeScript です。
なぜすべてに `.isRequired` が付くのですか。
標本にすべての鍵があったからです。それは荷ひとつについての主張であり、`.isRequired` はその正直な訳です。「そこにあった prop」という意味です。いつもあるかどうかは文書にありません。部品が無くても困らないものからは `.isRequired` を外してください。
この検査は本番の成果物に入りますか。
警告は入りません。React は PropTypes の検査を開発時にしか動かしておらず、ライブラリも同じ流儀に従います。形のオブジェクト自体は、束ね器が取り除かない限り同梱されます。大きな荷を描く `PropTypes.shape` を小さく保つ理由の一つです。

関連ツール