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

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

ちなみに「世界で一番わかりやすい」のは Navigating Islands of Interactivity Reuben Tier — React Summit
2025 今日は「日本で一番」をやります

ケンジ Bluesky : jp-knj GitHub : jp-knj

ウェブの普遍的なパターンの話

ウェブは昔からずっと  似たような構造を繰り返している  PHP サーバーがHTML生成 Astro Component Server Component ビルド時にHTML生成サーバーで実行
+ + + jQuery Plugin Client Component Island

だいたい、  クライアントとサーバサイドの境界をコンポーネント単位で決めれるみたいな話でも、前提が違ったりする

Nuxt Astro 前提がSPAで、引き算としてのアプローチ → 前提がMPAで、足し算としてのアプローチ →

Astro 構成として Astro Component Client Island Server Island

Client Islandはこの足し算の中で  何が起きているのか？

ビルドタイムでコンパイラが  .astroファイルの中でIslandを見つける client:* なし client:* あり静的HTML JS ゼロ Island
として抽出 STEP 01 Props シリアライズ STEP 02 コード分割 STEP 03 <astro-island>

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作者）

Viteによるコード分割 index.html 静的HTML Page.astro <Header /> → Counter.BxK3q.js コンポーネント本体 Search.Dm2r8.js
コンポーネント本体 <Counter client:visible /> <Search client:idle /> <Footer /> client.Fj7nP.js レンダラー共有

<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>

Astro Islandは Web Components class AstroIsland extends HTMLElement customElements.define('astro-island', AstroIsland)
Astro Island はなぜ、Web Components なのか？

ちょうどいい仕組みだから Astroが使うのは Custom Elements API だけ Web Components Custom Elements
Shadow DOM HTML Templates connectedCallback ブラウザが勝手に呼んでくれる → hydration の起点

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

だいたい  "ブラウザが持っている力" Astroのランタイムは本当に短い。

HTMLはそのままで十分強い Polymer → Astro

Astroは HTMLをそのまま活かして、 JSを足すタイミングだけを Web Componentsで制御する。

おしまい

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

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

Wu Kenji

Other Decks in Technology

Featured

Transcript