貼り付けた一覧から重複した行を取り除くコンポーネントを React で作りました。new Set だけでは別の行として残る改行コード・前後の空白・全角と半角・大文字と小文字の違いを、比べるときだけそろえる方法と、10万行を貼り付けたと ...

点線や波線の下線は、text-decoration に underline と dotted や wavy を並べて書くだけで引けます。線の色や太さの変え方、英字の下で波線が途切れるときの直し方、Safari 26.1 以前でも効く書 ...

YAML と JSON の欄を行き来して変換する React コンポーネントを、yaml パッケージで作りました。no や on が別の値になる問題、マージキー、エイリアスの展開の上限、.inf の扱いを確かめた結果を載せています。

ボタンの ::before に白い帯のグラデーションを描き、マウスを乗せたときに transform で左の外から右の外まで動かすと、光が流れる反射になります。overflow と position が要る理由、外したときに光が逆戻り ...

貼り付けた JSON から TypeScript の interface を作って表示する React コンポーネントを、ライブラリなしで作りました。省略できるキーとユニオン型の出し方、型の名前の付け方、作った型を tsc で確かめた ...

ブラウザの speechSynthesis を使い、段落ごとに「読み上げる」「止める」を切り替えるボタンを React で作ります。日本語の声の探し方、別のボタンを押したときに読み上げが順番待ちになる原因、コンポーネントが画面から消え ...

選んだ画像の画素を canvas で読み、明るさ 0〜255 ごとの数を棒グラフにする React のコンポーネントです。明るさの計算に使う重み、透明な画素の扱い、画像を縮めてから数えたときの時間と結果の違い、縦軸を対数にする理由を、 ...

文章の中の URL だけを にして表示する部品を React で作りました。正規表現で URL を探して文字とリンクに分け、配列のまま描画するので、dangerouslySetInnerHTML は使いません。文末の「.」やかっこの ...

表の1行や文の中に収まる小さな折れ線グラフ（スパークライン）を、ライブラリを使わずに React と SVG の polyline で描きました。最小値と最大値で縦の位置を決める計算、全部同じ値や1件だけのときの扱い、最後の点の丸が切 ...

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