一定の時間押し続けたときだけ実行するボタンを、ライブラリを使わずに React で作りました。押し始めにタイマーを始め、離したとき、ボタンの外へずらしたとき、スクロールで取り消されたときに止めます。キーボードの自動リピートで何度も実行 ...

Intl.ListFormatを使うと、配列を「りんご、みかん、ぶどう」や「Apple, Orange, and Grape」のように、言語に合った区切りで並べられます。Reactでの使い回し方、JSXを並べる方法、0件のときの結果を ...

ブラウザの getDisplayMedia() で画面を共有してもらい、MediaRecorder で録画して、ダウンロードのリンクを出す部品を React で作りました。録画の形式の選び方、ブラウザの「共有を停止」で止められたときの ...

ブラウザの EyeDropper API を使い、画面の好きな場所の色をスポイトで取る部品を React で作りました。開けるのはクリックの直後だけであること、取り消し方、値が rgba() で返る場合、使えないブラウザで代わりに色の ...

打ったローマ字をその場でひらがなに変える入力欄を、ライブラリを使わずに React で作りました。「ん」と「っ」の決め方、打ちかけの文字の残し方、途中に打ったときにカーソルが末尾へ飛ぶ問題の直し方を確かめています。

入力した文章を1文ずつに分けて文字数を数え、決めた文字数を超える文だけに色を付ける部品を React で作りました。Intl.Segmenter の文の区切りがかぎかっこで思わぬ位置になること、自分で区切るときの決め方、長い文章での速 ...

選んだ画像に文字を重ねて、そのまま PNG で保存する仕組みを React で作りました。canvas に文字を描く設定、縁取りの描き方、長い文の折り返し、Webフォントを読み込み終わってから描く理由を、検証環境で確かめています。

見出しとセルを入力欄に入れると、その場で Markdown の表ができる React のコンポーネントを作りました。列の寄せ方、行と列の追加と削除、セルの中の | の書き方、コピーのボタンまで、4つの Markdown の実装と Ch ...

選んだファイルが本当に PNG や JPEG なのかを、React でファイルの先頭の数バイトを読んで調べます。拡張子から決まる file.type との違い、PNG・JPEG・GIF・WebP・BMP・AVIF の見分け方、先頭だけ ...

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