JavaScriptの演算子優先順位の罠 - Vercelビルドエラーの原因を探る

はじめに Next.jsアプリケーションをVercelにデプロイしようとしたところ、ローカルでは成功するのにVercelでは失敗するという問題に遭遇しました。エラーメッセージは曖昧で、原因の特定に苦労しました。 この記事では、問題の発見から解決までの過程を共有し、JavaScriptの演算子優先順位について学んだことをまとめます。 問題の症状 エラーメッセージ E [ T r E h r r e o r r o s r p o : e c c c A i u n f r i r e c e r d r m o e p r s r s e o a r c g e c e n u d r i e r s r e i d o n m g i i n t p t a t e g h d e e i " S n / e e r p n r / e o s r d m u e C c l o t l m i s p o / o n 2 n 2 e b - n u 0 t i 3 s l " d r s e n t d o e r a . v o i d l e a k i n g s e n s i t i v e d e t a i l s . ] 特徴的な現象 ローカルビルドは成功 するが、Vercelでは失敗 毎回異なるページ でエラーが発生(22-03、24-03、25-04など) エラーの詳細が本番ビルドでは隠される 原因の発見 複数のファイルを調査する中で、以下のコードパターンを発見しました: ...

2026年1月28日 · 7 分 · Nakamura

@elastic/react-search-ui を React 19 + Next.js 15.5 で使う方法

はじめに React 19 と Next.js 15 を使用しているプロジェクトで @elastic/react-search-ui を使おうとすると、以下のような依存関係エラーに遭遇することがあります。 n n p p m m e e r r r r o o r r E p R e E e S r O L r V e E a c c t o @ u " l > d = n 1 o 6 t . 8 r . e 0 s o < l v 1 e 9 " f r o m @ e l a s t i c / r e a c t - s e a r c h - u i @ 1 . 2 3 . 1 この記事では、この問題の原因と解決方法を詳しく解説します。 ...

2026年1月19日 · 8 分 · Nakamura

mirador-annotations を Mirador 4.x へ移行した記録

