「サーバー」と「サーバ」のような表記ゆれを、文章の中から見つけて一覧にし、ボタンで1つの書き方にそろえるコンポーネントを React で作りました。カタカナ語は比べるための形にそろえて探し、それ以外は辞書で探します。見逃す例と、誤って ...

ひらがなとカタカナを互いに変換する関数と、ボタンで変換する入力欄、欄を離れたときにカタカナにそろえるフリガナの欄を React で作りました。「ヷ」や「ゝ」の扱い、半角カナ、wanakana との違い、ひらがなとカタカナを区別しない検 ...

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

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

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

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

親に position: relative、再生ボタンに position: absolute; inset: 0; margin: auto を付けて真ん中に重ねます。三角の位置の合わせ方と、video の上で hidden が効か ...

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

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

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