Notes
技術メモ・音楽活動記
AppConfig は実験基盤ではない — フィーチャーフラグ移行で調査・設計・実装がそれぞれ書き換えたもの
A/B テスト基盤の終了に伴い AWS AppConfig へ移行した記録。比較表では「主要機能をすべて満たす」だったが、AppConfig は設定配信サービスでユーザー単位の評価を持たない。split が範囲分割ではないと分かるまでの、調査 → 設計 → 実装で前提が入れ替わっていく過程を残す。
表示モード切替のフリーズは、トグルではなく同じコミットの重い更新だった
ヘッダーの表示モード切替を押すと画面全体が数秒固まる。犯人はトグルではなく、確定した isAltMode を購読していた一覧 TOP が同じコミットで 11 枠を一括アンマウントし、再生中の video を破棄していたこと。pending / deferred / debounce の 3 つの時間軸に分けて、クリックフレームから重い仕事を追い出した記録。
検索 Hook のレースコンディション — AbortController が効かない 3 つのパターンと、ガードが要る場所
インクリメンタルサーチのカスタム Hook で、古いリクエストの応答が新しい結果を上書きする問題を AbortController で潰す。ただし signal を渡しただけでは効かない。abort の呼び忘れ、finally の暴発、controller の再生成、エラー分岐でのガード漏れという典型的な壊れ方を順に見ていく。
hover 遅延フックで useRef を選んだ理由 — 描画しない値を state に入れない
リストの hover を 300ms 遅らせて切り替えるフックを書いた。中で持つ timer ID と hover 中 index を useState ではなく useRef にした判断を、再レンダーのコストと stale closure の観点から整理する。「値を覚えたい」と「画面を更新したい」は別の要求だという話。
@next/mdx でポートフォリオに MDX ブログを作った — 型安全な frontmatter と Turbopack のハマりどころ
前回書いた Intercepting Routes の記事、その置き場所として Notes 機能を作った。next-mdx-remote を使わず @next/mdx ネイティブで組み、frontmatter を zod で守り、Turbopack のプラグイン制約を越えるまでの実装記録。今まさに読んでいるこのページの中身の話です。
Next.js App Router の Intercepting Routes で「URL共有できるモーダル」を作る
EP一覧からクリックするとモーダル、URL直アクセスならフルページ。Parallel Routes と Intercepting Routes でこのUXを実装し、(.)/(..) のハマりどころや dev/prod でのテスト分離まで含めて解説します。