react-jsonschema-formについて
2016.7.22
Developers in KOBE Vol. 7
BathTimeFish 村岡 正和
HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー
NPO法人日本ウェアラブルデバイスユーザー会理事
神戸市ウェアラブルデバイス推進会議メンバーなど
むらおか まさかず
村岡正和
Webアプリケーション開発 IT業務システム設計/開発
Webサービス導入/事業戦略コンサルティング
神戸デジタル・ラボ 社外取締役
@bathtimefish
HTML5-WEST.jp
Firefox OS 開発ガイドブック
http://amzn.to/292MeXl
今年も出ます。Maker Faire 2016!
ドアセンサーAPI実証実験中!
https://github.com/mozilla-services/react-jsonschema-form
JSON Schemaとは
簡単に言うとデータの定義をJSONで表現する仕様
データの有無、データの型等を定義するための共通語彙
などがまとめられている
Web APIなどでレスポンスされるJSONデータの
バリデーションに用いられる
http://json-schema.org/latest/json-schema-core.html
JSON Schemaを定義するだけで
Non ProgrammingでWebフォームが作成できる
Reactコンポーネント
react-jsonschema-form
https://mozilla-services.github.io/react-jsonschema-form/
JSON Schema(データモデルの定義)
UI Schema(UIの定義)
Form Data(フォームデータ値の定義)
様々なフォームUIを定義できる
uiSchemaで各フォームのclass属性を指定して
オーバライドできるっぽい
https://github.com/mozilla-services/react-jsonschema-form#custom-css-class-names
generator-react-webpackと組み合わせてみた
簡単にできた
https://github.com/bathtimefish/react-webpack-jsonschema-form-example
感 想
Reactでアプリつくってるときに
簡単なWeb Formがほしいときには
けっこう便利そう
特にプロトタイピングのときとか
Thanks !

react-jsonschema-formについて