Reactの画面で金額や数を「￥1,235」のようにカンマ区切りで出したいときは、Intl.NumberFormatが使えます。「1.2万」のような短い表記や割合、増減の符号も出せます。書式の使い回し方と、全角の「￥」など文字列で比べ ...

コマンドやURLの横に置く「コピー」ボタンを、Reactのカスタムフックとnavigator.clipboard.writeTextで作る方法です。「コピーしました」の表示を2秒で戻す仕組みと、コピーできないときの扱いも確かめました。 ...

Vite で作った React の画面を、vite-plugin-pwa の Service Worker でオフラインでも開けるようにする方法です。画面のファイルと API のデータがいつ保存されるか、オフラインの表示、新しい版への ...

Reactのフォームで、バリデーションのエラーを入力中は出さず、欄を離れたら出し、直した瞬間に消したいときの方法です。エラーの代わりに「欄に触れたか」と「送信したか」をstateに持ちます。画面がずれてボタンが押せなくなる問題の対策も ...

React 19.3のViewTransitionで、一覧と詳細の切り替えに動きを付ける方法です。startTransitionの中で切り替えるとクロスフェードし、addTransitionTypeで進む・戻るの向きを変えたスライドに ...

同じReactのコンポーネントを、広い列では横並びに、狭い場所では縦並びにする方法です。レスポンシブなページで、同じ部品を幅の違う場所に置きたいときに使えます。置き場所の要素にcontainer-typeを付け、@containerで ...

OS がダークモードかどうかを、React のコンポーネントで true/false として受け取るカスタムフックの作り方です。matchMedia と useSyncExternalStore を使い、設定の切り替えへの追従、use ...

画面の幅ではなく、置かれた場所の幅に合わせてReactのコンポーネントの表示を切り替える、レスポンシブな部品の作り方です。ResizeObserver を ref のコールバックで登録するフックを作り、描画の回数、ボックスの違い、表示 ...

TanStack Query の useMutation で更新したあと、onSuccess で invalidateQueries の Promise を返して一覧を読み直す方法を確かめました。isPending の違いや、setQ ...

Reactのアプリで、APIの応答をバリデーションしたいときに使える方法です。Zodのスキーマで応答をsafeParseしてから使う関数を作り、形の違う応答をコンポーネントでエラーとして表示する流れを、検証環境で確かめました。 ...