何もない所からドラッグして四角い枠を描き、枠にかかった項目をまとめて選ぶ仕組みを、ライブラリを使わずに React で作りました。項目の位置は押したときに一度だけ測ります。Shift での追加、クリックとの区別、文字が選択されてしまう ...

ユーザーが選んだ音声ファイルの波形を、ライブラリを使わずに canvas へ描く方法です。Web Audio API で数値の並びにデコードし、canvas の横幅と同じ数の区間ごとに最小値と最大値を取って描きます。再生位置の表示と、 ...

React の video 要素に track 要素で WebVTT の字幕を付け、日本語・英語・オフを select で切り替える方法です。textTracks の mode の扱いと、字幕が出ないときの原因も検証しました。 ...

画像をマウスのホイールで拡大・縮小し、ドラッグで動かせる表示枠を、ライブラリを使わずに React で作りました。カーソルの下の位置を動かさずに拡大する計算と、onWheel では preventDefault が効かずページがスクロ ...

リストの行を指やマウスで左へ引くと削除される仕組みを、ライブラリを使わずに React で作りました。少し引いただけなら元に戻し、縦の動きはページのスクロールに任せます。touch-action の値でタッチ操作がどう変わるかも、Ch ...

入力が1秒止まったらサーバーに保存し、「保存中…」「13:05 に保存しました」と表示するカスタムフックを React で作りました。メモや下書きを、保存ボタンを押さずに残したいときに使えます。保存の最中に続きを打っても古い内容で上書 ...

ブラウザのネットワークが切れたら「13:19 からオフラインです」と出し、つながったら「オンラインに戻りました」を3秒だけ出す表示を React で作りました。navigator.onLine が true でもサーバーに届かない場合 ...

2つの文章を比べ、消えた部分を赤、増えた部分を緑で表示するコンポーネントを React で作りました。書き直す前と後の差分を見せたいときに使えます。jsdiff の diffWords に Intl.Segmenter を渡すと、日本 ...

グラフのライブラリを入れずに、React と SVG だけで棒グラフを描きました。値を座標に変える計算、きりのよい目盛り、画面の幅に合わせる方法、データを切り替えたときに棒を伸び縮みさせる方法を、Chromium で測った値とともに紹 ...

Geolocation API の getCurrentPosition() で緯度・経度を取得し、React の state に入れて表示する方法です。timeout と maximumAge の効き方、許可されないときの表示、wa ...