contentEditable の div と B ボタンで、選んだ文字を太字にする入力欄を作る方法です。React に中身を描き直させない書き方、ボタンを押してもフォーカスを入力欄に残す方法、ボタンの押された状態の出し方、書式つきの ...

画像の上の番号付きの点を押すと、その場所の説明が出るコンポーネントを React と TypeScript で作りました。点の位置を % で持つ方法、Esc キーと外側のクリックで閉じる作り、狭い画面で説明をはみ出させない幅の決め方を ...

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

左右の一覧でチェックした項目をボタンで移す部品を、React で作る書き方です。左右の配列は state に持たず、右にある項目の id だけを持つと、何度移しても元の並び順が崩れません。絞り込みで隠れた項目を移さない工夫と、移すボタ ...

React の Suspense の fallback に、読み込み後と同じ形のスケルトンを渡す方法です。帯の高さを文字の行に合わせて下の段落を動かさない作り、文章の行数の決め方、読み上げと動きを減らす設定への配慮を、Chromium ...

項目からさらにメニューが開く、入れ子のドロップダウンメニューを React で作りました。開いている枝を id の配列1つで持ち、同じ描画関数を再帰で呼びます。斜めにポインターを動かしたときの誤作動の防ぎ方と、矢印キーでの操作も確かめ ...

React Routerのデータモードで、ルートのhandleに項目名を書き、useMatchesで集めてパンくずリストを作りました。loaderのデータを項目名に使う方法、indexルートとの関係、移動中とエラーのときの表示、区切り ...

文字を1文字ずつ表示するタイプライター風の表示を、React のフックとコンポーネントで作りました。絵文字を途中で割らない分け方、句読点の後の間、下の内容を押し下げない場所の取り方、文章が変わったときのやり直し、読み上げへの配慮を確か ...

Ctrl+K で開き、言葉を打って絞り込み、↑↓と Enter で実行するコマンドパレットを、React と dialog 要素で作りました。ひらがなとカタカナを区別しない絞り込みと、実行と閉じる順番によるフォーカスの違いを確かめてい ...

0 から目標の値まで、数字を数え上げて表示するコンポーネントを作りました。経過時間から表示する値を計算するフック、数字の幅をそろえて横揺れを防ぐ CSS、画面に入ってから数え始める作り、途中で値が変わったときの動き、読み上げへの配慮を ...