道Frontend Dojoフロントエンド道場
01稽古場02ロードマップ03道場について
Zenn ↗X ↗
§ 00 — Colophon

Frontend Dojo

フロントエンド道場

フロントエンドの鬼門を、読むのではなく触って理解する。
日本語のインタラクティブラボ。

§ LAB

稽古場

  • 稽古場一覧
  • ロードマップ
  • 用語集
  • 道場について
§ LEGAL

規約

  • プライバシーポリシー
  • 利用規約
  • お問い合わせ
§ LINK

外部

  • Zenn ↗
  • X ↗

© 2026 フロントエンド道場 · Personal Lab

修行ロードマップ

稽古場は順次追加していきます。 「こんな稽古場が欲しい」という意見はお問い合わせフォームへ。

難易度は 初段(入口) → 二段(標準) → 三段(応用) の順で上がります。

公開中

いま触れる稽古場

  • Lab 1: レンダリング
    初段

    ブラウザが1フレームをどう描くかを、実DOMを操作しながら体験する。Layout / Paint / Composite の差を触って理解する。

  • Lab 2: メモリリーク
    二段

    Timer / Listener / Detached DOM / Closure の 4 種類のリークを意図的に再現し、performance.memory の階段状の増加を観察する稽古場。

  • Lab 3: 再レンダリング
    二段

    親の state 更新がコンポーネントツリーをどう伝播するかを可視化し、memo / 参照安定性 / Context / 派生 state の罠を手元で検出する稽古場。

近日公開

順次追加していきます

  • Lab 4: イベントループ
    二段

    microtask / macrotask / rAF / rIC の実行順序を予想 → 実測で検証する稽古場。

  • Lab 5: スタッキング文脈
    初段

    z-index 9999 が効かない現象を、新スタッキング文脈の生成条件トグルで歩いて掴む稽古場。

  • Lab 6: Next.js キャッシュ
    三段

    Request Memo / Data / Full Route / Router の 4 層キャッシュを一気通貫で光らせる稽古場。

検討中の鬼門

Lab 化を構想している鬼門。順次、稽古場として整えていきます。

ブラウザランタイム

  • Stale Closure の罠
    二段

    useEffect 依存配列が古い値を見てしまう仕組みを分解する。

  • Layout Thrashing の原理
    二段

    read / write の順序崩れが起きる瞬間を LoAF で捉える。

React・Next.js

  • Next.js キャッシュ四重奏
    三段

    Request Memo / Data / Full Route / Router を一気通貫で光らせる。

  • Hydration の探偵
    三段

    SSR の影と CSR の実体が、どこでズレたのかを diff で追う。

  • RSC 境界 / 'use client'
    三段

    サーバ・クライアントの境界とシリアライズの制約を触って掴む。

CSS

  • スタッキングコンテキストの森
    初段

    z-index 9999 が効かない理由を、文脈の木を歩いて掴む。

  • Flexbox・Grid の intrinsic sizing
    二段

    min-content / max-content の解決順を実測で追う。

  • カスケードと @layer
    二段

    現代的な詳細度の優先順位と @layer の効き所を可視化する。

パフォーマンス

  • INP の解剖室
    三段

    1 クリックを input delay / processing / presentation に切る。

ネットワーク

  • HTTP キャッシュの読み解き
    二段

    Cache-Control / ETag / stale-while-revalidate の相互作用を触る。

  • Cookie 属性の実習
    二段

    SameSite / Secure / HttpOnly の挙動差分を別オリジンで試す。

セキュリティ

  • XSS の入口
    二段

    DOM-based と framework bypass の現実を、隔離 iframe で見る。

アクセシビリティ

  • フォーカス管理
    二段

    Modal / Skip link / aria-live の実挙動をキーボードで試す。