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

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

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

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

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

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

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

親が描き直されるたびに一緒に描き直される子は、memoで包むと、propsが前と同じあいだは描き直されなくなります。その場で書いたオブジェクトや関数を渡すと効かなくなる理由とその直し方、JSXのchildrenでも効かなくなることを、 ...

Reactのボタンの状態ごとの見た目を、Storybookのストーリーとして書いて一覧にしました。Controlsでのpropsの切り替え、自動で作られるドキュメントのページ、play関数とVitestでのテストを、TypeScrip ...

「/」で検索欄へ移る、Ctrl+Kでコマンドパレットを開くといったショートカットを、Reactのカスタムフック1つにまとめる方法です。入力欄の中では反応させない、押しっぱなしや日本語の変換中は無視する、といった点を検証環境で確かめまし ...