12枚のカードから同じ絵柄の2枚を探す神経衰弱を、React で作りました。偏らないシャッフル、2枚めくったときの判定と裏に戻すタイマー、連打や同じカードの2度押しへの対策、「もう一度」で前のゲームのタイマーと表の面を残さない方法を、 ...

「小・中・大」のボタンでページ全体の文字の大きさを切り替える React のコードです。html の font-size を % で変え、ほかの文字は rem で指定します。ボタンは aria-pressed で押されている状態を示し ...

日時の付いた記録を、日付の見出しで区切ったタイムラインにします。日付は toISOString ではなく、タイムゾーンを決めた Intl.DateTimeFormat で取り出します。並べ替えてからまとめる方法と、見出しを上に残す C ...

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

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

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

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

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

ボタンを押すとカードが裏返り、表と裏が入れ替わるコンポーネントを作りました。2つの面を重ねて外側ごと回す CSS、どの指定が欠けるとどう崩れるか、裏の文章が長いときの高さ、見えていない面を inert にする理由、裏返した後のフォーカ ...

画像の上の番号付きの点を押すと、その場所の説明が出るコンポーネントを React と TypeScript で作りました。点の位置を % で持つ方法、Esc キーと外側のクリックで閉じる作り、狭い画面で説明をはみ出させない幅の決め方を ...