ダウンロード中にプログレスバーで進み具合を見せたいときに使える方法です。fetch の本文を getReader() で少しずつ読み、受け取った量と Content-Length から進み具合を progress 要素に表示します。C ...

文章によく出る言葉を、回数が多いほど大きな文字で並べるワードクラウドを、ライブラリを使わずに React で作りました。回数から文字の大きさを決める計算、canvas で文字の幅を測ってうず巻きに沿って重ならないように置く方法、枠に入 ...

プロフィール画像の代わりに、頭文字のアバターを出したいときに使える方法です。画像のないユーザーに、名前の頭文字と背景色で丸いアイコンを出す React のコンポーネントを作りました。絵文字でも崩れない頭文字の取り出し方、名前から毎回同 ...

選んだ色にいちばん近い CSS の色の名前（royalblue など）を表示する React のコードです。色を Oklab に直して ΔEOK2 で距離を測ります。RGB の値のまま測る方法と比べると、4096色のうち37%で選ばれ ...

requestIdleCallbackを使うと、重い計算をブラウザの手が空いたときだけ少しずつ進められます。Reactのフックにまとめる書き方と、timeoutの付け方、二重に走らせない後片付けをChromiumで確かめました。

レシピを見ながら料理をするときのように、触らずに見続けるあいだ画面をスリープさせたくないときは、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で国の選択肢や言語の切り替えボタンに使う書き方と、名前のな ...