9
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

react-jsonschema-formのをもっとかんたんに使う便利ツール

Last updated at Posted at 2017-03-03

reactでフォームを簡単に作成できるreact-jsonschema-formをもっと簡単に利用する便利ツールについて、その荒い流れ

  1. formData(注)のjsonからJSONSchemaを作成する。(ツール1)
  2. JSONSchema・UISchema・formDataを詰める。(ツール2)
  3. reactに乗せる。
  4. フォームできる。
    (注) 下記react-jsonschema-formにおけるformData。formの入力例をjsonにしたもの。

参考ページ

http://qiita.com/pirosikick/items/f4c010e5914caec13808
大感謝。ここに書いてある通りにやればよい。

便利ツール これを使わないと無理

無理ではない。一からJSONSchema作るのは正気の沙汰ではないが、ツールを知らずにそれをしていた。

  1. JSONSchema.net
    http://jsonschema.net/#/#top
    ここでjsonからjsonschemaを作成=>調整する。
    各言語から変換するツールもある模様。

  2. react-jsonschema-form
    https://mozilla-services.github.io/react-jsonschema-form/
    Github Pagesのデモページ
    JSONSchema・UISchema・formDataを入力すると、画面右に生成したフォームを表示してくれる。サンプルもたくさんある。
    ここで十分詰めておくほうがよい。
    エラーの原因も分かるので、後に詰まったりしたらここで確かめる。

9
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?