textarea の左に行番号の列を並べ、改行の数から番号を作って、スクロールに合わせて動かします。scrollTop をそろえる書き方で起きる15pxのずれ、折り返しによるずれ、onSelect では拾えないキャレットの移動を Ch ...

2026 を MMXXVI に、MCMXCIX を 1999 に変える関数と、打つたびに結果が出る入力欄を React で作りました。IIII のような正しくない並びの見分け方、1文字の「Ⅻ」の読み方、Intl.NumberForma ...

プロフィール画像の代わりに、頭文字のアバターを出したいときに使える方法です。画像のないユーザーに、名前の頭文字と背景色で丸いアイコンを出す React のコンポーネントを作りました。絵文字でも崩れない頭文字の取り出し方、名前から毎回同 ...

選んだ色にいちばん近い CSS の色の名前（royalblue など）を表示する React のコードです。色を Oklab に直して ΔEOK2 で距離を測ります。RGB の値のまま測る方法と比べると、4096色のうち37%で選ばれ ...

入力欄に打った文章を、20字×20行の原稿用紙のマス目に1字ずつ並べるコンポーネントを React で作りました。Intl.Segmenter で1字ずつに分ける方法、縦書きと横書きを同じ CSS で切り替える書き方、長い文章でも入力 ...

バブルソートが2本の棒を比べて入れ替える様子を、React の棒グラフで1手ずつ見せる部品を作りました。並べ替えの途中を配列に記録してから再生する作り方と、棒をすべらせて動かすための key と DOM の並べ方を、Chromium ...

画像の明るさとコントラストを2本のスライダーで調整し、PNG で保存するコンポーネントを React で作りました。画面では CSS の filter、保存では canvas の ctx.filter に同じ文字列を渡します。値が 2 ...

色の input で選んだ色から、補色・類似色・トライアドなどの配色を作って並べる React のコードです。HSL の色相を回して作ります。HSL を整数に丸めると元に戻らない色が多いことや、灰色がどの配色でも同じ色になること、CS ...

「{紫陽花|あじさい}」のように書いた文字列から、React で ruby 要素を組み立ててふりがなを表示するコードです。1文字ずつ付ける形、表示の切り替え、行間、コピーしたときにふりがなが混ざる問題の避け方も扱います。

1〜15のタイルを空きマスへ滑らせてそろえる15パズルを、React と TypeScript で作りました。半分が解けない並びになる混ぜ方の直し方、段の端をまたいで動いてしまう隣の判定、下へ動かしたタイルが滑らずに飛ぶ描き方を、書き ...