フロントエンドの鬼門ごとに用意した稽古場の目次です。 公開済みのものから順に触ってみてください。
難易度は 初段(入口) → 二段(標準) → 三段(応用) の順で上がります。
ブラウザが1フレームをどう描くかを、実DOMを操作しながら体験する。Layout / Paint / Composite の差を触って理解する。
Timer / Listener / Detached DOM / Closure の 4 種類のリークを意図的に再現し、performance.memory の階段状の増加を観察する稽古場。
親の state 更新がコンポーネントツリーをどう伝播するかを可視化し、memo / 参照安定性 / Context / 派生 state の罠を手元で検出する稽古場。
microtask / macrotask / rAF / rIC の実行順序を予想 → 実測で検証する稽古場。
z-index 9999 が効かない現象を、新スタッキング文脈の生成条件トグルで歩いて掴む稽古場。
Request Memo / Data / Full Route / Router の 4 層キャッシュを一気通貫で光らせる稽古場。