【あいらんどあーきてくちゃ】

アイランドアーキテクチャとは？

最終更新: 2026年10月8日

💡 HTMLの海に、操作できる「島」を配置する

サーバー側で生成したHTMLを中心に、操作が必要なUIを独立した「島」として動かすWeb設計。ブラウザーで島ごとにJavaScriptを実行する方式を、Astroなどが採用している。

📌 このページのポイント

クライアントアイランドの模式図。青はHTMLとして届ける部分、橙・緑は独立して操作機能を付けるUI。HTMLの生成時期やページ用の追加スクリプトの有無は、別に決められる。

ひよこ

なぜ島と呼ぶの？

ペンギン先生

文章や画像をHTMLで表示するページの中に、操作できるUIが独立して浮かぶイメージだよ。たとえば画像カルーセルだけをJavaScriptで動かし、記事本文にはUI用の実行処理を付けないんだ。

ひよこ

HTML中心なら、全部を事前に作るの？

ペンギン先生

そうとは限らないよ。事前ビルドで作ることも、リクエストを受けてサーバーで作ることもある。島の設計と、いつHTMLを生成するかは別の話なんだ。

ひよこ

島は全部、あとから読み込むの？

ペンギン先生

読み込みの時期は選べるよ。Astroではclient:loadでページ読み込み時、client:visibleで画面に入ったときに動かす例がある。HTMLのUIへ操作機能を付けることをハイドレーションと呼ぶんだ。

ひよこ

SPAより必ず速いの？

ペンギン先生

不要なUI用のJavaScriptを減らせる可能性はあるけれど、島の数や大きさ、画像などにもよるよ。SPAにも用途があり、管理画面だから絶対に島を使えない、という決まりではないんだ。

ひよこ

島の外ではJavaScriptを使えないの？

ペンギン先生

ページ用のスクリプトを追加することはできるよ。島を独立させる設計と、ページ全体でJSを一切使わないことは別。Astroには、動的な内容をサーバーで別に生成するサーバーアイランドもあるんだ。

まとめ：ざっくりこれだけ覚えればOK！

「アイランドアーキテクチャ」って出てきたら「HTML中心のページで、操作部分を独立した島として動かす設計」と思えばだいたいOK！

📖 おまけ：英語の意味

「Islands Architecture」＝島のアーキテクチャ

💬 HTMLの海に独立したUIの島が浮かぶイメージだよ。Astroの公式資料では、Katie Sylor-Millerが2019年にcomponent islandという言葉を使い、Jason Millerが2020年に設計を文書化したと紹介されているんだ

参考資料