選んだファイルの大きさを「2.5 MB」「2.3 MiB」のように表示するコンポーネントを React で作りました。1000 ごとと 1024 ごとの違い、丸めると「1000.0 kB」になる問題、Intl.NumberFormat ...

Intl.PluralRulesを使うと、件数に合わせて「1 item」「2 items」を選んだり、「1st」「2nd」「3rd」「11th」のような順番の接尾辞を付けたりできます。Reactのコンポーネントにする方法と、小数を表示 ...

Shift_JIS で保存されたテキストファイルを、React で文字化けさせずに表示します。file.text() で化ける理由、TextDecoder に shift_jis を渡す読み方、選び直せる部品の作り方、①や〜がどう読ま ...

border-radius に corner-shape: bevel を足すと角が斜めに切れ、scoop や notch ではへこみます。角ごとの指定、値札やチケットの形、枠線と影が形に沿うこと、clip-path との違いも確かめ ...

数字を打つと「二千二十六」や「二〇二六」に変わる入力欄を React で作りました。万・億・兆・京で区切る変換の書き方、Intl.NumberFormat でできることとできないこと、BigInt で20けたまで正しく扱う方法、全角の ...

2つの文章の似ている度合いを、編集距離と、2文字ずつ比べるダイス係数の2つの方法で0〜100%にして表示するコンポーネントを React で作りました。語順を入れ替えたときに2つの値が分かれる例や、長い文章で計算にかかる時間も確かめて ...

入力した文章を Intl.Segmenter で単語に分け、単語ごとの回数を数えて多い順に表にするコンポーネントを React で作りました。日本語で助詞が上位に並ぶときの除き方、英字の大文字・全角のそろえ方、活用した語が別の単語に分 ...

親要素に :has() と :nth-child() を組み合わせると、子の数に応じて列数などのレイアウトを CSS だけで切り替えられます。hidden の項目や項目の中の要素まで数えてしまう落とし穴、sibling-count() ...

Unix時間を打てば日時に、日時を選べばUnix時間に変わる入力欄を React で作りました。datetime-local の値をブラウザのタイムゾーンで読む方法、valueAsNumber の落とし穴、秒とミリ秒の取り違え、夏時間 ...

img に object-view-box: xywh(x y 幅 高さ) を付けると、画像のその範囲だけが表示され、img の大きさも範囲に合わせて決まります。書き方、object-fit との組み合わせ、拡大やアニメーションを C ...