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

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

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

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

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

dnd-kit の @dnd-kit/sortable で、ドラッグで並べ替えられる一覧を TypeScript で作りました。やることリストのように、ドラッグ＆ドロップで順番を入れ替える縦の一覧に使えます。マウスとキーボードでの並べ ...

React Routerのデータモードでは、ルートにloaderを書くと、画面を描画する前にデータを読み込めます。useLoaderDataでの受け取り方と型の付け方、入れ子のルートの読み込みの順番、読み込み中の表示、エラーと中止の扱 ...

dangerouslySetInnerHTMLは、Reactのエスケープを通さずにHTMLをそのまま入れます。利用者が入力した文字列を渡すと、埋め込まれたコードがページと同じ権限で動きます。どんな書き方で仕込んだコードが動き、DOMP ...

Zustandは、Reactで複数のコンポーネントにまたがる状態管理を小さく始めたいときに使えます。createで作ったフックを呼ぶだけで、Providerなしに状態を共有できます。TypeScriptでの書き方や、セレクターと再描画 ...

一覧や選択の部品を、どんなデータにも型が付いたまま使い回すには、propsの型に型引数Tを付けます。Tがどこで決まるか、型チェックで止まる間違い、アロー関数とrefでの注意点を、TypeScriptで確かめました。