2つの JSON を読み込み、追加・削除・変更された項目について「toys.name」のような場所と変更前・変更後の値を、表に並べて見せるコンポーネントを、ライブラリなしの React で作りました。配列を id で対応させる方法や、 ...

ボタンと吹き出しを1つの要素で包み、:hover で visibility と opacity を切り替えると、マウスを乗せたときだけ説明が出ます。出るまでの待ち時間、吹き出しへのマウスの移し方、キーボードと Esc キー、読み上げ用 ...

本文の文字数と「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 での座標の直し方、縮めて引き伸ばす書き方との違いも確かめています。 ...