Astro Islandsの 内部実装を 「日本で一番わかりやすく」 ざっくり解説！

Transcript

1. Astro Islandsの 内部実装を 「日本で一番わかりやすく」 ざっくり解説！ Version 1.0 March, 2026
2. ちなみに「世界で一番わかりやすい」のは Navigating Islands of Interactivity Reuben Tier — React Summit 2025 今日は「日本で一番」をやります
3. ケンジ Bluesky : jp-knj GitHub : jp-knj
4. ウェブの普遍的な パターンの話
5. ウェブは昔からずっと
 似たような構造を繰り返している
 PHP サーバーがHTML生成 Astro Component Server Component ビルド時にHTML生成 サーバーで実行 + + + jQuery Plugin Client Component Island
6. だいたい、
 クライアントとサーバサイドの境界を コンポーネント単位で決めれる みたいな話 でも、前提が違ったりする
7. Nuxt Astro 前提がSPAで、引き算としてのアプローチ → 前提がMPAで、足し算としてのアプローチ →
8. Astro 構成として Astro Component Client Island Server Island
9. Client Islandは この足し算の中で
 何が起きているのか？
10. ビルドタイムでコンパイラが
 .astroファイルの中でIslandを見つける client:* なし client:* あり 静的HTML JS ゼロ Island として抽出 STEP 01 Props シリアライズ STEP 02 コード分割 STEP 03 <astro-island>
11. Propsのシリアライズ Server JavaScript オブジェクト Browser HTML属性の文字列 { } count: 1, date: new Date(...), items: new Set([1,2]), tags: new Map([...]) props=' {"count": [0, 1], "date": [2, "2025-..."], "items": [4, [[0,1], [0,2]]], "tags": [5, [...]] }' → devalue by Rich Harris（Svelte作者）
12. Viteによるコード分割 index.html 静的HTML Page.astro <Header /> → Counter.BxK3q.js コンポーネント本体 Search.Dm2r8.js コンポーネント本体 <Counter client:visible /> <Search client:idle /> <Footer /> client.Fj7nP.js レンダラー共有
13. <astro-island> でラッピング <body> <header>My Site</header> <astro-island component-url="/_astro/Counter.BxK3q.js" renderer-url="/_astro/client.Fj7nP.js" props='{"count":[0,1]}' client="visible"> <div>0</div> </astro-island> <footer>© 2025</footer> </body>
14. Astro Islandは Web Components class AstroIsland extends HTMLElement customElements.define('astro-island', AstroIsland) Astro Island はなぜ、Web Components なのか？
15. ちょうどいい仕組みだから Astroが使うのは Custom Elements API だけ Web Components Custom Elements Shadow DOM HTML Templates connectedCallback ブラウザが勝手に呼んでくれる → hydration の起点
16. Astro Islandの内部 connectedCallback() this.getAttribute('client') "load" 即座に実行 "idle" "visible" "media" matchMedia IdleCallback request Intersection Observer 条件を満たしたら import(renderer-url) fetch renderer → hydrate import(component-url) fetch component
17. だいたい
 "ブラウザが持っている力" Astroのランタイムは本当に短い。
18. HTMLはそのままで十分強い Polymer → Astro
19. Astroは HTMLをそのまま活かして、 JSを足すタイミングだけを Web Componentsで制御する。
20. おしまい