本文の文字数と「1分に読む文字数」から、「この記事は約3分で読めます」を出すコンポーネントを React で作りました。日本語は見た目の1文字ごと、英語は単語ごとに数える方法、四捨五入の境目、time 要素への入れ方、長い文章で速く数 ...

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

予定の入力欄から、カレンダーアプリに取り込める .ics ファイルを作ってダウンロードさせる方法です。必要な行、UTC での日時、終日の予定の終わりの日、カンマや改行の書き方、日本語を75バイトで折り返す方法を、保存したファイルを読み ...

ボタンを押すたびに、長さと使う文字を選んだランダムなパスワードを作る部品を React で作りました。乱数は Math.random() ではなく crypto.getRandomValues() から取り、割った余りで文字を選ぶとき ...

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

「2026」と打てば「令和8年」、「R8」や「令和８年」と打てば「2026年」と出る入力欄を React で作りました。元号の表の持ち方、年の途中で元号が変わる年の出し方、全角や「㋿」の扱いを、Intl の和暦表示と照らし合わせて確か ...

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

画像の上をドラッグした範囲にモザイクをかけて、そのまま保存できる仕組みを React で作りました。マスごとに平均の色で塗る処理、縮めて表示した canvas での座標の直し方、縮めて引き伸ばす書き方との違いも確かめています。 ...

2つの日付から、間の日数、「何か月何日」、土日を除いた日数を出す部品を React で作りました。Temporal.PlainDate の until() で数え、Temporal のないブラウザ向けの書き方や、月末をまたぐときの数え ...

正規表現とフラグを入力すると、一致した部分の強調とキャプチャグループの一覧がその場で出る入力欄を、React で作りました。書き間違いのエラー表示、長さ 0 の一致の扱い、時間のかかるパターンで固まらないように Worker で止める ...