背景 mirador-annotations は、IIIF ビューア Mirador にアノテーション機能を追加するプラグインです。 従来のプロジェクトは以下の構成でした: ビルドツール : nwb (Create React App ベース) UI ライブラリ : Material-UI v4 Mirador : 3.x React : 17.x しかし、以下の問題が発生していました: nwb のメンテナンス停止 - nwb は長期間更新されておらず、依存関係の競合が頻発 npm install の失敗 - 古い依存関係により、新しい環境でのセットアップが困難に セキュリティ脆弱性 - 古いパッケージに多数の脆弱性警告 これらの問題を解決するため、以下への移行を決定しました: ビルドツール : Vite UI ライブラリ : MUI v7 Mirador : 4.x React : 18.x 移行作業の概要 1. ビルドツールの移行 (nwb → Vite) nwb の設定ファイルを削除し、vite.config.js を新規作成しました。 主なポイント: e } x ) p c r } ; v o o e ; i r n t d } r } t t s u e , e , e t r f g s d ] . d n d i l 重 o e , c e e r n o 複 l d ' ' ' ' o f n { a e b パ v u @ @ r r n a v f : a ッ e p e e e e f u t l ケ : e m m a a i l = - { : ー : o o c c g t j ジ { t t t t . l s ' の [ i i ' - j d o g 解 o o , d s e a が l 決 n n o f d o / / m i E g b r s ' n n l a e t , e v o l a y C ( b T c l o m a h t e n o l i ' d f d s , ' i e を ' , g , 参 , ( 照 ( p す { r る o た m c め o e d s e s . } c ) w d = ( > ) , { ) ; 2. Material-UI の移行 (v4 → v7) @material-ui/* を @mui/* に変更 makeStyles を sx prop に置き換え Grid コンポーネントの API 変更に対応 (item と xs props が size に統合) < < G G r r 変 i 変 i 更 d 更 d 前 後 i s ( t ( i M e M z U m U e I I = x { v s v 1 4 = 7 2 ) { ) } 1 > 2 } > 3. Mirador 4.x への対応 Mirador 4.x では、アクションやセレクターのインポート方法が変更されました: ...

2026年1月13日 · 8 分 · Nakamura

RAWGraphs 2.0 の日本語化

はじめに データ可視化ツール RAWGraphs を日本語化し、公開しました。 https://rawgraphs-ja.vercel.app/ RAWGraphsは、複雑なデータを美しいビジュアライゼーションに変換できるオープンソースのWebアプリケーションです。コーディング不要で、CSVやJSONデータをドラッグ&ドロップするだけで、様々なチャートを作成できます。 RAWGraphsとは RAWGraphsは、イタリアのDensityDesign Research Labが開発したデータ可視化ツールです。 https://www.rawgraphs.io/ 主な特徴: コーディング不要 : ブラウザ上でデータをペーストするだけ 多様なチャート : Alluvial Diagram、Treemap、Voronoi Tessellationなど30種類以上 SVGエクスポート : 作成したチャートをSVGやPNG形式でダウンロード可能 プライバシー保護 : データはサーバーに送信されず、ブラウザ内で処理 使用ライブラリ { } " " i r 1 e 8 a n c e t x - t i " 1 : 8 n " e ^ x 2 t 1 " . : 1 0 " . ^ 0 1 " 1 , . 1 8 . 6 " ! ...

2025年12月3日 · 9 分 · Nakamura

れきちずをNext.jsで使用する

概要 れきちずをNext.jsで使用する方法を調べてみましたので、備忘録です。 背景 以下の記事で、「れきちず」の使い方を紹介しました。 そして、2025年4月4日に「全国版が公開」されたことを知りました。 https://rekichizu.jp/ そこでNext.jsを用いて作成したアプリケーションへの導入にあたり、その使い方を調べてみました。 デモアプリ 以下のようなアプリケーションを試作しました。 https://rekichizu-next.vercel.app/ja/ 使用方法の調査にあたり、公式サイトで提供されている地図の切り替えや重ね合わせ機能、および検索機能などを再現することを目的としました。この実装にあたり、以下のReactライブラリを使用しました。 https://visgl.github.io/react-maplibre/ 開発メモ 検索機能 検索機能には、GeoLODのAPIを利用させていただきました。なお、「れきちず」の公式サイトでは、専用の検索APIが用いられているようでした。 https://geolod.ex.nii.ac.jp/doc/api/ react-maplibre 本ライブラリを使用して、やりたいことの多くを実現できました。一方、TerrainControlではTerrainのON/OFFと合わせてピッチを変更することが難しい?、useMapではaddLayer/removeLayerが難しい?など、いくつか苦労した点もありました。 まとめ 「れきちず」およびNext.jsを用いたアプリケーション開発にあたり、参考になりましたら幸いです。 「れきちず」の開発に関わる方々に深く感謝いたします。

2025年4月9日 · 1 分 · Nakamura

Mirador 4プラグイン開発:任意の角度で画像を回転するプラグインで、角度の初期値を設定できるようにしました。

概要 任意の角度で画像を回転するMirador 4プラグインで、角度の初期値を設定できるようにしました。 リポジトリは以下です。 https://github.com/nakamura196/mirador-rotation-plugin デモページは以下です。角度および矩形を初期設定とともに、画像を回転させることができます。 https://nakamura196.github.io/mirador-rotation-plugin/ 背景 以下の記事で、本プラグインについて説明しています。 一方、課題として、角度の初期値を与えることができませんでした。 これに対して、以下の記事で紹介したように、Mirador 4の標準機能として、角度の初期値を与えることができるようでした。 合わせて、以下の「mirador-image-tools」プラグインについて、webpackからViteに変更されていたので、この変更を「mirador-rotation-plugin」にも反映することにしました。 https://github.com/ProjectMirador/mirador-image-tools GitHub Pagesでの公開 GitHub Pagesでの公開にあたり、「mirador-image-tools」のvite.config.jsを以下のように変更しています。これで、npm run build:demoにより、GitHub Pagesで公開するためのディレクトリを作成することができるようになりました。 https://github.com/nakamura196/mirador-rotation-plugin/blob/main/vite.config.js i i i i i i i e } m m m m m m m x ) p p p p p p p V p b ) e } o } p ] r } s } ; o o o o o o o i o a , s , p , l , e , e , r r r r r r r t r s p } { } b e i l t e } u r { } s a } r o p t t t t t t t e t e r u x n o i s , g e o l , v p o : o b } : b } i c c a m b p ] i a n c } l i ' e e r { r f p { { p c d c u , u , l l M l d i u l , n c カ a l v a @ r n t e s a k o e p e i o e r } s i l } r } s d u a u e z i u { } s t ス m o i } e s t : : : d a t f g g n f r s l u m o , o l i , o , o : d t d r e l g , : ( タ e s f : : e e c f h i l f a o s d t p l e i u d b e f f n l e o } u e c e : D d i n s } ) ム : e c c t } } s { ' f t r l o f i u c . : D t l x n r : : n i o a l x u , r { : h : e O n a e , [ , プ B ( o o r { { t 4 i o f e b r g l e e i y u t p c t l r m u t t a g } c e ' p p s m t b } ラ ' u p n n y c i } c i } s d 4 n f m r U S o u t s n { r O p e u e { { r e m e p e p s l , e [ s [ j s t : e T u u ) グ f n r s s d o f a f / e 4 e r o R y m r s v : u O r t m y N a : O r u s o r ' m ] s : i : O p i c l ) イ i d o t t e { n c c f } c t c ' m 6 C o ' m L n a d . . t p n : a : a t p n t e b e r a , . x o [ D ( l o o ; ン x l c m s ( o o o o c ( o : o ' o m f T c t e e G ' D t a p m s ' t a : t a a e p j _ ' { n ' O b d n a を - e e d d o t d n n r c c c i } n h e n , n s ' o i f n I d i i l f : e : M i l F l c a : s t , s l : u . t d 追 o : s i e / e s d s 各 o o o f s d a a c r s f s f ' n P } / o i v T i r o : i : i o : { i s t c e : o i o e e 加 u s s m s d m o e t フ ( n n n a c o e w w o ( r o i r i @ p o a p n n . H s : n l t / [ r n l : : t t a s a r l n n r し t a . t o r e o l m ァ c s s s ( w o l m a a n e . l l c g v r d t f a e G U t s [ e r s ( ' a s [ e - r n t { d e d L t : て p s e D S c m S e o f イ o t t t s a n e o i i s r c e e / i o e h r c C I B ' t : ' U u r f e d : . N { ' d u d s - n ) o s デ u y n i r / o r . / i ル n t i s . / t t o r o . U i } t m : o k o T _ , r _ R e c s o . a R o e _ j a a : ' ィ t n v r c デ S c l s l を s s d s a t o l s l ) d e R n e i p } m a n H P u { _ L , r ' r { . m e m , . _ s m { d j レ - c . D ィ r S o r e ル t r e t t l o r f f e e r L d f j s a g f U A e t T i m , D O e a ' j - e ( a s ク s G = i レ c t g c s ー c s a s f e g c s s . { r T e r s e t f ' e i B G , e o n a l b s c : s f { w x ト t I r ク S a ( 内 ト f P t t . s . ( 階 . . l ! o o x o / s h r g . g _ E s P d t ' P j : t x i a a ' リ r T p ト t t ' の = デ i a P s i . l ' 層 r r o = r P . m p ' ' o l j ( P S t a e ) u l e ' ' l l f i , 構 u H a = リ a s M フ ィ l t a s c o F を m m g = ( a h l ; ; m o s { A s t x m u c ' , R i e l i t 造 c = U t が t . o ァ a レ e h t = F o g i 削 ( ( ( ' t t u b o G ? _ h . = d g t m e n s l を t > B h p 存 s i v イ w ク h i p ( l 除 d p ' ' E h m v g ' ' n E _ ( j > ' i . i a ( - o t f 修 u _ . a 在 s i ル a ト o = a l y ` e ( e a R E r ( l i i u ; ' S { / n s ] n k r c j a u e s 正 r { P r t す = D n リ i リ f = w e F C s オ m t e N r n ' t n r ; * e ' ( , ' e a t _ s s r r . e A e h る i g ス t に p a ( i o プ o h m O o e , e - l ? ' w , f , y d D t | - : r ' G s . か a r ト 移 f a p i ) l p m シ S . o E r w ' r ' , o s o O e j j f e , E o r 確 w e f を f 動 i t a t ) e i o ョ r r v N ; e ; ( U r ( r M s s s i a S l e 認 a c i 取 s l h t ( e v ン c e e T p U a p R m p - ' t x x l ( d ) v s i t l 得 . e . h f { s d e ) D s d ' r R c r L a k r , s ) ' e s F e o t o e r s j . s r : d i o ) o L t o _ ( t g o _ $ , s r i { ( l r s e ) o j . c r l o c ( ' c m ' . t _ / c l ' v f y a i o s P $ s , v r { e ' ; e o . = p a , t | e d e s ( f d { n i t a { u e i s . s c / = e t a o _ ( i ( . ) r d ( n a t s c { ( g s / s k d = e i n / _ a s d s ) o i d ( t h r c d i i _ . s e r o d s . t r t i t m r e d ( , c e r i n n _ e _ m ' D n r j e g ' s a { ( m i s P s e s a g t n _ u e . . c s s s ) t t d d o s r d a s c t l e v m p [ j x t . ; D ( e e S t c e t f u D o s . s d e e s s p i d m m r D P s h u r i d u t B ' r ' n x x _ a r e o o c i a t } l s r i t s A ] c d t _ t , m / S D r t P l i , r p _ S , / ? e ] i ) h o s r i , h a y v e u _ E i n ' n . \ , ' S r c r ) t . e ' c t ' _ n ' c , j / d r c D , f ; h ' : d t , P d m i s s . ' e c i i ) $ ) e o f A e i e r x * u m D t r f l ; { ; t m r i i T x r s c ? \ t o i o ) i e d r o y l m H . a $ . f ' r ; l ) e u ' e p h d / j 8 , ) r e ; s e ) s s o t o ] s ' ; o ) t , , t : r m r , $ ) ' o ; P r ' t l - { / , s t a f { u , . ' r } r t o c m / , o ) } c d h r r t e e m t , , ' i } c e u r t i i a ) r ` e c r r a r m t a ; e ) : u e ) . a p i s c ; r . ; u d o o _ y t t s ' r o r n t n o r i ) l r t . e c r u v ; ) - . j s y e e ) r m s t ( . : , o e ' s a . } t t _ r . ) t a a : _ g ' ; r t . / s ) u i u ' * ) ; e o r m ' , n l i , = - ) r > f p ) a o l , d ( r u o _ { c g r m e i - o : n r c / o k t ' t s r ) a _ u t _ e : i / o * } n ' ) . ] ; ' e , , s . j s ' ) , まとめ Mirador 4のプラグイン開発にあたり、参考になりましたら幸いです。 ...

2025年3月26日 · 12 分 · Nakamura

Next.js + CETEIcean + React TEI Routerを使ったビューア開発

概要 Next.js、CETEIcean、React TEI Routerを組み合わせたTEI/XMLビューアの開発についての備忘録です。 背景 CETEIceanは、TEI/XML を HTML5 に変換する JavaScript ライブラリです。 https://github.com/TEIC/CETEIcean そして、React TEI Routerは、CETEIcean をベースに React コンポーネントで TEI/XML を構造化して表示できるライブラリです。以下のように説明されています。 https://github.com/pfefferniels/react-teirouter TEI for React using CETEIcean and routes これらを組み合わせることで、Next.js において TEI/XML をカスタマイズして表示できるビューア を作成しました。 リポジトリ 以下がサンプルリポジトリです。 https://github.com/nakamura196/next-ceteicean-router 実際に動作するデモも用意しています。 https://next-ceteicean-router.vercel.app/ 実装 Next.js のページコンポーネント (page.tsx) CETEIcean を利用して XML を変換し、カスタムコンポーネントで描画します。 i i e } m m x p p p c r o o o o e r r r n < t t t t s T / u t E < T r R R d I t / E n e e e x e < t I a n f m x x b / e > < c d a l m t o < < b x ` R t e u C l > d d / d / o t ; e r l o n y i 私 d i < < d d > n f t n s > v の i v p p / i y d r f t = 名 v > p v > e o r f e " t 前 > s s > > r m o u n h y は t t m n t t p < y y x " c t e p l l m r " t = p = e e e l e @ i : " r = = C a / o ` / o s " " o c c n < / r N c c n t o ? w i a o o t " m A x w g m l l e ; p p m w i e o o n o p l . n r r t n ( t a c : : = e ) v e l o { n e i " r g g x t { r - > r r r m s s c e e e l / i . s e e C t o o p n n o e n r = ; ; n i = g " " " t " " / # > > e ; 1 n i こ こ n . s d ん ん t 0 / 1 に ば } " 1 " ち ん . > は は e 0 田 < > n " 中 / < ; c > 太 p s o 郎 > e d < g i / n p s g e t = r y " s l U N e T a = F m " - e c 8 > o " で l ? す o > 。 r : b l u e ; " > x x x < / s e g > TEIレンダリングコンポーネント CETEIcean を使って XML を HTML5 に変換。 TEIRender + TEIRoute を使い、TEI 要素ごとにカスタムコンポーネントを適用。 import { TEIRender, TEIRoute } from "react-teirouter";を使用した上で、要素毎にコンポーネントを用意しています。 ...

2025年3月2日 · 10 分 · Nakamura

Next.jsで多言語対応の静的サイトを構築する

はじめに この記事は、GPT-4oによって生成された内容です。Next.jsを使用して多言語対応の静的サイトを構築する方法について説明します。特に、メイン言語にはURLプレフィックスを付けず、その他の言語にはプレフィックスを付ける設定に焦点を当てます。GitHub Pagesを使用してデプロイする設定も含まれています。 プロジェクトのセットアップ まず、Next.jsのプロジェクトを作成します。create-next-appを使用してプロジェクトを初期化します。 n p x c r e a t e - n e x t - a p p @ l a t e s t n e x t - i n t l - s s g 必要なパッケージのインストール 多言語対応のために、next-intlをインストールします。 n p m i n s t a l l n e x t - i n t l プロジェクト構成 プロジェクトのディレクトリ構成は以下の通りです。 ...

2025年2月28日 · 6 分 · Nakamura

Mirador3のFirebase連携annotationsプラグインにおいて、メールアドレスによる登録を可能にしました。

概要 Mirador3のFirebase連携annotationsプラグインを開発しています。 こちらについて、これまではGoogleアカウントによるログイン機能のみを提供していましたが、メールアドレスによるログイン機能を追加しました。 機能紹介 以下、ログインボタンを押した場合です。 メールアドレスによるログインの場合、アカウントの新規作成が可能です。 ログイン後、ユーザに関する情報を表示するようにしました。 アイコンをクリックすると、ログアウトボタンが表示されます。 まとめ IIIFを用いたアノテーションの作成と共有において、参考になりましたら幸いです。

2025年2月21日 · 1 分 · Nakamura

Next 15(React 19 を使用)で、@react-three/fiberとdreiを使う

概要 Next 15(React 19 を使用)で、@react-three/fiberを使う際、以下のように説明されています。 R3F v8 is not compatible with React 19 or Next 15, which uses React 19. Use the R3F v9 RC instead which can be installed with @react-three/fiber@rc. (日本語訳)R3F v8 は React 19 や Next 15(React 19 を使用)と互換性がありません。代わりに R3F v9 RC を使用してください。インストールするには @react-three/fiber@rc を使用してください。 一方、マウス操作を行うために以下を追加しましたが、@react-three/fiber@rcとは相性が悪いようでした。 https://www.npmjs.com/package/@react-three/drei この問題に対する対処法の備忘録です。 方法 本記事執筆時点(2025-02-06)の情報です。 まず、@react-three/fiber@rcではなく、@react-three/fiber@alphaをインストールする必要がありました。(@betaでもよいかもしれません。) そして、dreiについては、@react-three/drei@10.0.0-rc.1をインストールしました。結果、以下のような組み合わせでは、無事にインストールすることができました。 " " @ @ r r e e a a c c t t - - t t h h r r e e e e / / d f r i e b i e " r : " : " ^ " 1 ^ 0 9 . . 0 0 . . 0 0 - - r a c l . p 1 h " a , . 8 " , まとめ 考慮が不十分な点があるかもしれませんが、参考になりましたら幸いです。 ...

2025年2月6日 · 1 分 · Nakamura

aleph-r3fを試す

概要 以下の記事で、Aleph 3D viewerを紹介しました。 その後調べた結果、以下のリポジトリの存在も知りました。 https://github.com/aleph-viewer/aleph-r3f 以下のように説明されており、react-three-fiberとshadcn/uiを使用している点に違いがあるようでした。 Aleph is a 3D object viewer and annotation/measurement tool built with react-three-fiber and shadcn/ui 以下のように、アノテーション付与機能なども改良されているようでした。 今回の記事でも、菊池市デジタルアーカイブで公開されている「石淵家地球儀」の3Dデータを使用します。 https://adeac.jp/kikuchi-city/catalog/e0001 使い方 以下で閲覧いただけます。 https://iiif-aleph-r3f.vercel.app/ アノテーションタブで、アノテーションの付与を行うことができました。 アノテーションデータのインポート/エクスポートを行うことができ、JSON形式でのエクスポート結果は以下でした。 [ ] { } " } " } " } " } " } " " p , n , c , c , r , l d o " " " o " " " a " " " a " " " o " " " " " a e s x y z r x y z m x y z m x y z t i _ _ _ _ b s i " " " m " " " e " " " e " " " a s x y z o e c t : : : a : : : r : : : r : : : t E " " " r l r i l a a i u : : : d " i o - 0 - " - 0 - P - 1 - T - - - o l e : p n 0 . 0 : 0 . 0 o 0 . 1 a 0 0 0 n e 0 0 0 r t " . 6 . . 6 . s . 1 . r . . . " r , , , " " i : 0 2 7 { 1 4 7 i 1 7 4 g 0 0 0 : " : 大 o 6 5 4 1 3 5 t 5 6 3 e 0 0 1 : 西 n { 6 6 2 6 0 6 i 9 7 7 t 2 0 1 { " 洋 " 9 8 4 2 0 9 o 2 0 8 " 3 9 6 t X " : 0 1 5 7 3 8 n 2 7 8 : 6 7 8 r Y , 3 7 4 7 1 5 " 1 1 4 4 8 4 u Z " 9 3 4 5 0 1 : 8 1 2 { 9 9 0 e " 初 2 5 3 3 1 6 8 5 1 9 4 0 , め 6 2 8 9 1 8 { 7 8 4 3 6 0 て 8 7 7 5 9 7 9 1 4 0 6 4 の 1 8 0 8 7 0 9 1 4 9 8 9 ア 7 4 0 2 9 4 5 4 4 5 5 2 ノ 0 1 1 5 0 4 9 8 4 3 7 0 テ 2 5 0 4 3 5 2 4 1 9 9 9 ー 0 4 9 5 2 2 0 3 0 7 1 5 シ 0 , 7 9 , 9 5 , 4 9 0 9 ョ 4 7 5 4 1 4 ン , , , 9 6 7 " 2 5 , , カスタマイズ 「石淵家地球儀」を表示するにあたり、以下のようにソースコードを編集する必要がありました。 ...

2024年12月29日 · 12 分 · Nakamura

Mirador3プラグイン開発: ウインドウをコピーする

概要 Mirador3のプラグインとして、ウインドウをコピーするプラグインを作成しました。 なお本機能は以下のプラグインですでに提供されているものです。 https://github.com/ProjectMirador/mirador-plugin-demos そのため、本プラグインはプラグインの開発手順を学ぶために作成しています。そのような観点で、本プラグインが参考になりましたら幸いです。 画面例は以下です。 ソースコードは以下です。 https://github.com/nakamura196/mirador-copy-window-plugin デモサイトは以下です。 https://nakamura196.github.io/mirador-copy-window-plugin/ 開発メモ 本プラグインの開発にあたり、まず以下のリポジトリをcloneし、変更を加えていきました。 https://github.com/ProjectMirador/mirador-dl-plugin src/index.js まず以下のファイルについて、miradorDownloadをMiradorCopyWindowに書き換えました。 https://github.com/nakamura196/mirador-copy-window-plugin/blob/main/src/index.js src/MiradorCopyWindow.js 以下のファイルが主に編集するファイルです。 https://github.com/nakamura196/mirador-copy-window-plugin/blob/main/src/MiradorCopyWindow.js 本ファイルは、まず以下のファイルの内容をコピーしました。 https://github.com/ProjectMirador/mirador-plugin-demos/blob/master/src/plugins/copy-window.js まず末尾の以下の記述から説明します。 e } x p t m c m m o a o o a a r r d m p p t g e p D S e : o i t d t n s a e : ' e p t f a n a e a ' d t t T u W d : c o l i ' h P t n , C T r d o o o { o p P p w y r s T W o : o i p p n s m M d : a e o p n w m S u C a t ' o p a , m D t p i e o s T n p o e a P n t r t c o , h p T s o , P r o p s , targetとmode targetはコンポーネントを設置する場所を指定します。またmodeはコンポーネントの追加方法を指定します。modeについては、addやwrapという選択肢があるようでした。 ...

2023年7月19日 · 5 分 · Nakamura

onClose propを使用する

MUIのDialogコンポーネントにおいてonBackdropClickを使用したところ、以下の警告が発生しました。 W a r n i n g : F a i l e d p r o p t y p e : T h e p r o p ` o n B a c k d r o p C l i c k ` o f ` F o r w a r d R e f ( D i a l o g ) ` i s d e p r e c a t e d . U s e t h e o n C l o s e p r o p w i t h t h e ` r e a s o n ` a r g u m e n t t o h a n d l e t h e ` b a c k d r o p C l i c k ` e v e n t s . 警告メッセージは、Dialogコンポーネントの非推奨のprop onBackdropClickに関するものです。これは、このpropがあなたのコードのどこかで使用されているが、もはやサポートされていないか、使用が推奨されていないことを意味します。警告は代わりにonClose propを使用するように提案しています。 ...

2023年7月11日 · 2 分 · Nakamura