サイトのメインの色を、利用者がラジオボタンで選べるようにする React のコードです。色は CSS 変数1つにまとめて localStorage に保存し、再読み込みのときに前の色が一瞬出ないよう、head の小さなスクリプトで戻し ...

ブラウザの Notifications API で、パソコンの画面の端に通知を出す React のコードです。許可の求め方と状態の持ち方、通知をクリックしたときにタブへ戻す方法、タブを見ていないときだけ出す方法を、Chromium の ...

打った数字に合わせて「090-1234-5678」のようにハイフンを入れる、React の電話番号の入力欄です。途中を書き直すとカーソルが末尾へ飛ぶ問題と、ハイフンを Backspace で消せない問題の直し方を確かめました。 ...

高さの違うカードを、列の中ですき間なく並べる表示を、ライブラリを使わずに React で作りました。画像入りのカードの一覧を、メイソンリーと呼ばれる並べ方で見せたいときに使えます。カードをいちばん短い列の下へ置いていく計算と、Resi ...

Reactで表のセルをクリックすると入力欄に変わり、Enter で保存、Escape で取り消せるようにしました。変換を確定する Enter で保存しない書き方、編集後にフォーカスをセルへ戻す方法、間違った値のときに編集を続けさせる方 ...

一時停止と再開ができるカウントダウンタイマーを、React と TypeScript で作りました。残り時間は終わる時刻との差から出すので、タイマーの呼び出しが遅れても表示がずれたままになりません。秒の切り上げ方なども Chromiu ...

投稿の日時を「3分前」「昨日」のように出すコンポーネントを TypeScript で作りました。言葉は Intl.RelativeTimeFormat に任せ、単位の選び方、「昨日」の数え方、表示の自動更新は Chromium で確か ...

一覧の画像を押すと、画面いっぱいに大きく表示するライトボックスを、ライブラリを使わずに React と dialog 要素で作りました。画面に収める CSS、矢印キーでの送り、前の画像を残さない key の使い方、先読み、閉じたあとの ...

月ごとのカレンダーを、ライブラリを使わずに React と TypeScript で作りました。日付を6行×7列に並べる計算、月をまたぐときの Date の扱い、今日と選んだ日の伝え方、矢印キーで日を移る動きを、Chromium で確 ...

検索欄やボタンを1つずつ明るく残し、下か上に説明のカードを出す使い方ガイドを、ライブラリなしの TypeScript で作りました。アプリを初めて開いた人へのオンボーディングや、あとから見返せる操作のチュートリアルに使えます。部品の位 ...