Astro Islands Architectureの仕組みと活用法

Islands Architectureとは

Islands Architecture（アイランズアーキテクチャ）は、Webページを「静的なHTML」の海の中に「インタラクティブなアイランド（島）」が点在するものとして捉える設計パターンです。 2019年にKatie Sylor-Millerが提唱し、Jason Millerが「Islands Architecture」として体系化しました。

従来のSPA（Single Page Application）では、ページ全体がJavaScriptで制御されます。 一方、Islands Architectureではページの大部分は静的HTMLとして配信され、 インタラクティブ性が必要な部分のみがJavaScriptで水和（hydrate）されます。

AstroでのIslands実装

Astroでは、.astroファイルがデフォルトで静的HTMLとしてレンダリングされます。 JavaScriptが必要なコンポーネントには、クライアントディレクティブを指定してIslandにします。

クライアントディレクティブの種類

実装例

例えば、このブログではクイズコンポーネントにclient:loadを、チャートコンポーネントにclient:visibleを使用しています：

---
import Quiz from '../components/quiz/Quiz.tsx';
import Chart from '../components/visual/Chart.tsx';
---

<!-- クイズ: 即座に操作可能にする -->
<Quiz client:load questions={[...]} />

<!-- チャート: スクロールして見える時に読み込む -->
<Chart client:visible type="bar" data={[...]} />

パフォーマンス上の利点

Islands Architectureの最大の利点は、初期JavaScriptバンドルサイズの大幅削減です。 SPAでは数百KBのJSを送信することが一般的ですが、 Astroのアプローチでは静的ページのJS量はほぼゼロになります。

これにより以下のCore Web Vitalsが改善されます：

• LCP（Largest Contentful Paint）: HTMLが即座に表示されるため高速
• FID（First Input Delay）: メインスレッドがJSの実行でブロックされない
• CLS（Cumulative Layout Shift）: サーバーサイドで完全にレンダリング済み

いつIslandにするべきか

すべてをIslandにする必要はありません。以下の判断基準を参考にしてください：

Islandにすべきもの

• ユーザー入力を受け取る要素: フォーム、クイズ、コメント入力欄など、ユーザーの操作に対してリアルタイムにフィードバックが必要な要素
• 動的データの表示: APIから取得したデータを表示するチャート、リアルタイムダッシュボード、動的に更新されるフィードなど
• 状態管理が必要な要素: タブ切り替え、アコーディオン、モーダルダイアログ、検索フィルターなど、内部的なstateを持つUIパーツ

Islandにすべきでないもの

• テキストコンテンツ: 記事本文、見出し、段落はHTMLで十分
• 画像・メディア: <img>タグやAstroの<Image />コンポーネントで対応
• ナビゲーション: ほとんどのナビゲーションはCSSだけで実装可能（ハンバーガーメニューも:targetや:has()で対応できるケースが多い）
• データ表示用テーブル: ソートやフィルターが不要なら静的HTMLテーブルで十分

判断に迷ったときの基準

基本原則は「静的にできるものは静的に」です。 迷ったら以下の問いに答えてみてください：

• そのコンポーネントはJavaScriptなしで同じ見た目を実現できるか？ → できるなら静的コンポーネントにする
• ユーザーの操作に応じて表示が変わる必要があるか？ → 変わるならIslandにする
• ページロード後に外部データを取得する必要があるか？ → 必要ならIslandにする

また、Island化する場合はクライアントディレクティブの選択も重要です。 ファーストビューに含まれない要素にはclient:visibleを使い、 即座に操作可能にする必要がある要素にのみclient:loadを使うことで、 初期ロードのパフォーマンスを最大限に最適化できます。