2025年10月14日 / 最終更新日時 : 2025年10月14日 masaakiota React 【React】react-dialog-hubを公開しました こんにちは、フリーランスエンジニアの太田雅昭です。 ReactのDialog事情 Reactでは通常、ダイアログは都度エレメントを生成する必要があります。それを補うためにフックライブラリがあります。 以前@ebay/ni […]
2025年10月13日 / 最終更新日時 : 2025年10月13日 masaakiota MUI 【MUI】ラベル下の空白（ノッチ）を消す こんにちは、フリーランスエンジニアの太田雅昭です。 前提 MUIのノッチ MUIではラベルの下に空白ができることがあります。ラベルが重なっている時にはちょうど合っていて良いのですが、ラベルが重なっていないにも関わらずノッ […]
2025年10月11日 / 最終更新日時 : 2025年10月11日 masaakiota React 【React】@ebay/nice-modal-reactの型強化的な こんにちは、フリーランスエンジニアの太田雅昭です。 ReactのDialog事情 ReactでのDialogは、ボタンと一緒にElementも作成して使うのが一般的です。muiなどですね。ただしこれは結構面倒だったりしま […]
2025年10月1日 / 最終更新日時 : 2025年10月1日 masaakiota React 【Tanstack Form】useFormの戻り型を定義する【React】 こんにちは、フリーランスエンジニアの太田雅昭です。 useFormの戻りが複雑 @tanstack/react-formは v1.23.4時点で、useFormの戻りを生成するユーティリティはありません。ジェネリクスも複 […]
2025年9月30日 / 最終更新日時 : 2025年10月1日 masaakiota React 【Tanstack Form】送信試行後のみonChange検証する【React】 こんにちは、フリーランスエンジニアの太田雅昭です。 Tanstack FormのonChange Tanstack Formでのバリデーションは、フィールドごとにどのイベントで発火させるかなどわかりやすいAPIとなってい […]
2025年9月30日 / 最終更新日時 : 2025年9月30日 masaakiota React 【Tanstack Form】送信時に全フィールドの検証を行う【React】 こんにちは、フリーランスエンジニアの太田雅昭です。 Tanstack Form Tanstack FormはForm用ライブラリです。 https://tanstack.com/form/latest これまでreact […]
2025年9月28日 / 最終更新日時 : 2025年9月28日 masaakiota React 【React】よくある国旗付き国選択を作る こんにちは、フリーランスエンジニアの太田雅昭です。 国選択UI 国選択UIは、国名のみのものもありますが、国旗があると親切です。また国名のローカライゼーションもあるとベストです。 今回は下記の条件で作ります。 使用ライブ […]
2025年9月23日 / 最終更新日時 : 2025年9月23日 masaakiota MUI 【MUI】内部CSS隣接セレクタにこれで勝てる こんにちは、フリーランスエンジニアの太田雅昭です。 CSSの仕様 CSSでは、隣接セレクタが強くなり、単体でのセレクタは負けてしまいます。そのためそういう場合は同じように隣接セレクタを使うか、!importantなどを使 […]
2025年9月18日 / 最終更新日時 : 2025年9月18日 masaakiota React 【Jotai】URLパラメータごとに値を保持する こんにちは、フリーランスエンジニアの太田雅昭です。 Jotaiのスコープ Jotaiはデフォルトでグローバルスコープを持ちますが、Providerを使用することで限定することもできます。 検証環境 URLパラメータごとに […]
2025年9月14日 / 最終更新日時 : 2025年9月14日 masaakiota React 【Jotai】useHydrateAtomsを毎回発火させる こんにちは、フリーランスエンジニアの太田雅昭です。 useHydrateAtoms useHydrateAtomsはServerからClientに簡単にデータを渡せる関数です。useEffectや待機処理を別途書く必要が […]