同じ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してから使う関数を作り、形の違う応答をコンポーネントでエラーとして表示する流れを、検証環境で確かめました。 ...

‘use server’ を書いた関数を form の action に渡すと、入力は FormData としてサーバーの関数に届きます。Next.js 16 で、送られるリクエストの形、JavaScript ...

React Server Components では、’use client’ を書いたファイルが境目になり、そこから import したものはすべてブラウザへ送られます。Next.js 16 で、送られるコー ...

Reactのアプリを多言語対応させ、日本語と英語を画面のボタンで切り替える方法です。react-i18nextのi18n.changeLanguageを呼ぶだけで表示が変わります。訳がないときの代わりの言語、選んだ言語の保存、キーの型 ...

Jotaiは、Reactで複数のコンポーネントが同じ値を使うときの状態管理に使えます。値ごとの小さなatomの作り方と型、計算するatom・書き込み専用のatom、描画し直される範囲、Providerとストアの分け方を検証環境で確かめ ...

別々のCSSファイルに同じクラス名を書くと、あとから読み込んだ指定が両方に効いてしまいます。ファイル名を.module.cssにしてstylesから名前を受け取ると、クラス名がファイルごとに変わり、ぶつからなくなります。型の注意や、そ ...