選んだファイルの SHA-256 などのハッシュ値を、React でブラウザだけで計算して表示します。crypto.subtle.digest の使い方、選び直したときに前の結果で上書きされない書き方、大きいファイルを Worker ...

文字色と背景色を選ぶと、WCAG のコントラスト比と AA・AAA の判定を表示する React のコードです。表示は小数第2位で切り捨て、判定は計算したままの値で行います。カラーコードの入力欄と色の input を、入力途中の文字を ...

センチとインチのように、どの欄に打ってもほかの欄が換算される入力欄を React で作りました。state に持つものを「最後に打った欄と、打ったままの文字列」に絞る理由と、文字列を数にするとき・計算結果を表示するときの注意を確かめて ...

打つたびに「1,234,567」のように3桁区切りで表示される金額の入力欄を、React で作りました。type=”number” を使わない理由、IME で変換中の扱い、フォームで区切りのない数を送る方法を確 ...

お手本の文を1文字ずつ打ち、まちがえた文字をピンクで示し、最後に時間と正確率を出すタイピング練習の画面を React で作りました。2文字目から進まない、Shift をミスに数える、Space でボタンが押される書き方とも比べています ...

1〜15のタイルを空きマスへ滑らせてそろえる15パズルを、React と TypeScript で作りました。半分が解けない並びになる混ぜ方の直し方、段の端をまたいで動いてしまう隣の判定、下へ動かしたタイルが滑らずに飛ぶ描き方を、書き ...

12枚のカードから同じ絵柄の2枚を探す神経衰弱を、React で作りました。偏らないシャッフル、2枚めくったときの判定と裏に戻すタイマー、連打や同じカードの2度押しへの対策、「もう一度」で前のゲームのタイマーと表の面を残さない方法を、 ...

「小・中・大」のボタンでページ全体の文字の大きさを切り替える React のコードです。html の font-size を % で変え、ほかの文字は rem で指定します。ボタンは aria-pressed で押されている状態を示し ...

日時の付いた記録を、日付の見出しで区切ったタイムラインにします。日付は toISOString ではなく、タイムゾーンを決めた Intl.DateTimeFormat で取り出します。並べ替えてからまとめる方法と、見出しを上に残す C ...

選んだ画像を 90° ずつ回したり左右・上下に反転したりして、そのままファイルに保存する仕組みを React で作りました。向きの持ち方と canvas での描き方、回したあとに反転したときのずれ、EXIF の向きも確かめています。