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

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

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

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

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

入れ子の深い JSON を、オブジェクトや配列ごとに開いたり閉じたりできる表示を、ライブラリなしの React で作りました。開いている場所をパスの Set で持つ方法、パスを「.」でつなぐと起きる取り違え、JSON.parse のエ ...

マウスでもパソコンのキーでも弾ける1オクターブの鍵盤を、音声ファイルなしで React と Web Audio API で作ります。音の終わりで波形が途切れない止め方と、押しっぱなしや鍵盤の外で離したときに音が鳴りやまない原因も確かめ ...

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

表計算ソフトのように、表のセルをドラッグして四角い範囲で選ぶ仕組みを、ライブラリを使わずに React で作りました。範囲は起点と端の2つのセルで持ちます。Shift と矢印キーでの選択、Ctrl+C でのタブ区切りのコピー、文字の選 ...

打ち合わせや勉強会の予定を、カレンダーの週の表示のように時刻に合わせて置きます。月曜から日曜を列、5分を1行にした CSS Grid に、開始と終了の時刻から求めた grid-row で予定を置き、時間が重なる予定は列を等分して横に並 ...