Webでフォームを作り、さらにそれを運用するのは意外と面倒です。入力チェックを作ったりするのも大変ですし、それが複数あったりすると嫌になってしまうでしょう。 そこで使ってみたいのがreact-jsonschema-formです。JSON Schemaを使ってフォームを生成するReactライブラリです。

react-jsonschema-formの使い方

デモです。JSON Schemaの他、UISchemaと呼ぶ入力設定のJSONも使います。

JSON Schemaがネスとしている場合にも対応しています。

データが配列の場合もOKです。項目を自由に追加、削除できます。

バリデーションにももちろん対応。

日付のようなinput.type設定も可能です。

Reactでフォーム全体を書くのは意外と面倒ですが、react-jsonschema-formならばJSON SchemaとUISchemaさえ用意すれば良くなります。データの入力再現も簡単なので、Reactアプリケーションでフォームを使う場合は積極的に使っていきたいソフトウェアです。

react-jsonschema-formはReact/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。

react-jsonschema-form playground mozilla-services/react-jsonschema-form: A React component for building Web forms from JSONSchema.