名前を1行に1人ずつ書いてボタンを押すと、ランダムにグループへ分ける部品を React で作りました。混ぜてから順番に配って人数の差を1人以内にする方法と、分けた結果を描画のたびに作り直さないよう、ボタンを押したときだけ state ...

選んだ画像の全面に、斜めに並べた文字の透かしを入れて保存する仕組みを React で作りました。パターンを回して角まで埋める方法、縁取りした文字を均一に薄くする方法、JPEG で保存するときの透明な部分の扱いを、検証環境で確かめていま ...

入力した文字を UTF-8 のバイト列にして、16進数・2進数・%記法で表示する部品を React で作りました。TextEncoder の使い方、1文字ごとのバイト数、encodeURIComponent との違い、絵文字や孤立サロ ...

URLを貼ると、ホストやパスに分け、クエリを名前と値の表で直せる部品をReactで作りました。状態をURLの文字列1つにする作り方と、書き戻したときに「+」や「%20」などの書き方が変わる点を、ブラウザで確かめています。

「0 9 * * 1-5」のような cron の式から、次に実行される時刻を5件並べる部品を React で作りました。cron-parser での求め方、タイムゾーンの指定、日と曜日を両方書いたときの数え方、夏時間の日の結果も確かめ ...

東京やニューヨークなどの今の時刻を並べ、時差と「前日・翌日」も出す世界時計を React で作りました。Intl.DateTimeFormat の timeZone で時刻を出し、夏時間の切り替わりや30分単位の時差も確かめています。 ...

選んだ画像ファイルを、FileReader の readAsDataURL() でデータURLにする方法です。元のファイルと同じバイト列に戻ること、canvas の toDataURL() や toBase64() との違いも確かめて ...

英数字・記号・カタカナ・スペースを選んで、全角と半角を相互に変換する入力欄を React で作りました。「ｶﾞ」を1文字の「ガ」にまとめる方法、normalize(‘NFKC’) だけでは変わりすぎる文字、郵便 ...

合計金額と人数を入れると、1人あたりの額を出す割り勘の部品を React で作りました。100円単位で切り上げて全員同じ額にする場合と、端数を幹事が払う場合の2通りを並べ、全角の数字や IME で打ったときの扱いも確かめています。

Markdown の入力欄とプレビューのスクロールを、見出しや段落の位置でそろえます。全体の割合で合わせたときのずれ、送り返しで止まるスムーズスクロール、画像の読み込み後のずれを Chromium で確かめました。