Inside Frontend #1 https://inside-frontend.connpass.com/event/47920/ JSON Schema in Web Frontend @pirosikick

13. 1 {
2 "name": "pirosikick"
3 "age": 28,
4 "email": "pirosikick@example.com"
5 }

14. 1 {
2 "type": "object",
3 "properties": {
4 "name": { "type": "string" },
5 "age": {
6 "type": "integer",
7 "minimum": 0
8 },
9 "email": {
10 "type": "string",
11 "format": "email"
12 }
13 }
14 }

15. 1 {
2 "$schema": "http://json-schema.org/draft-04/schema#",
3 "$id": "http://example.com/schema.json#",
4 "type": "object",
5 "definitions": {
6 "name": { ... },
7 "age": { ... },
8 "email": { ... },
9 },
10 "properties": {
11 "name": {
12 "$ref": "#/definitions/name"
13 },
14 "age": {
15 "$ref": "#/definitions/age"
16 },
17 "email": {
18 "$ref": "#/definitions/email"
19 }
20 }
21 }

16. 1 {
2 "$schema": "http://json-schema.org/draft-04/schema#",
3 "$id": "http://example.com/schema.json#",
4 "type": "object",
5 "definitions": {
6 "name": { ... },
7 "age": { ... },
8 "email": { ... },
9 },
10 "properties": {
11 "name": {
12 "$ref": "#/definitions/name"
13 },
14 "age": {
15 "$ref": "#/definitions/age"
16 },
17 "email": {
18 "$ref": "#/definitions/email"
19 }
20 }
21 }

17. 1 {
2 "$schema": "http://json-schema.org/draft-04/schema#",
3 "$id": "http://example.com/schema.json#",
4 "type": "object",
5 "definitions": {
6 "name": { ... },
7 "age": { ... },
8 "email": { ... },
9 },
10 "properties": {
11 "name": {
12 "$ref": "#/definitions/name"
13 },
14 "age": {
15 "$ref": "#/definitions/age"
16 },
17 "email": {
18 "$ref": "#/definitions/email"
19 }
20 }
21 }

18. 1 {
2 "$schema": "http://json-schema.org/draft-04/schema#",
3 "$id": "http://example.com/schema.json#",
4 "type": "object",
5 "definitions": {
6 "name": { ... },
7 "age": { ... },
8 "email": { ... },
9 },
10 "properties": {
11 "name": {
12 "$ref": "#/definitions/name"
13 },
14 "age": {
15 "$ref": "#/definitions/age"
16 },
17 "email": {
18 "$ref": "#/definitions/email"
19 }
20 }
21 }

19. 1 {
2 "$schema": "http://json-schema.org/draft-04/schema#",
3 "$id": "http://example.com/schema.json#",
4 "type": "object",
5 "definitions": {
6 "name": { ... },
7 "age": { ... },
8 "email": { ... },
9 },
10 "properties": {
11 "name": {
12 "$ref": "#/definitions/name"
13 },
14 "age": {
15 "$ref": "#/definitions/age"
16 },
17 "email": {
18 "$ref": "#/definitions/email"
19 }
20 }
21 }

22. 1 {
2 "$schema": "http://json-schema.org/draft-04/hyper-schema",
3 "type": "object",
4 "definitions": { ... },
5 "properties": { ... },
6 "links": [{
7 "title": "ユーザ取得",
8 "description": "idに紐づくユーザを返す",
9 "href": "/user/:id",
10 "method": "GET",
11 "rel": "self"
12 }, {
13 "title": "ユーザ新規登録",
14 "description": "idに紐づくユーザを返す",
15 "href": "/user",
16 "method": "POST",
17 "rel": "create",
18 "schema": {
19 "type": "object",
20 "properties": { ... }
21 }
22 }]
23 }

23. 1 {
2 "$schema": "http://json-schema.org/draft-04/hyper-schema",
3 "type": "object",
4 "definitions": { ... },
5 "properties": { ... },
6 "links": [{
7 "title": "ユーザ取得",
8 "description": "idに紐づくユーザを返す",
9 "href": "/user/:id",
10 "method": "GET",
11 "rel": "self"
12 }, {
13 "title": "ユーザ新規登録",
14 "description": "idに紐づくユーザを返す",
15 "href": "/user",
16 "method": "POST",
17 "rel": "create",
18 "schema": {
19 "type": "object",
20 "properties": { ... }
21 }
22 }]
23 }

24. 1 {
2 "$schema": "http://json-schema.org/draft-04/hyper-schema",
3 "type": "object",
4 "definitions": { ... },
5 "properties": { ... },
6 "links": [{
7 "title": "ユーザ取得",
8 "description": "idに紐づくユーザを返す",
9 "href": "/user/:id",
10 "method": "GET",
11 "rel": "self"
12 }, {
13 "title": "ユーザ新規登録",
14 "description": "idに紐づくユーザを返す",
15 "href": "/user",
16 "method": "POST",
17 "rel": "create",
18 "schema": {
19 "type": "object",
20 "properties": { ... }
21 }
22 }]
23 }

27. 1 #!/bin/bash
2 # vim: set background=light nolist nonumber:
3
4 # 雛形を生成
5 # - schemata以下にリソース毎にファイルを生成
6 # - JSONとYAMLで書くことが出来る（--yamlでYAML）
7 prmd init --yaml user > schemata/user.yaml
8
9 # JSON Hyper-Schema（schema.json）の生成
10 # - ./schemata/*.{yaml,json}とmeta.jsonを結合して生成する
11 prmd combine -m meta.json ./schemata > schema.json
12
13 # Markdownの生成
14 # - prmd combineで生成したschema.jsonからREADME.mdを生成
15 # - OVERVIEW.mdを出力ファイルの先頭に挿入
16 prmd doc --prepend OVERVIEW.md schema.json > README.md

41. 1 const schema = {
2 "type": "object",
3 "properties": {
4 "name": {
5 "title": "名前",
6 "type": "string"
7 },
8 "email": {
9 "title": "メールアドレス",
10 "type": "string",
11 "format": "email"
12 }
13 }
14 };

42. 1 import React from 'react';
2 import { render } from 'react-dom';
3 import Form from 'react-jsonschema-form';
4
5 const schema = { ... };
6
7 render(
8 <Form
9 schema={schema}
10 onChange={({ formData }) => { ... }}
11 onSubmit={({ formData }) => { ... }}
12 />,
13 document.getElementById('wrapper')
14 );

44. 1 const uiSchema = {
2 "name": {
3 "classNames": "from__name", // カスタムクラス名
4 "ui:placeholder": "全角で頼む" // プレースホルダー
5 },
6 "email": {
7 "classNames": "from__email",
8 "ui:placeholder": "you@example.com"
9 }
10 };
11
12 render(
13 <Form
14 schema={schema}
15 uiSchema={uiSchema}
16 onChange={({ formData }) => { ... }}
17 onSubmit={({ formData }) => { ... }}
18 />,
19 document.getElementById('wrapper')
20 );

47. 1 const uiSchema = {
2 "name": {
3 // カスタムフィールド
4 "ui:field": CustomeField,
5 },
6 "email" :{
7 // カスタムウィジェット
8 "ui:widget": CustomeWidget,
9 }
10 };