【あいらんどあーきてくちゃ】
アイランドアーキテクチャ とは？
💡 静的HTMLの海に、動的な「島」が浮かぶ新しいWeb設計
📌 このページのポイント
- ページの大部分は静的HTMLで配信し、インタラクティブな部分だけJavaScriptを読み込む
- 不要なJavaScriptを送らないため、ページの表示速度が大幅に向上する
- Astro・Deno Fresh・Markoなどのフレームワークがこのアーキテクチャを採用している
ひよこ アイランドアーキテクチャって、なんで「島」なの？
ペンギン先生 静的HTMLのページを「海」だとすると、ボタンやフォームみたいにJavaScriptが必要な部分が「島」のように点在しているイメージだよ。島以外はJSを一切使わないんだ
ひよこ SPAとはどう違うの？
ペンギン先生 SPAはページ全体をJavaScriptで描画するから、最初に大量のJSを読み込む必要があるよね。アイランドアーキテクチャは静的HTMLをまず表示して、必要な島だけ後からJSを動かすから、初回表示がものすごく速いんだ
ひよこ どんなサイトに向いているの？
ペンギン先生 ブログ・ドキュメント・コーポレートサイトなど、コンテンツ中心でインタラクティブな要素が少ないサイトにぴったりだよ。逆にSNSや管理画面のように画面全体が動的なサイトには向かないね
ひよこ Astroがこれを使ってるんだよね？
まとめ：ざっくりこれだけ覚えればOK！
「アイランドアーキテクチャ」って出てきたら「静的ページの中で動的な部分だけをJS化する設計」と思えればだいたいOK！
📖 おまけ：英語の意味
「Islands Architecture」 ＝ 島のアーキテクチャ
💬 静的HTMLの「海」の中にインタラクティブな「島」が点在するイメージから、Katie Sylor-Millerが命名したんだよ