react-jsonschema-formについて

1. react-jsonschema-formについて
2016.7.22
Developers in KOBE Vol. 7
BathTimeFish 村岡 正和

2. HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー
NPO法人日本ウェアラブルデバイスユーザー会理事
神戸市ウェアラブルデバイス推進会議メンバーなど
むらおか まさかず
村岡正和
Webアプリケーション開発 IT業務システム設計/開発
Webサービス導入/事業戦略コンサルティング
神戸デジタル・ラボ 社外取締役
@bathtimefish
HTML5-WEST.jp

3. Firefox OS 開発ガイドブック
http://amzn.to/292MeXl

4. 今年も出ます。Maker Faire 2016！

5. ドアセンサーAPI実証実験中！

7. https://github.com/mozilla-services/react-jsonschema-form

8. JSON Schemaとは
簡単に言うとデータの定義をJSONで表現する仕様
データの有無、データの型等を定義するための共通語彙
などがまとめられている
Web APIなどでレスポンスされるJSONデータの
バリデーションに用いられる

9. http://json-schema.org/latest/json-schema-core.html

10. JSON Schemaを定義するだけで
Non ProgrammingでWebフォームが作成できる
Reactコンポーネント
react-jsonschema-form

11. https://mozilla-services.github.io/react-jsonschema-form/

12. JSON Schema(データモデルの定義）

13. UI Schema(UIの定義）

14. Form Data(フォームデータ値の定義）

15. 様々なフォームUIを定義できる

16. uiSchemaで各フォームのclass属性を指定して
オーバライドできるっぽい
https://github.com/mozilla-services/react-jsonschema-form#custom-css-class-names

17. generator-react-webpackと組み合わせてみた

18. 簡単にできた

19. https://github.com/bathtimefish/react-webpack-jsonschema-form-example

20. 感 想
Reactでアプリつくってるときに
簡単なWeb Formがほしいときには
けっこう便利そう
特にプロトタイピングのときとか

21. Thanks !