リストの行を指やマウスで左へ引くと削除される仕組みを、ライブラリを使わずに 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 ...

getUserMedia() で得たカメラの映像を video に映し、撮影ボタンを押した瞬間の映像を canvas に描いて JPEG にする方法です。StrictMode でもカメラを止め忘れない片付けの書き方と、前面カメラの左右 ...

行数に合わせて高さが伸び、上限を超えたら中でスクロールするテキストエリアを React で作りました。CSS の field-sizing: content に高さを任せ、使えないブラウザでは scrollHeight を測ります。

付せんをつまみのドラッグで好きな位置へ動かす仕組みを、ライブラリを使わずに React で作りました。位置と重なり順は state で持ちます。重なり順を配列の並べ替えで変えると、ドラッグが途中で止まることも確かめました。

ユーザーが選んだ動画ファイルから、ブラウザの中でサムネイル用の JPEG を作る方法です。画面に出さない video 要素で場面へ移動し、canvas に描いて toBlob で画像にします。seeked を待たずに描くと前の場面が写 ...