画像を小さく canvas に描き、getImageData で読んだピクセルの色を数えて、いちばん多い色を代表色にする React のコードです。平均色との違い、色をまとめる段階の数、透明な部分、別のオリジンの画像で起きるエラーも確 ...

6桁の確認コードを、1桁ずつ分かれた6つの欄で入力する React のコンポーネントです。打つと次の欄へ進み、Backspace で前へ戻ります。貼り付けたコードや一度に入った6桁は、maxLength を付けずに受け取って6つの欄に ...

2秒ごとにサーバーへ問い合わせる画面で、別のタブを見ているあいだは問い合わせを止め、戻った瞬間に1回問い合わせ直すフックを作りました。setInterval のままの書き方や、TanStack Query の設定による違いも、Chro ...

未読が3件あるとき、タブに「(3) 猫のメモ」と出し、ファビコンに件数を描く方法です。React 19 の title と canvas で作り、100件以上を「99+」にする場合、件数が続けて変わる場合、アイコンが別オリジンにある場 ...

画面のカードなど、一部の要素だけを PNG にして保存させる方法です。ref で要素を受け取り、html-to-image の toBlob で画像にします。画像の大きさ、透明になる背景、ボタンの除き方、別オリジンの画像で失敗すること ...

テキストエリアで「@」を打つと名前の候補を出し、選ぶと「@名前 」を入れる入力欄を React と TypeScript で作りました。キャレットの前の文字の調べ方、選んだあとのキャレットの戻し方、一覧を「@」の位置に出す方法を Ch ...

Reactの画面を、ヘッダーやボタンを消した印刷用のレイアウトで印刷する方法です。@media print と @page でA4の紙に合わせます。入力欄を文字にするやり方、背景色、ページ番号、改ページの扱いも書きます。画面の一部だけ ...

選んだ複数のファイルを、ブラウザの中で1つの ZIP にまとめて保存させる方法です。JSZip でフォルダ分けして ZIP を作り、進み具合を表示します。既定では圧縮されないこと、同じ名前が上書きされること、取得の失敗への備えも確かめ ...

PDF.js で読み込んだ PDF を、React で1ページずつ canvas に描き、前後のボタンで送る方法です。速く送るときは前の描画を取り消し、高解像度の画面では倍の画素で描き、フォントを埋め込んでいない日本語の PDF には ...

何もない所からドラッグして四角い枠を描き、枠にかかった項目をまとめて選ぶ仕組みを、ライブラリを使わずに React で作りました。項目の位置は押したときに一度だけ測ります。Shift での追加、クリックとの区別、文字が選択されてしまう ...