react-jsonschema-form (RJSF) とは

React react-jsonschema-form

これは「react-jsonschema-formのカレンダー | Advent Calendar 2023 - Qiita」の1日目の記事です。

この記事では、Advent Calendarを始めたきっかけと、 react-jsonschema-form (RJSF) とは何かについて書いていこうと思います。

　
目次

　

はじめに

今年、 react-jsonschema-form にふれる機会がありました。

幸いなことに、既存の動くモノがあったことから、どのように使えばよいのかを理解しやすい環境でした。

また、 react-jsonschema-form はドキュメントも揃っており、困ったときは探せば何とかなる感じでした。

　
一方、新しく react-jsonschema-form を使ったコードを書こうと思ったときは悩みました。

JSON Schema さえ書けばうまく動くだろうと思ったのですが、ライブラリ自体のクックブック的な情報をすぐに見つけられなかったため、時間がかかりました。

　
Web上には以下のような記事はあるものの、まだまだ react-jsonschema-form に関する記事、特に日本語の記事は少ない印象です。

　
そこで

  • react-jsonschema-form に詳しい方
  • react-jsonschema-form を実際に使っている方
  • react-jsonschema-form を試してみた方

による記事が増えるといいなと思い、Advent Calendarを始めることにしました。

小ネタでも大歓迎ですので、Advent Calendarへご参加ください！

　

react-jsonschema-form (RJSF) とは

ここからが本題です。

react-jsonschema-form (以降 RJSF) とは、Webフォームの仕様を JSON Schema に定義することで自動的にWebフォームを作成する、Reactコンポーネントライブラリです。
https://github.com/rjsf-team/react-jsonschema-form

　 　
Webフォームのデザインについてですが、RJSFでは Chakara UI や Material UI (MUI)、Bootstrap などのテーマをサポートしています*1。
https://github.com/rjsf-team/react-jsonschema-form#supported-themes

そのため、それらのUIライブラリを使っている環境であれば、統一したデザインでフォームを作成できます。

もし、RJSFで用意しているコンポーネントが既存のテーマと一致しなかったしても、

  • Custom Widget
  • Custom Field
  • Custom Template

などにより、コンポーネントのカスタマイズができます。

　
なお、テーマの適用方法やコンポーネントのカスタマイズ方法などのRJSFの使い方については、公式ドキュメントに記載されています。

公式ドキュメントのWebサイトでは、最新のバージョン5から過去バージョンの3まで閲覧できます。
https://rjsf-team.github.io/react-jsonschema-form/docs/

ちなみに、以前の公式ドキュメントは次の Read the Docs でホストされていたようで、4.2系・1.8系のドキュメントがありました。
https://readthedocs.org/projects/react-jsonschema-form/

　

JSON Schemaとは

RJSFでフォームを自動生成する場合、フォームの仕様は JSON Schema で定義します。

JSON Schemaを超ざっくり書くと、JSONデータの構造を定義したものになります。

例えば、RJSFの公式ドキュメントのUsageでは

  • titleはTodo
  • 入力必須なのは title 項目
  • フォームの入力項目として、 title と done がある
    • title はstring型で、Title というラベルを持ち、初期値は A new task
    • done はboolean型で、Done? というラベルを持ち、初期値は false

という仕様を以下のようなJSON Schemaにて定義しています。

{
  title: 'Todo',
  type: 'object',
  required: ['title'],
  properties: {
    title: { type: 'string', title: 'Title', default: 'A new task' },
    done: { type: 'boolean', title: 'Done?', default: false },
  },
}

　
また、JSON Schemaにはバージョンという概念があり、バージョンによって仕様に違いがあります。最新バージョンは 2020-12 です。
https://json-schema.org/specification

JSON Schemaのサイトには、バージョンごとのリリースノートがあります。例えば 2020-12 の場合は以下になります。
https://json-schema.org/draft/2020-12/release-notes

　
ちなみに、JSON SchemaはRJSF以外の言語・ツールでも使われています。

JSON Schemaのサイトにはそれらの情報がまとまっています。例えば以下のページには JSON Schema のバージョン draft 6 以降をサポートしているツール類がまとまっています。
https://json-schema.org/implementations

ただ、やや表記が古いものもあるようで、RJSFは昔の名前( React JSON Schema Form (mozilla) )やリンク( https://github.com/mozilla-services/react-jsonschema-form )になっています。

　

RJSFがサポートしているJSON Schemaのバージョンについて

ここで、「RJSFがサポートしているJSON Schemaのバージョンは何だろう？」と考えたものの、

  • JSON Schemaのページ
  • RJSFの公式ドキュメント

を見ても、RJSFがサポートしているJSON Schemaのバージョンは見つけられませんでした。

RJSFのリポジトリのissueによれば、最新のRJSF 5系では draft 7 がサポートされているように見えました。

　
2023/12/10 追記 ここから

RJSFのドキュメントにて、JSON Schemaの対応バージョンの記載がありました。

Note that react-jsonschema-form supports JSON Schema draft-07 by default.

https://rjsf-team.github.io/react-jsonschema-form/docs/usage/validation#custom-meta-schema-validation

2023/12/10 追記 ここまで

　

実際に試してみる

試す方法としては

  • Playgroundでの動作確認
  • ローカルでの動作確認

の2つがあるため、それぞれふれておきます。

　

Playgroundでの動作確認について

以下のページにて実際に試すことができます。
https://rjsf-team.github.io/react-jsonschema-form/

　
このページでは、JSON Schemaや、RJSFの uiSchema 、フォームのデータなどを指定することで、RJSFが生成されます。

多くの項目を明示的に入力・選択できることから、一通りの機能を試すのには良さそうです。

　

ローカルでの動作確認について

前回の記事で、Viteでの環境構築から軽く実装するところまでを試してみました。
react-jsonschema-form を試してみた - メモ的な思考的な

内容が重複しそうですので、今回は上記リンクだけにとどめておきます。

　

おわりに

今回は、RJSFの簡単な紹介でした。

次回からは、RJSFの機能の掘り下げやカスタマイズ方法などを紹介していければと思います。

最後に、重ねてとなりますが、 react-jsonschema-form についてさわってみたことがある方の参加をお待ちしています！

*1:筆者はMUIのみの経験なため、各テーマのサポート状況に差があるのかはわかりません...