react-jsonschema-formについて

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実証実験中！

react-jsonschema-formについて

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(データモデルの定義）

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がほしいときには
けっこう便利そう
特にプロトタイピングのときとか

react-jsonschema-formについて

More Related Content

What's hot (20)

Viewers also liked (19)

More from Masakazu Muraoka (17)

react-jsonschema-formについて