「小・中・大」のボタンでページ全体の文字の大きさを切り替える React のコードです。html の font-size を % で変え、ほかの文字は rem で指定します。ボタンは aria-pressed で押されている状態を示し ...

サイト内検索の欄に localStorage で検索履歴を付け、前回までの検索語を新しい順に候補として出す方法です。候補を押す前に一覧が閉じる問題、消えたボタンからフォーカスが外れる問題、2つのタブで履歴を上書きし合う問題を、Chro ...

操作がないまま一定時間たつと自動でログアウトする画面に、残り時間を出す警告のダイアログと「ログインを続ける」ボタンを付けます。期限と現在時刻の差で状態を決めるフックを作り、警告中の操作や複数のタブでの動きを検証環境で確かめました。

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

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

お問い合わせフォームなどの入力をlocalStorageに自動保存し、再読み込みやタブを閉じたあとも下書きを戻す方法です。読み込みはuseStateの初期化関数、書き出しはuseEffectで行い、壊れた値や容量不足でも止まらない書き ...