時・分・秒の針が動くアナログ時計を、React と SVG で作りました。時刻から針の角度を出す計算、秒の変わり目に合わせて更新する方法、requestAnimationFrame で秒針をなめらかに動かす方法、transition ...

昼ごはんの候補などから抽選で1つ選ぶルーレットを、React と CSS の transition で作りました。当たりから止める角度を計算する方法、回転角を足し続ける理由、transitionend と動きを減らす設定への対応を確か ...

16×16 のマス目をクリックやドラッグで塗るドット絵エディターを React と TypeScript で作りました。ポインターの位置からマスを求める方法、速く動かしても線が途切れない塗り方、塗りつぶし、元に戻す機能、PNG での保 ...

ラベルを左右にドラッグすると数値が増減する入力欄を、React と Pointer Events で作りました。setPointerCapture でラベルの外まで追いかける方法、Shift で10倍にする方法、0.01 刻みの丸め、 ...

React と SVG で描いた折れ線グラフに、カーソルを乗せた月の値を出すツールチップを付けました。ポインターの位置を viewBox の座標に直す方法、いちばん近い点の選び方、グラフの端でツールチップを出す側の切り替え、タッチとキ ...

React と SVG の path だけで、ドーナツグラフを描きました。値を角度に直す計算、輪を切り取る d 属性、半周を超える扇形と100%の扇形が崩れる理由と直し方、クリックで項目を選ぶ方法を、Chromium で確かめています ...

1日を1マスにして、縦に曜日、横に週を並べる「草」のカレンダーを、React と CSS Grid で作りました。マスの位置を日付から求める計算、件数を5段階の濃さに分ける方法、曜日の列を横スクロールで残す CSS、矢印キーでの移動を ...

記事の一覧のように縦に長いページの右下に出す「ページトップへ戻る」ボタンを、React で作る方法です。スクロールした量での表示の切り替え、なめらかなスクロール、動きを減らす設定への対応、押した後のフォーカスの置き場所まで、ブラウザで ...

見出しが枠からはみ出さないように、収まるいちばん大きい文字の大きさを React で測って決める方法です。二分探索で font-size を試し、枠の幅の変化と Web フォントの読み込みに合わせて測り直します。

横に並んだカードをマウスでつかんで動かせるリストを、ライブラリなしの React で作りました。ポインターは動き始めてから捕まえます。ドラッグの後にリンクが開く問題や、リンクのドラッグで止まる問題も確かめました。