レシピを見ながら料理をするときのように、触らずに見続けるあいだ画面をスリープさせたくないときは、Wake Lock APIが使えます。Reactでオン・オフを切り替えるフックの書き方と、タブを切り替えると解除される動き、StrictM ...

見出しから、見出しの id や記事の URL に使うスラッグを作る関数と、React の目次・入力欄での使い方です。日本語の見出しの扱い、濁点が消える落とし穴、同じ見出しの番号付け、URL の # で開いたときにスクロールしない問題を ...

React の state を structuredClone で丸ごとコピーしてから書き換える方法と、その注意点をまとめました。関数やクラスのインスタンスを含む state で起きることと、memo した子がすべて再描画されることを ...

2枚の画像を1画素ずつ比べ、違う画素をピンクで塗った画像を React で表示しました。差を見逃さないためのしきい値の決め方と、JPEG と比べると変えていない部分まで違う画素になることも、画素を数えて確かめています。

Intl.DisplayNamesを使うと、「JP」「US」のような国のコードや「en-US」のような言語のコードを、「日本」「アメリカ英語」のような名前にできます。Reactで国の選択肢や言語の切り替えボタンに使う書き方と、名前のな ...

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

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

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

数値の入力欄の上下ボタンは、::-webkit-inner-spin-button に -webkit-appearance: none を書くと消えます。個数や金額のような数値を入れる欄で、スピンボタンとも呼ばれるこの上下ボタンを見 ...

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