見出しのクリックで表を昇順・降順にソートしたいときの、TanStack Table の getSortedRowModel の使い方です。クリックごとの並び方の切り替わり、Shift を押して複数の列で並べる方法、日本語の名前の比べ方 ...

React Routerのデータモードでは、ルートにactionを書くと、Formで送信した入力をrequest.formData()で受け取れます。入力の誤りを400で返して表示する方法と、保存後のリダイレクトと一覧の読み直しを、検 ...

一覧の絞り込みの条件をURLのクエリに置くと、再読み込みやURLの共有、ブラウザの「戻る」で条件が元に戻ります。React RouterのuseSearchParamsでの読み書き、検索欄の履歴の残し方、入力欄のカーソルが飛ぶ問題と、 ...

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

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

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

Reactで、canvasの中のボールをrequestAnimationFrameで動かす方法です。canvasの要素とボールの位置をuseRefに持ち、useEffectで始めたループをcancelAnimationFrameで止め ...

Intl.DateTimeFormatで言語やタイムゾーンを省くと、サーバーとブラウザで日付の文字が変わり、ハイドレーションエラーになります。両方を指定する書き方と、閲覧者のタイムゾーンで出す書き方を検証環境で確かめました。

お問い合わせフォームなどの入力をlocalStorageに自動保存し、再読み込みやタブを閉じたあとも下書きを戻す方法です。読み込みはuseStateの初期化関数、書き出しはuseEffectで行い、壊れた値や容量不足でも止まらない書き ...

dialog要素をshowModal()で開くと、Escキーで閉じる、後ろを操作できなくする、フォーカスを戻すといった処理をブラウザが受け持ちます。Reactのstateとずれないようにつなぐ書き方を、検証環境で確かめて紹介します。