HTMLフォーム入力からJSONを生成できるWebサービスで遊んでみよう ( react-jsonschema-form )

## サービス

- [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form) の [Playground](https://mozilla-services.github.io/react-jsonschema-form/)
- あくまで「遊び場」「お試し場」という位置づけなので注意
- 本格的に使う場合は自サーバーを立てるなどした方が良いかも

## 特徴

- HTMLの入力フォームを使ってJSONを組み立てられる
- 欲しいJSONフォーマット自体もJSONで定義できる
- フォーム入力からリアルタイムでJSONに変換してくれる
- リアルタイムにバリデーションをかけて、不正な値はエラーを返してくれる
- サーバーへの接続を必要としない
  - このPlayground自体はWebサービスとして動いているが、JSONへの変換自体はブラウザのJavascriptでおこなわれる
- 自作のPlaygroundにURLを割り当てて共有できる
  - 共有URLではすべての状態が保たれる ( 後述の3要素すべて )


## 3つの要素

- **JSONSchema** (JSON定義)
  - 生成したいJSONの構造自体をJSONで定義できる
- **formData** (JSON出力)
  - HTMLフォームへの入力がここにJSONとして出力される
- **UISchema** (インターフェイス定義)
  - HTML的に入力欄の形式を変えたりできる
  - オプション要素なので使わなくてもOK

## チュートリアル

[Example Playground](https://mozilla-services.github.io/react-jsonschema-form/#eyJmb3JtRGF0YSI6eyJmaXJzdE5hbWUiOiIiLCJsYXN0TmFtZSI6IiJ9LCJzY2hlbWEiOnsidGl0bGUiOiJTb21lIEZvcm0iLCJ0eXBlIjoib2JqZWN0IiwicHJvcGVydGllcyI6eyJmaXJzdE5hbWUiOnsidHlwZSI6InN0cmluZyIsInRpdGxlIjoiRmlyc3QgbmFtZSJ9LCJsYXN0TmFtZSI6eyJ0eXBlIjoic3RyaW5nIiwidGl0bGUiOiJMYXN0IG5hbWUifX19LCJ1aVNjaGVtYSI6e319) にアクセスする

### フォーム入力 => JSONへの変換

`First Name` に名前を入れてみよう。
"**formData**" にJSONが生成されるのが分かる。

![image](https://user-images.githubusercontent.com/13635059/44028591-4b9e5462-9f35-11e8-8670-bd7bd6450ede.png)

### JSONの編集 => フォームへの反映

逆に **formData** のJSONを直接編集するとフォームに反映される。

![image](https://user-images.githubusercontent.com/13635059/44028612-570cb258-9f35-11e8-99c0-9e1c1da1f7ad.png)

## JSON定義の変更

JSON定義 ( **JSONSchema**. ) にミドルネーム `MiddleName` を追加してみよう。

```diff
{
  "title": "Some Form",
  "type": "object",
  "properties": {
    "firstName": {
      "type": "string",
      "title": "First name"
    },
+    "MiddleName": {
+      "type": "string",
+      "title": "Middle Name"
+    },
    "lastName": {
      "type": "string",
      "title": "Last name"
    }
  }
}
```

リアルタイムでHTMLフォームに入力欄が表れ、入力可能になる。

![image](https://user-images.githubusercontent.com/13635059/44028673-941c1e86-9f35-11e8-8a8e-da51c84540b2.png)

[Share](https://mozilla-services.github.io/react-jsonschema-form/#eyJmb3JtRGF0YSI6eyJmaXJzdE5hbWUiOiJZdW1hIiwiTWlkZGxlTmFtZSI6IkFsb25lIiwibGFzdE5hbWUiOiJJbmF1cmEifSwic2NoZW1hIjp7InRpdGxlIjoiQSByZWdpc3RyYXRpb24gZm9ybSIsImRlc2NyaXB0aW9uIjoiQSBzaW1wbGUgZm9ybSBleGFtcGxlLiIsInR5cGUiOiJvYmplY3QiLCJwcm9wZXJ0aWVzIjp7ImZpcnN0TmFtZSI6eyJ0eXBlIjoic3RyaW5nIiwidGl0bGUiOiJGaXJzdCBuYW1lIn0sIk1pZGRsZU5hbWUiOnsidHlwZSI6InN0cmluZyIsInRpdGxlIjoiTWlkZGxlIE5hbWUifSwibGFzdE5hbWUiOnsidHlwZSI6InN0cmluZyIsInRpdGxlIjoiTGFzdCBuYW1lIn19fSwidWlTY2hlbWEiOnt9fQ==)

## フォーマット

次に誕生日を日付フォーマットで入力できるようにしてみよう。
**JSONSchema** に "birthday" プロパティを追加する。

```diff
{
  "title": "Some Form",
  "type": "object",
  "properties": {
+    "birthday": {
+      "type": "string",
+      "format": "date",
+      "title": "Birthday"
+    },
    "firstName": {
      "type": "string",
      "title": "First name"
    },
    "MiddleName": {
      "type": "string",
      "title": "Middle Name"
    },
    "lastName": {
      "type": "string",
      "title": "Last name"
    }
  }
}
```

するとHTMLフォームでも日付型を入力できるようになるのが分かる。

![image](https://user-images.githubusercontent.com/13635059/44028715-be62f66a-9f35-11e8-8eaf-ad5a94f459ff.png)


[Share](https://mozilla-services.github.io/react-jsonschema-form/#eyJmb3JtRGF0YSI6eyJiaXJ0aGRheSI6IjIwMDEtMDEtMDEiLCJmaXJzdE5hbWUiOiJZdW1hIiwiTWlkZGxlTmFtZSI6IkFsb25lIiwibGFzdE5hbWUiOiJJbmF1cmEifSwic2NoZW1hIjp7InRpdGxlIjoiU29tZSBGb3JtIiwidHlwZSI6Im9iamVjdCIsInByb3BlcnRpZXMiOnsiYmlydGhkYXkiOnsidHlwZSI6InN0cmluZyIsImZvcm1hdCI6ImRhdGUiLCJ0aXRsZSI6IkJpcnRoZGF5In0sImZpcnN0TmFtZSI6eyJ0eXBlIjoic3RyaW5nIiwidGl0bGUiOiJGaXJzdCBuYW1lIn0sIk1pZGRsZU5hbWUiOnsidHlwZSI6InN0cmluZyIsInRpdGxlIjoiTWlkZGxlIE5hbWUifSwibGFzdE5hbWUiOnsidHlwZSI6InN0cmluZyIsInRpdGxlIjoiTGFzdCBuYW1lIn19fSwidWlTY2hlbWEiOnt9fQ==)

## インターフェイス定義を変えてみる

HTMLフォームのインターフェイスにも細かな指定ができる。

ここでは誕生日の入力欄を変更してみる。

**UISchema** に次のように入力する。

```diff
{
+  "birthday": {
+    "ui:widget": "alt-date",
+    "ui:options": {
+      "yearsRange": [
+        2000,
+        2010
+      ]
+    }
+  }
}
```

年/月/日に分かれた古き良きフォーム形式に変わったのが分かる。
`yearsRange` が選べる年のラインナップとして反映されている。

![image](https://user-images.githubusercontent.com/13635059/44028747-e119729c-9f35-11e8-9aff-ce8bd5a0f464.png)

[Share](https://mozilla-services.github.io/react-jsonschema-form/#eyJmb3JtRGF0YSI6eyJiaXJ0aGRheSI6IjIwMDEtMDEtMDEiLCJmaXJzdE5hbWUiOiJZdW1hIiwiTWlkZGxlTmFtZSI6IkFsb25lIiwibGFzdE5hbWUiOiJJbmF1cmEifSwic2NoZW1hIjp7InRpdGxlIjoiU29tZSBGb3JtIiwidHlwZSI6Im9iamVjdCIsInByb3BlcnRpZXMiOnsiYmlydGhkYXkiOnsidHlwZSI6InN0cmluZyIsImZvcm1hdCI6ImRhdGUiLCJ0aXRsZSI6IkJpcnRoZGF5In0sImZpcnN0TmFtZSI6eyJ0eXBlIjoic3RyaW5nIiwidGl0bGUiOiJGaXJzdCBuYW1lIn0sIk1pZGRsZU5hbWUiOnsidHlwZSI6InN0cmluZyIsInRpdGxlIjoiTWlkZGxlIE5hbWUifSwibGFzdE5hbWUiOnsidHlwZSI6InN0cmluZyIsInRpdGxlIjoiTGFzdCBuYW1lIn19fSwidWlTY2hlbWEiOnsiYmlydGhkYXkiOnsidWk6d2lkZ2V0IjoiYWx0LWRhdGUiLCJ1aTpvcHRpb25zIjp7InllYXJzUmFuZ2UiOlsyMDAwLDIwMTBdfX19fQ==)

## 共有

Shareボタンからいつでも共有URLをゲット出来る。
共有目的だけではなくて「この状態を保存しておきたい！」というときにも良いかも。

* 日本語を使うと共有ボタンを押しても反応がなかった。Playground側が英語にしか対応していなかったりするかもしれない。

## 他の仕様は？

実際に遊んでみよう！ ここはPlaygroundだ。

## 注意

2018/08/13 現在、Playgroundの挙動は完全ではないように思える。

たとえば正しいJSON定義を入力したと思っても、**formData** に変な値が残っていると、正しくHTMLフォームが出てこなかったりする気がする。

ページをリロードしたり、共有機能をうまく使ったり、 [白紙のPlaygroud](https://mozilla-services.github.io/react-jsonschema-form/#eyJmb3JtRGF0YSI6e30sInNjaGVtYSI6e30sInVpU2NoZW1hIjp7fX0=) からやり直したりと、色々と工夫は必要かもしれない。

## バージョン

- Google Chrome 67.0.3396.99（Official Build）
- Fire Fox でも動くことを確認

## リンク

- [Gist — Build JSON by HTML input form with pre defined JSON schema ( react-jsonschema-form playground )](https://gist.github.com/YumaInaura/c0ee1f5aa64f72cfc3588943a6dd4408)
- [mozilla-services/react-jsonschema-form: A React component for building Web forms from JSON Schema.](https://github.com/mozilla-services/react-jsonschema-form)
- [Medium](https://medium.com/supersonic-generation/build-json-by-html-input-form-with-pre-decide-free-style-structured-json-schema-af64312dee3b)








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->