これは react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita Djangoのカレンダー | Advent Calendar 2023 - Qiita の25日目の記事です。 ここまでの react-jsonschema-form (RJSF) の Advent Calendar では、JSON Schema を元にしてフォーム…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の24日目の記事です。 react-jsonschema-form (RJSF) の機能の中には Experimental features と呼ばれる機能があります。 この機能は Warning: This API is experimental and un…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の23日目の記事です。 react-jsonschema-form (RJSF) の公式ドキュメントには Migration Guides というページがあります。 Migration Guides | react-jsonschema-form このペー…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の22日目の記事です。 react-jsonschema-form (RJSF) では、JSON Schemaを元にバリデーションができます。 ただ、バリデーションエラーとなったときに気になる挙動がいくつかあ…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の21日目の記事です。 JSON Schemaには additionalProperties キーワードがあります。 Additional Properties | JSON Schema - object これを使うことで、JSON Schemaにて定義し…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の20日目の記事です。 react-jsonschema-form (RJSF) では、 uiSchemaに自作の option を定義することで、特定のWidgetに独自の値を渡すことができます。 詳細については、Adven…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の19日目の記事です。 react-jsonschema-form (RJSF) にはいくつかのユーティリティ的な関数が含まれています。 RJSF utility functions, constants and types | react-jsonsche…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の18日目の記事です。 9日目の記事ではTemplateのカスタマイズとして BaseImputTemplate ObjectFieldTemplate FieldTemplate をためしました。 ただ、 react-jsonschema-form (R…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の17日目の記事です。 JSON Schemaでは、draft-06から examples キーワードが導入されました。draft-06のリリースノートには array of examples with no validation effect; the…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の16日目の記事です。 以下のようなJSON Schemaからreact-jsonschema-form (RJSF) が生成したフォームをsubmitするとします。 const schema: RJSFSchema = { title: "No Input F…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の14日目の記事です。 react-jsonschema-form (RJSF) では、あらかじめ用意されているデザインテーマを適用したり、自作のデザインテーマを適用したりできます。 Custom Themes …

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の13日目の記事です。 この記事では、react-jsonschema-form (RJSF) が提供している Form コンポーネントの props の設定をカスタマイズしてみます。 ただ、Formコンポーネント…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の12日目の記事です。 react-jsonschema-form (RJSF) では、フォームの入力値に対するvalidatorとして ajv を使います。 Validation | react-jsonschema-form ajv には複数のオ…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の11日目の記事です。 今回は、react-jsonschema-form (RJSF) にて、バリデーションのエラーメッセージをローカライズしてみます。 目次 環境 RJSFのバリデーションエラーメッセ…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の10日目の記事です。 この記事では、react-jsonschema-form (RJSF) の公式ドキュメントでバリデーションまわりを見てみます。 Validation | react-jsonschema-form その後、RJS…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の9日目の記事です。 7日目の記事でreact-jsonschema-form (RJSF) の Widget を、8日目の記事で Field をカスタマイズしてきました。 そこで今回は、残る Template のカスタマイ…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の8日目の記事です。 7日目の記事では、react-jsonschema-form (RJSF) のコンポーネントのうち Widget についてカスタマイズしてみましたので、今回はFieldをカスタマイズしてみ…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の7日目の記事です。 react-jsonschema-form (RJSF) では、JSON Schemaの type に応じて、RJSFは入力項目の見た目・機能を持つコンポーネントが決まります。 ただ、実際にはRJSF…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の6日目の記事です。 この記事では、react-jsonschema-form (RJSF) にて、どのようにフォームを表示するかを uiSchema で定義してみます。 目次 環境 uiSchemaとは uiSchemaの u…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の5日目の記事です。 この記事では、react-jsonschema-form (RJSF) における、単一ファイル・複数ファイルのアップロードを試してみます。 目次 環境 RJSFにて input="file" な…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の4日目の記事です。 この記事では、react-jsonschema-formにて JSON Schemaの definitions 外部JSONファイル を使ったときの表示を確認してみます。 目次 環境 JSON Schemaのde…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の3日目の記事です。 この記事では、react-jsonschema-form (RJSF)にて、JSON Schemaのdependenciesやif-then-elseなどの条件分岐を使って、条件に応じた表示を確認してみます。…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の2日目の記事です。 この記事では、JSON Schemaのtypeごとの react-jsonschema-form (RJSF) の表示を確認してみます。 目次 環境 JSON Schemaのtypeとは typeごとの表示を確認…

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の1日目の記事です。 この記事では、Advent Calendarを始めたきっかけと、 react-jsonschema-form (RJSF) とは何かについて書いていこうと思います。 目次 はじめに react-jsons…

Reactにて、JSON Schemaからフォームを生成してくれるライブラリ react-jsonschema-form がありました。 https://rjsf-team.github.io/react-jsonschema-form/docs/ react-jsonschema-form には live playground もあるため、実装で気になった所があれば容易…