Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JSON Schema in Web Frontend #insideFE

3,239 views

Published on

Inside Frontend #1
https://inside-frontend.connpass.com/event/47920/

JSON Schema in Web Frontend @pirosikick

Published in: Technology
  • Be the first to comment

JSON Schema in Web Frontend #insideFE

  1. 1. 

  2. 2. 1 { 2 "name": "pirosikick" 3 "age": 28, 4 "email": "pirosikick@example.com" 5 }
  3. 3. 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 }
  4. 4. 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 }
  5. 5. 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 }
  6. 6. 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 }
  7. 7. 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 }
  8. 8. 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 }
  9. 9. 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 }
  10. 10. 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 }
  11. 11. 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 }
  12. 12. 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
  13. 13. 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 };
  14. 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 );
  15. 15. 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 );
  16. 16. 1 const uiSchema = { 2 "name": { 3 // カスタムフィールド 4 "ui:field": CustomeField, 5 }, 6 "email" :{ 7 // カスタムウィジェット 8 "ui:widget": CustomeWidget, 9 } 10 };
  17. 17. 
 

  18. 18.

×