サイドバーと本文のあいだの取っ手をドラッグして、幅を変えられるようにする部品を React と TypeScript で作りました。setPointerCapture、文字の選択とタッチの対策、キーボード操作、幅の保存を順に確かめてい ...

入力項目の多いフォームを「連絡先→お届け先→確認」のようにステップに分ける作り方です。値を親にまとめて持つこと、次へ進む操作をformの送信で扱うこと、「戻る」にtype=”button”を付けることを、検証環 ...

React で、いま読んでいる節の見出しを目次で強調する方法です。IntersectionObserver で、見出しが固定ヘッダーの下端を通り過ぎたときだけ位置を計算し、上へ戻ったときや途中から開いたときもずれないようにします。

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

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

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

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

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

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

コマンドやURLの横に置く「コピー」ボタンを、Reactのカスタムフックとnavigator.clipboard.writeTextで作る方法です。「コピーしました」の表示を2秒で戻す仕組みと、コピーできないときの扱いも確かめました。 ...