textarea の文字の一部だけに色を付けるには、同じ文字を色付きで描いた div を後ろに重ね、textarea の文字を透明にします。#タグと文字数の上限を超えた部分に色を付ける入力欄を React と TypeScript で ...

選んだ絵文字をテキストエリアのキャレットの位置に入れるピッカーを React と TypeScript で作りました。Ctrl+Z で戻せる入れ方、矢印キーでの選び方、最近使った絵文字の保存を Chromium で確かめました。

1/100秒まで表示し、ラップタイムを記録できるストップウォッチを React と TypeScript で作りました。ラップは押した時点の通算で持ち、表示の単位に切り捨ててから引くので、表に並んだラップを足すと通算と一致します。

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

ログインの2段階認証（多要素認証、MFA）で、SMS やメール、認証アプリから受け取った6桁の確認コードを1桁ずつの欄に入れる React のコンポーネントです。打つと次の欄へ進み、Backspace で戻り、貼り付けたコードは6つの ...

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

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

画面のカードなど、一部の要素だけを PNG にして保存させる方法です。スクリーンショットを撮って切り抜く手間を、ボタン1つで省きたいときに使えます。ref で要素を受け取り、html-to-image の toBlob で画像にします ...

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

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