React

React + react-jsonschema-form にて、 JSON Schemaを元にしたフォームからデータを送信し、バックエンドのDjango REST frameworkに保存してみた

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

react-jsonschema-formにて、FormのExperimental featuresをためしてみた

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

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

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

react-jsonschema-formにおける、バリデーションエラー時の気になる挙動と対応について

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

react-jsonschema-formで、additionalPropertiesを使った時の表示を確認してみる

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

react-jsonschema-formにて、formContextを使ってWidgetやFieldに値を渡してみた

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

react-jsonschema-formに含まれる、データを変換する系のユーティリティ関数を使ってみた

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

react-jsonschema-formにて、ArrayのTemplateをカスタマイズしてみた

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

react-jsonschema-formにて、JSON Schemaのexamplesキーワードを使ってみた

これは「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では、フォームのsubmit時の状況により送信データが変わる

これは「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にて、MUIのテーマを適用してみる

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

react-jsonschema-formにて、Formコンポーネントのpropsの設定をカスタマイズしてみる

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

react-jsonschema-formにて、validatorであるajvのオプションを変更する

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

react-jsonschema-formにて、バリデーションのエラーメッセージをローカライズしてみる

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

react-jsonschema-formのバリデーションをカスタマイズしてみる

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

react-jsonschema-formにて、Templateをカスタマイズしてみる

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

react-jsonschema-formにて、Fieldをカスタマイズしてみる

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

react-jsonschema-formにて、Widgetをカスタマイズしてみる

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

react-jsonschema-formにて、どのようにフォームを表示するかを uiSchema で定義する

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

react-jsonschema-formにて、単一ファイル・複数ファイルのアップロードを試してみた

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

react-jsonschema-formにて、JSON Schemaのdefinitionsや外部JSONファイルを使ったときの表示を確認してみた

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

react-jsonschema-formにて、JSON Schemaのdependenciesやif-then-elseなどの条件分岐を使って、条件に応じた表示を確認してみた

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

react-jsonschema-formにて、JSON Schemaのtypeごとの表示を確認してみた

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

react-jsonschema-form (RJSF) とは

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

react-jsonschema-form を試してみた

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

React + @shopify/react-i18nで、翻訳の中で変数展開を行う

Reactでi18n対応をするために @shopify/react-i18n を使うことがあります。 https://github.com/Shopify/quilt/blob/main/packages/react-i18n/README.md そんな中、翻訳の中で変数展開をしたくなったため、調べたときのメモを残します。 目次 環境 単純な翻…

Tanstack QueryのuseQueryにて、refetchIntervalとstaleTimeを組み合わせたときの動作を確認してみた

Tanstack Queryの useQuery には refetchInterval という設定値があります。 以下の公式ドキュメントにある通り、これは定期的にデータ取得を行うための設定のようです。これを使うことにより、APIへのポーリングも容易に実装できそうです。 refetchInterval…

Tanstack Queryにて、useQueryのstaleTimeとcacheTimeの挙動を確認してみた

Tanstack Queryの useQuery を使うとき staleTime cacheTime という2つの設定値があります。 それらの違いについてよく分からなかったので調べてみたところ、Githubのdiscussionsに色々記載がありました。 staleTime vs cacheTime · TanStack/query · Discus…

Tanstack QueryにおけるuseQueryのselectオプションを調べてみた

Tanstack Queryの useQuery のドキュメントを見ていたところ、 select オプションがありました。 This option can be used to transform or select a part of the data returned by the query function. It affects the returned data value, but does not a…

Tanstack Queryの Query Key について調べてみた

Tanstack Queryの useQuery や invalidateQueries を使うときは Query Key を指定します。 Query Keyとはなにかを公式ドキュメントで見たところ At its core, TanStack Query manages query caching for you based on query keys. Query keys have to be an …