ブラウザで動くメモ帳やエディターに、保存先とファイル名を選べる「名前を付けて保存」と、同じファイルに書き戻す「上書き保存」を付けます。File System Access API の showSaveFilePicker を Reac ...

スマホで height: 100vh のファーストビューや全画面メニューを開くと、アドレスバーの分だけ下が隠れることがあります。100svh・100dvh・100lvh の使い分けと、古いブラウザ向けの書き方をまとめました。

音楽やポッドキャストを流すWebアプリで、別のタブやアプリを開いたまま、通知領域やメディアキーから再生・一時停止・次の曲を操作できるようにします。曲名を渡して操作を受け取るフックを React で作り、Linux の Chromium ...

git diff –color-moved を付けると、場所を移しただけの行は赤と緑とは別の色になり、書き換えた行だけが赤と緑で残ります。リファクタリングで関数を動かしたコミットをコードレビューするときに、本当に変わった行 ...

動画を見ながら別のタブや資料を開けるように、動画だけを画面の隅の小さな窓（ピクチャーインピクチャー）で再生するボタンを作りました。小さい窓の×で閉じたときに表示がずれない状態の持ち方と、動画のコンポーネントが消えても窓だけ残る問題の直 ...

React の useState で setCount を呼んだ直後に console.log で値を見ると、更新前の値が出ます。デバッグ中に「state が反映されない」と迷ったときのために、その理由と、新しい値をログで確かめる方法 ...

CSS の z-index を大きくしても要素が前に出ない理由と、原因になっている祖先の見つけ方、isolation: isolate で重なりの範囲を区切る使い方を、Chromium で確かめました。区切った範囲からメニューが出られ ...

ログインフォームの「パスワードを表示」ボタンのように、送信しないボタンを押すとページが再読み込みされる理由です。HTMLではtypeのないbuttonが送信ボタンになり、Reactはtypeを補わないためです。type=” ...

ボタンに commandfor と command を書くと、JavaScript なしで dialog をモーダルで開いて閉じられます。選んだボタンの値の受け取り方、背景のクリックで閉じる closedby、form の中で開かない ...

アコーディオンや「続きを読む」の開閉で、height を 0 から auto へ動かすには interpolate-size: allow-keywords を書きます。書く場所、効かない組み合わせ、Firefox や Safari ...

マウスを乗せると説明が出るツールチップを、JavaScript なしで作る方法です。ボタンやリンクに interestfor 属性を付けると、乗せたときやフォーカスしたときにポップオーバーが開きます。待ち時間の変え方と popover ...

React の state の配列に push したりオブジェクトに代入したりすると、ToDo リストへの追加などで画面が変わりません。理由と直し方に加え、書き換えを Strict Mode・readonly の型・ESLint で見 ...

CSS の scroll-target-group を目次のリストに書くと、いま読んでいる節のリンクを :target-current で目立たせられます。強調が切り替わる位置や、入れ子の目次での注意点を Chromium で確かめま ...

Reactのフォームで、入力欄に1文字打つとフォーカスが外れ、続けて入力できないときの原因と直し方です。コンポーネントの中で別のコンポーネントを定義すると、描画のたびに入力欄が作り直されます。外に出してpropsで渡す直し方と、ESL ...

CSS の column-rule と row-rule で、グリッドやフレックスのアイテムの間（gap）に区切り線を引けます。線が配置に影響しないこと、結合したセルや空いたセルでの線の出方、線の端を短くする方法を Chromium ...

記事一覧のカードのように角を丸くした枠に画像を入れると、画像の角が四角くはみ出します。親に overflow: hidden か clip を付けると角の丸みで切れます。2つの値で結果が変わる場面を、Chromium で確かめました。 ...

CSS の will-change は、これから動く要素をブラウザーに前もって伝えるヒントです。付けるとよい場面と、付けすぎたときのメモリーの増え方や、z-index・position: fixed への副作用を Chromium で ...

入力欄の文字カーソル（キャレット）の色は caret-color で、点滅は caret-animation で変えられます。点滅の止め方、@keyframes で動かす書き方、動きを減らす設定への対応を Chromium で確かめま ...

開発中のサーバーを保存のたびに自動で動かし直したいとき、Bun には –watch と –hot があります。–watch はプログラムを最初から実行し直し、–hot はプロセスを残した ...

白い文字に mix-blend-mode: difference を指定すると、文字の色が後ろの色を反転した色になり、白の上では黒、黒の上では白で表示されます。固定ヘッダーでの指定の場所、効かなくなる条件、灰色の背景で読めなくなる点を ...

保存ボタンを押していないのに、画面を開いただけで保存の処理やログが動くのは、onClick={handleSave()} と書いているためです。JSX の {} の中は描画のたびにその場で実行されます。変換後のコードと呼ばれた回数で確 ...

英文に hyphens: auto を付け、lang 属性で英語だと伝えると、ブラウザーがハイフネーションの辞書をもとに単語を分け、行末にハイフンを入れて折り返します。日本語のページでの書き方、先頭が大文字の単語、ソフトハイフン、UR ...

Lighthouse で「Links do not have a discernible name」と出たときの直し方です。ロゴ画像やSNS・RSSのアイコンだけのリンクに alt や aria-label などで名前を付け、点数が8 ...

clip-path に shape() を書くと、波やアーチのような曲線を含む形に要素を切り抜けます。curve・smooth・arc の書き方、% と calc() で要素の大きさに合わせる方法、path() との違い、アニメーショ ...

ページ上部の大きな画像に loading=”lazy”（画像の遅延読み込み）を付けると、Core Web Vitals の LCP が遅れます。検証したページでは、外すだけで Lighthouse の LCP ...

TanStack Router でルートを定義し、ルーターを Register に登録すると、Link の to・params・search の間違いが tsc で止まります。わざと6種類の間違いを書いたときのエラーと、ブラウザで U ...

E2E テストを一から手で書かずに、フォームへの入力やボタンのクリックを実際に操作して記録したい。Playwright の codegen で操作からテストのコードを作り、結果の確認（アサーション）を足して実行するまでを、実際に生成さ ...

Intl.Locale の getWeekInfo() で地域ごとの週の始まりと週末の曜日を調べ、React の月カレンダーの並びと色分けに使いました。曜日の番号の直し方と、古いブラウザへの備えも確かめています。

テストが通らないコードを、うっかりリモートに push しないようにするには、Git の pre-push フックを使います。push の前にテストを自動で実行し、失敗したら push を止めるフックの書き方と、作業ツリーではなく p ...

lottie-react 3 で Lottie の JSON を React に表示する方法です。import と URL からの読み込み、大きさの決め方、ボタンでの再生操作、prefers-reduced-motion のときの動き ...