選んだCSVファイルを React で読み込み、表にして表示しました。Papa Parse での行の分け方、Shift_JIS のファイルの読み方、列数が合わない行の知らせ方を、実際の出力とともに扱います。

表の各行と見出しにチェックボックスを置き、行をまとめて選べるようにしました。選んだ行を id の Set で持つ書き方、見出しの「一部だけ選択」の表示、Shift を押したクリックでの範囲選択、選んだ行の削除を確かめています。 ...

パソコンのファイルをドラッグして置ける場所を、React と TypeScript で作りました。drop を受け取る条件、強調のちらつきを防ぐ数え方、枠の外へのドロップの止め方、ボタンからの選択を扱います。

入力に合わせて候補を出すオートコンプリートやサジェストを、↑↓・Enter・Esc で操作できるようにする方法です。React でコンボボックスを作り、フォーカスを入力欄に置いたまま aria-activedescendant で候補 ...

「保存しました」のようなトースト通知を、ライブラリを使わずにReactで作る方法です。どこからでも呼べるtoast()、一定時間で消すタイマー、マウスやフォーカスで止める処理、読み上げ用の領域、モーダルのdialogとの関係を確かめま ...

送信ボタンを続けて押しても、注文が1件だけ作られるようにする方法です。送信中にボタンを無効にする書き方、refで止める書き方、formのactionの場合と、サーバー側でIdempotency-Keyを使う方法を確かめました。 ...

メニューやドロップダウンを、外側をクリックしたら閉じるカスタムフックを TypeScript で作りました。開くボタンを内側に入れる理由、click ではなく pointerdown を待つ理由、ポータルの中の扱い、タッチ操作での動き ...

React で img に loading=”lazy” を付けて遅延読み込みし、onLoad と onError で読み込み中の表示を出す方法です。width・height、key での作り直し、ハイドレーシ ...

自作のモーダルを開いている間、後ろの画面を包む要素に inert を付けると、Tab キーのフォーカスもクリックも届かなくなり、アクセシビリティツリーからも外れます。フォーカストラップを作るときは、後ろの画面へフォーカスが移らないよう ...

入力したまま保存していない内容を、うっかり捨てないための確認の出し方です。再読み込みやタブを閉じる操作はbeforeunloadで、アプリの中の画面移動はReact RouterのuseBlockerで止める方法を、検証環境で確かめま ...