JSON Schema in Web Frontend #insideFE

1 {2 "name": "pirosikick"3 "age": 28,4 "email": "[email protected]"5 }

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 }

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 }

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 }

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 }

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 }

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 }

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 }

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 }

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 }

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

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 };

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 );

1 const uiSchema = { 2 "name": { 3 "classNames": "from__name", // カスタムクラス名 4 "ui:placeholder": "全角で頼む" // プレースホルダー 5 }, 6 "email": { 7 "classNames": "from__email", 8 "ui:placeholder": "[email protected]" 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 );

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