概要
先日バージョン2.0がリリースされ、連日話題となっているAstroについて簡単に解説します。
Astroとは？
Astroは、React、Preact、Svelte、Vueなどのフレームワークを使用して、高速なウェブサイトを構築するためのWebフレームワークです。
ブログやコーポレートサイト等のコンテンツを重視したWebサイトを生成することに特化しており、ビルド時に不要なJavascriptを排除することで高速かつ高パフォーマンスなWebサイトを生成することができます。
Astroの特徴
1. サーバーファースト
Astroはサーバーファーストの設計思想に基づいて構築されています。
可能な限りクライアントサイドのレンダリングを減らし、サーバーサイドでのレンダリングを行うことでページの表示が高速化されます。
このアプローチはNext.jsやNuxt、Remixなど昨今のモダンなフレームワークとは対照的となっており、どちらかというとLaravelやRuby on Railsなど従来のサーバーサイドフレームワークが行ってきたアプローチとなっています。
余談ですが、Denoの以下の記事のように、フロントエンドのトレンドは今後サーバーサイドレンダリング（SSR）に回帰していくというような主張が増えつつあるので今後のフロントエンドの動向にも注目ですね。
The Future (and the Past) of the Web is Server Side Rendering
2. コンテンツ重視
Astroは、コンテンツを重視した設計思想に基づいています。 既存のフレームワークの多くは複雑なWebアプリケーションを構築することに特化していますが、Astroはコンテンツのみにフォーカスするというトレードオフにより、Webサイトを作成することにおいて非常に高いパフォーマンスを記録しています。
また、上記に関する特徴的な機能として、Markdownファイルそのものをデフォルトの設定で１つのページとして扱いルーティングすることができます。
ブログのようなサイトであったり、企業のコーポレートサイトやドキュメントサイトを作成する際に、リッチエディタの設定や拡張などを追加することなく開発を進めることができるため、非常に便利です。
もちろんMDXも公式でサポートしており、ブログ記事などの静的なコンテンツに対しても、動的な要素を追加することができます。
3. マルチページアプリケーション（MPA）
MPAとは、複数のHTMLファイルから構成されるWebサイトのことで、AstroではページごとにHTMLファイルを生成することで実現しています。
SPAはJavaScriptで動的にコンテンツを制御し、全てのコンテンツを一度に読み込みますが、MPAはオンデマンドでページを読み込むため初期表示が早く、SEO対策にも適していることが特徴です。
MPAとSPAの比較についてはAstroの公式サイトが参考になると思うので、気になる方は目を通してみてください。
4. アイランドアーキテクチャ
Astroではアイランドアーキテクチャを採用しています。
アイランドアーキテクチャとは、インタラクティブなコンポーネントを組み合わせて構成する設計思想で、それぞれのコンポーネントは独立しているため、保守性や可読性が高いという特徴があります。
また、それぞれのコンポーネントは独立しJavascriptを個別にロードするため、コンポーネントごとに異なるUIフレームワークを使用することも可能です。
これにより複数のプロジェクトにある既存コンポーネントを、Astroで作成したWebサイトに対して簡単に流用することができます。
公式サイトでは、静的なHTMLを海として、その海に浮かぶ各コンポーネントを島として例えて説明されています。
テーマの紹介
Astroの公式サイトでは、BlogやPortfolioなどAstroで作成できる多くのカテゴリでサンプルが紹介されており、多くのテーマはGithub上でソースコードが公開されているため、これらをCloneしてカスタマイズしたり、実装を参考にして独自のサイトを作ることが可能です。
また、ショーケースとしてAstroで作られた様々なWebサイトが以下のページで紹介されており、多くの採用事例を確認することができます。
Astroのセットアップ
最後に、Astroを試したい方向けに簡単なセットアップ手順をまとめておきます。 より詳細な手順を知りたい方は公式サイトのチュートリアルを参考にしてみてください。
Create your first Astro project
1. Volta
brew install volta
volta setup
volta install node2. pnpm
volta install pnpm3. Astro
pnpm create astro@latestまとめ
いかがだったでしょうか？
今回は最近話題のAstroで出てくる用語や特徴についてまとめてみました。
AstroはReactやNext.jsで作るにはちょっとオーバースペックだと思えるようなWebサイトを作成する際にはぴったりの技術だと思っています！
公式ドキュメントやコミュニティも活発に更新されており、早い段階で日本語のドキュメントが用意されていたのも嬉しいポイントですね。
Astroではフロントエンドが抱える既存の問題定義やそれを解決するためのアーキテクチャの採用など、既存技術と比較改善した設計思想が多いため今後もキャッチアップを続けていこうと思っています。
投稿者プロフィール
