JSON Schemaとreact-jsonschema-form
社内勉強会用資料。社内ツールでJSON Schemaとreact-jsonschema-formを利用しているので、それについての紹介です。
JSON Schema
JSONの構造を定義するJSON。
例えば、下記のようなユーザを表すJSONがあるとする。
{
"id": "00000000-0000-0000-0000-000000000001",
"name": "Taro YAMADA",
"age": 30
}
-
idはUUIDで、必須項目 -
nameは英字のみで、必須項目 -
ageは0以上の整数で、任意項目
こういう条件だった場合、JSON Schemaで下記のように定義できる。（あくまで一例だけど）
{
"title": "ユーザー",
"type": "object",
"properties": {
"id": {
"title": "ID",
"type": "string",
"pattern": "^[0-9a-zA-Z]{8}(-[0-9a-zA-Z]{4}){3}-[0-9a-zA-Z]{12}$"
},
"name": {
"title": "ユーザー名",
"type": "string",
"pattern": "^[\\sa-zA-Z]+$"
},
"age": {
"title": "年齢",
"type": "integer",
"minimum": 0
}
},
"required": [ "id", "name" ]
}
他にも色々と出来るけど、今回は割愛します。一番最初に貼ったリンクで仕様を読むか、下記のドキュメントが分かりやすかったので、そちらで勉強してください。
Understanding JSON Schema — Understanding JSON Schema 1.0 documentation
react-jsonschema-form
mozilla-services/react-jsonschema-form: A React component for building Web forms from JSONSchema.
react-json-schema-formは、JSON Schemaからフォームを生成してくれるReact Component。
Github Pagesにデモページがあるので、試しに先程のJSON Schemaを入れてみると下記のようなフォームが生成される。
使い方
Formコンポーネントに、下記のようなpropsを渡せば、最低限動作する。その他のpropsについては後述する。
-
schema... JSON Schema -
formData... JSON -
onChange... 変更された時に呼ばれるハンドラ -
onSubmit... Submitボタンを押した時に呼ばれるハンドラ
import React from 'react';
import ReactDOM from 'react-dom';
import Form from 'react-jsonschema-form';
const schema = { ... };
const formData = {};
function handleChange({ formData }) {
// 入力されたデータ
console.log(formData);
}
function handleSubmit({ formData }) {
// 入力されたデータ
console.log(formData);
}
ReactDOM.render(
<Form
schema={schema}
formData={formData}
onChange={handleChange}
onSubmit={handleSubmit}
/>,
document.getElementById('app')
);
カスタマイズ
react-jsonschema-formは、カスタマイズがしやすいのが魅力だと思う。カスタマイズ方法を軽く紹介する。
uiSchema
propsにuiSchemaを渡すと、UI周りのカスタマイズが可能。
- フィールド名、placeholderなどの変更
- デフォルトの
<input>要素の変更 - class属性の変更
などなど、いろいろできる。わかりやすいやつを一部を紹介。
例1）helpTextの追加
<Form
schema={{ ...さっきのJSON Schema }}
uiSchema={{
"name": {
"ui:help": "半角英字、スペースのみ"
}
}}
/>
こうすると、
こうなる。
例２)placeholder
<Form
schema={{ ...さっきのJSON Schema }}
uiSchema={{
"name": {
"ui:placeholder": "半角英字、スペースのみ"
}
}}
/>
こうすると、
こうなる。（エラー起きちゃってるけど）
カスタムField
例えば、JSON Schema上は文字列でURLだが、ファイルアップロードするUIを表示したい場合、独自のFiledを表示することができる。
// JSON的にはURLが欲しい
const schema = {
type: "string",
format: "uri"
};
// AssetFieldコンポーネントを`asset`という名前で登録する
const customFields = {
asset: AssetField,
};
// FieldにAssetFieldコンポーネントを使う
const uiSchema = {
'ui:field': 'asset'
};
// fieldsに渡す
<Form schema={schema} uiSchema={uiSchema} fields={customFields} />
AssetFieldでは、下記のようにpropsで渡ってくるonChangeに値を渡して上げればOK。
import React, { Component, PropTypes } from 'react';
import uploadFile from './uploadFile';
class AssetField extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
// ファイルをサーバにアップロードして
// URLを取得するような関数
uploadFile(e.target.files[0]).then(url => {
// onChangeで上げる値は、
// JSON Schema通りの値じゃないと
// validationでエラーになってしまう
this.props.onChange(url);
});
}
render() {
const { required, disabled } = this.props;
// ファイルアップロードを表示
return (
<input
type="file"
className="form-control"
required={required}
disabled={disabled}
onChange={this.handleChange}
/>
);
}
}
export default AssetField;
おわり
とりあえず、こういうのあるよという紹介。JSON Schemaもreact-jsonschema-formももっと紹介したい機能があるので、またノウハウを貯めて書きたい
Author And Source
この問題について(JSON Schemaとreact-jsonschema-form), 我々は、より多くの情報をここで見つけました https://qiita.com/pirosikick/items/f4c010e5914caec13808著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .