react-jsonschema-formのマイグレーションガイドを読んでみる

React react-jsonschema-form

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

react-jsonschema-form (RJSF) の公式ドキュメントには Migration Guides というページがあります。
Migration Guides | react-jsonschema-form

このページには、各メジャーバージョンのアップグレードガイドへのリンクが貼られています。

　
当初、2023/12現在の最新版である5系を使うのだから、5系のアップグレードガイドを読まなくても良さそうと思っていました。

そんな中、実際に読んでみたところ、アップグレード時の破壊的変更以外にも色々情報がありました。

そこで今回は、ためになったことを中心にメモを残します。

なお、ここではふれないものもあるので、一度アップグレードガイドに目を通しておくと良さそうです。

　
目次

　

環境

  • react-jsonschema-form 5.15.0

　

NodeやReactのサポートバージョンについて

IntroductionやREADMEにはNodeやReactのサポートバージョンは見当たらず、各ライブラリの最新バージョンを使えるのか分かりませんでした。

しかし、v5へのアップグレードガイドには記載されていました。
https://rjsf-team.github.io/react-jsonschema-form/docs/migration-guides/v5.x%20upgrade%20guide#node-support

それぞれ、

  • Node
    • 14系、16系、18系をサポート
  • React
    • 16系は16.14以降、17系はRJSFのテーマも含めて公式にサポート
    • 18系は自己責任

のようです。

このAdvent CalendarではReact 18で動作確認はしてきましたが、以下のissueにあるように、まだUNSAFEなAPIが残っているようです。
Complete react 18 upgrade in core · Issue #3643 · rjsf-team/react-jsonschema-form

　

追加されたパッケージについて

パッケージとして

  • @rjsf/utils
  • @rjsf/validator-ajv6
  • @rjsf/validator-ajv8
  • @rjsf/mui

が追加されたようです。

パッケージ間での機能の移動もあったようなので、古い記事やissueを見るときは注意が必要そうです。

　

@rjsf/coreでの破壊的変更について

メインのパッケージにおける破壊的変更の内容が記載されていました。
https://rjsf-team.github.io/react-jsonschema-form/docs/migration-guides/v5.x%20upgrade%20guide#rjsfcore-breaking-changes

　

JSON7Schema ではなく、RJSFSchema を使う

今は

  • JSON7Schema***
  • RJSFSchema***

の2つがありエイリアスになっています。

ただ、

It is highly recommended to update your use of JSON7Schema with RJSFSchema so that when the RJSF begins supporting a newer JSON Schema version out-of-the-box, your code won't be affected.

より、将来的なことを考えると、今から RJSFSchema*** を使ったほうが良さそうです。

　

deprecatedになったもの

以下の箇所にて、deprecatedとなったものが列挙されています。
https://rjsf-team.github.io/react-jsonschema-form/docs/migration-guides/v5.x%20upgrade%20guide#deprecations-added-in-v5

対応が必要そうなものは、以下と記載されていました。

　

@rjsf/material-ui と @rjsf/mui について

似たような名前のパッケージですが、

  • @rjsf/material-ui
    • Material UI 4系のテーマ
  • @rjsf/mui
    • Material UI 5系(MUI)のテーマ

とのことです。
https://rjsf-team.github.io/react-jsonschema-form/docs/migration-guides/v5.x%20upgrade%20guide#rjsfmaterial-ui-breaking-changes

npmにも、それぞれの対応バージョンが記載されていました。