網羅性を強制する — union にケースを追加したときコンパイラに教えてもらう
assertNever、satisfies Record、パターンマッチライブラリという三つの層のうち何をいつ使うか、そして catch-all のデフォルト分岐が漏れを隠してしまう理由
Frontend カテゴリーの知識文書です。
assertNever、satisfies Record、パターンマッチライブラリという三つの層のうち何をいつ使うか、そして catch-all のデフォルト分岐が漏れを隠してしまう理由
Record が約束する totality、何も検査しない type predicate、実行タイミングが違う wrapper の ReturnType、sanitizer と勘違いされる excess property check のように、実装が守らないことを型が約束してしまうパターン
導出できる値は保存せず、ライブラリがすでに所有している union はコピーせず、それでも残る client 状態だけを union にする順序と、状態に action を入れてはいけない理由
同じコードがリポジトリの設定次第で通ったり落ちたりする理由と、型契約を作る前に実効 tsconfig とロックファイル解決のコンパイラバージョンを一度だけ固定しておく手順
許可値のリストを型と値の二か所に書く代わりに、値ひとつだけを正解の出どころにして型を計算する手法と、widening のせいでこの保護がエラーも出さずに消えてしまう落とし穴
const 宣言に型パラメータを付けられないという制約を回避し、ジェネリック関数の中で context を作ってコンポーネントたちにクロージャで掴ませるパターンと、レンダー中に呼ぶと静かに再マウントされる落とし穴
Dog が Animal の部分型のとき、Dog[] や (x: Dog) => void もその関係を受け継ぐのか、どちらの向きに受け継ぐのかを決めるルールと、strictFunctionTypes を有効にしてもメソッド短縮記法に穴が残る理由
マークダウン本文の画像にビルド時点で実ピクセル寸法を注入し、レイアウトシフトと固定比率クロップを同時になくす原理
ポリフィルを全ブラウザに入れず、機能が無いかを実際に検知して不足したブラウザにだけロードする手法 — 最新ブラウザのコストがほぼ 0 になる
一画面のインタラクションが複数同時に効かなくなったら、たいていは個別のバグではなく、クライアント JS が実行できずハイドレーションが丸ごと不発になった単一の根本原因である
旧ブラウザ対応は別々の二つの作業である — 新しい構文を古い構文に変えるトランスパイルと、存在しない API をコードで補うポリフィル。トランスパイラは構文だけを変え、ランタイム関数は作らない
即時反映のために staleTime を下げるとトラフィックが爆発する。staleTime は鮮度 SLA として保ち、書き込み後に invalidateQueries でその瞬間だけ refetch する理由と方法
セッションローディングが終わる前は保護 API を叩かず、authResolved とログイン状態を一緒に見るクエリ enabled パターン
UI は track/identify/reset だけを知り、裏側で GTM・PostHog など複数の分析シンクへイベントをファンアウトする薄い層
JSON-LD・FAQPage などの構造化データは、画面上に表示されるテキストと同じ事実だけを載せるべきというルールと、単一ソースのパターン
workspace:* で内部パッケージをリンクし、公開時に実際のバージョンへ置換するモノレポのパブリッシュ機構
frontmatter related・wikilink インデックスを BFS で N ホップ以内の近傍だけ集め、force-graph で可視化するパターン
localePrefix always 環境では内部リンクは next-intl の Link だけで移動し、ロケールを維持する必要がある
同じ slug の文書を .{locale}.md ファイル名で区別し、ローダー・DB・検索・SEO id を type:slug:locale に揃えるパターン
無限スクロール・window virtualizer で bootstrap・React・N-frame reassert が競合しないよう、単一 corrective scroll に統合するパターン
Cursor・Lovable・Granola など2026年に話題のスタートアップ10社のランディングページを Playwright で実測キャプチャ・分析して導いた Web デザイントレンド
GSAP なしで scroll-timeline・sticky stage・純粋 CSS keyframes によって製品ストーリーをスクロールに同期させる zero-JS ナラティブパターン
単一のmodal shell内でdocumentIdスタックをpush/popし、gallery→peek→relatedをつなぐナビゲーションパターン
ブロック文書グラフでpageブロック・push/peekナビゲータ・breadcrumbで子文書を探索するパターン
リッチテキストeditorとread-only viewerのentryを分離し、peek・embed経路からPM/dndバンドルを取り除くパターン
SSRでpeek + after()を使い、TTFBを増やさずにblur placeholderをwarmするstale-while-populateパターン
内蔵の画像最適化が無効な環境で Route Handler によりリサイズ・webp 変換・CDN+LRU キャッシュを構成するパターン
不変ツリーに対する正規化read-modelとid別useSyncExternalStore購読で、ネストUIの再レンダーをO(depth)からO(1)に減らすCQRS projectionパターン
ハイブリッドブロックエディタで複数ブロックにまたがるnative選択に対し、delete·mark·insertを無状態派生とhostパッチで処理するパターン
頻繁に変わる大きな状態を広いContext valueに入れるとmemoが無力化される理由と、狭いProvider分離パターン
catch-all vendor に固定 name と chunks:all を使うと dynamic import が無力化され、すべてのエントリが巨大な共有 vendor を受け取る理由と対処
ローカルのoptimistic applyとinverse patchでpendingキューをロールバック・再適用し、リモート変更と収束するクライアント同期パターン
Radix Popover PortalがCSS scope ancestorを外れるとき、インラインレンダーでエディタスコープのスタイルを保つ方法
文書の意味はhostが所有し、リッチテキストエンジンはフォーカスされたブロックだけに一時的にマウントされるguestとして置くエディタアーキテクチャ
HTML をチャンク単位で flush する Streaming SSR が FCP・LCP・SI・CLS に与える影響と LCP チャンク配置の基準
編集を do/inverse のペアで記録し、undo・redo の 2 つのスタックで状態を往復する履歴モデル
useSyncExternalStore は Object.is でスナップショットを比較するため、内容が変わっても同じ値だと再レンダーを永遠に取りこぼす
横型カルーセルで表示されていないスライド画像のfetchを防ぎ、LCP候補のみをeager読み込みするパターン
Next.js App Routerでschema.org JSON-LDをサーバーのpage.tsxに注入するパターンとXSS sanitize
サーバーで React Query などのキャッシュを埋めて client auth→API waterfall を減らすパターンと query key の整合
長い一覧でビューポート付近の行だけをDOMにレンダーし、メモリ・レイアウトコストを一定に保つ手法
@layer·@scope·light-dark()とカスタムプロパティで優先順位・範囲・モードを分離し、トークンテーマを一貫させる方法
サーバーレンダー HTML とクライアントの初回レンダーが食い違う原因と、クライアント専用の状態を安全に適用する戦略
debounce、AbortController、最新リクエストidでout-of-order応答を防御する非同期UIパターン
frontmatter という単一ソースから sitemap・RSS・OG・JSON-LD をビルド時に決定的に生成する原則
LCPが測定される仕組みと改善方法
ブラウザのリソース優先度と fetchpriority の活用