‘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から名前を受け取ると、クラス名がファイルごとに変わり、ぶつからなくなります。型の注意や、そ ...

Reactでファイルを送る画面に、プログレスバーで進み具合を表示する方法です。XMLHttpRequest の upload に届く progress イベントで送った量を受け取ります。中止と後片付け、送信後の処理待ちの表示も扱います ...

WebSocketの接続、受信、送信、切れたときのつなぎ直しを、Reactのカスタムフック1つにまとめる方法です。つなぎ直しが止まらなくなる書き方や、外したあとに接続が残る書き方との違いを、検証環境で接続の数を数えて確かめました。

自作のモーダルを閉じると、フォーカスはページの先頭に飛びます。開く前の要素を覚えて、閉じたときに戻すフックの書き方と、autoFocus で覚える要素がずれる落とし穴、元のボタンが消えたときの戻し先を、検証環境で確かめて紹介します。

aria-liveやrole=”status”の付いた領域は、中身が変わるとスクリーンリーダーに伝わります。Reactでは、領域を最初から置いておき、中の文だけを変えるのが基本です。同じ文が続くときの対処も、C ...

Viteで作ったReactのアプリを、Playwright Testで本物のブラウザから操作してテストしました。開発サーバーの自動起動、役割とラベルでの要素の探し方、表示が変わるまで待つexpect、APIの差し替え、失敗したときのレ ...