Astro

アストロ

Astro を分かりやすく

Astroは、JavaScript、HTML、CSSを使ってウェブサイトを構築するためのフレームワークです。ただし、それがただのフレームワークと違うところは、生成されるページが完全に静的（つまりサーバーサイドでレンダリングされ、ブラウザでは最小限のJavaScriptが実行される）であるという点です。これにより、ページの読み込み速度が速く、SEOに優れたウェブサイトを作ることが可能になります。

Astroの何がすごいって、フロントエンドのフレームワーク（React、Vue.js、Svelteなど）を選ばないところですよね。これらを組み合わせて一つのプロジェクト内で使うこともできます。フレームワークの良いところ取りって、とても魅力的じゃないですか？

では、ここで例え話を使ってみましょう。

Astroを考えるとき、レストランのビュッフェを思い浮かべてみてください。ビュッフェでは、様々な種類の料理が用意されていますよね。和食が食べたければ和食があり、洋食が食べたければ洋食があります。あなたが好きなものを好きなだけ選んで、自分だけのプレートを作れます。

同じように、Astroはあなたが選べるビュッフェのようなものです。Reactが好きならReactを使い、Vueが好きならVueを使います。一つのプロジェクト内で、これらを好きなように組み合わせることができます。

さらに、ビュッフェでは、料理は既に調理されていて、すぐに食べられる状態になっていますよね。これはAstroが全てのページをサーバーサイドでレンダリングするという考え方に似ています。つまり、ブラウザに送られるページは既に完成されていて、最速で表示されます。

どうでしょうか？Astroはまさに次世代のフレームワークで、静的サイトジェネレーション（SSG）と複数のフロントエンドフレームワークの組み合わせを可能にします。

それではまとめます。Astroは2021年に公開された新しいフロントエンドツールで、静的サイトジェネレーター（SSG）として機能します。しかし、Astroは他のSSGとは一線を画しており、それはJavaScript、TypeScript、React、Vue、Svelteなど複数のフレームワークまたはライブラリとシームレスに統合することが可能であるという点です。これにより開発者は好きなフレームワークを選ぶ自由を持ちつつ、同時に静的サイトのパフォーマンスと最適化の利点を享受することができます。

Astro 2.0

2023 年 1 月 24 日に、Astro 2.0には以下の新機能が追加され、既存の機能も改善されています。

Astro 2.0 | Astro

1. 大規模サイトに対応するContent Collections

Astro 2.0では、大量のコンテンツファイルを効率的に管理するために、「Content Collections」が導入されました。これにより、コンテンツとなるMarkdownファイルやMDXファイルを「blog」や「newsletter」「products」など、コンテンツのジャンルや種類ごとにディレクトリに分けて管理できるようになりました。

さらに、各ディレクトリにはTypeScript形式のスキーマ定義とチェックが可能で、これによりタイトルや日付などのフォーマットをチェックすることができます。これは「Type-Safe Markdown」を実現しています。

2. Hybrid Rendering

Astro 2.0では、静的サイト生成（SSG）とサーバサイドレンダリング（SSR）のどちらを選択することができましたが、Astro 2.0ではこの両者の混在が「Hybrid Rendering」として可能になりました。これにより、特定のページやエンドポイントに対する設定を行うことで、その部分はプリレンダリングによる静的生成を行うことが可能になります。

3. その他の改善とアップデート

エラー表示画面が改善され、より詳細な情報が表示されるようになりました。また、Hot Module Reloading（HMR）周りを中心に性能や安定性を継続的に改善していくことが説明されています。Astro内部で利用しているビルドツールが最新のVite 4.0にアップデートされました。さらに、今後のロードマップがよりオープンで分かりやすくなっています。

以下は、Astro 2.0の新機能である「Content Collections」を用いたサンプルコードです。

まず、新しいContent Collectionを作成するために、プロジェクトのルートディレクトリにsrc/collections/postsディレクトリを作成します。そして、そのディレクトリ内にindex.astroとpost.astroという2つのファイルを作成します。

index.astroの内容：

---
import PostPreview from '../components/PostPreview.astro';
import { collection } from 'astro/collections';
---

<ol>
  {collection.data.map(post => (
    <li>
      <PostPreview post={post} />
    </li>
  ))}
</ol>

post.astroの内容：

---
import Markdown from 'astro/components/Markdown.astro';
import { source } from 'astro/collections';
---

<article>
  <h1>{source.data.title}</h1>
  <p>{source.data.date}</p>
  <Markdown content={source.content} />
</article>

上記の例では、Astroのcollections機能を使って投稿のリストを作成し、各投稿の詳細を表示します。index.astroでは、すべての投稿をリストアップし、それぞれをPostPreviewコンポーネントに渡しています。そして、post.astroでは、各投稿のタイトルと日付、そしてMarkdown形式のコンテンツを表示します。

この例は単純化されていますが、実際のプロジェクトではより詳細なスキーマチェックや、各投稿のデータをさらに複雑な方法で利用することができます。

Astro の歴史的変遷

Astroは2021年にFred K. Schottとそのチームによって開発されました。Schottは以前、Pikaプロジェクト（現在はSkypackとして知られる）を開発した経歴を持つ人物であり、JavaScriptエコシステムの新しい可能性を追求することに情熱を注いでいます。Astroの開発はその情熱の一環として始まり、現在ではその革新的なアプローチと柔軟性から広く受け入れられ、フロントエンド開発者コミュニティで急速に人気を博しています。

Astro と Jamstack の関係

AstroはJamstackアーキテクチャの一部として機能することができます。JamstackはJavaScript、API、Markupの頭文字をとった言葉で、静的サイト生成とクライアントサイドのJavaScriptによる動的な部分を組み合わせるアーキテクチャを指します。Astroはこのアーキテクチャに完全に適合し、各部分を最適化する役割を果たします。特にJavaScriptの部分では、Astroはページ内のJavaScriptの使用を最小限に抑えることで、パフォーマンスの改善とエネルギー効率の向上に寄与します。

Astro を使うメリット

フレームワークの自由な選択

Astroでは、React、Vue、Svelteなどの複数の人気フレームワークを使用することができます。これは、一つのプロジェクト内で異なるフレームワークを混在させることが可能であるという意味でもあります。これにより、各フレームワークの強みを活かした開発が可能になります。

パフォーマンスの最適化

Astroは必要最低限のJavaScriptのみをクライアントに送信します。これにより、ウェブサイトのパフォーマンスが大幅に向上し、ロード時間が短縮されます。また、Astroは静的サイトジェネレーターであるため、事前にページを生成しておくことで、サーバーへのリクエストを減らすことができます。

開発効率の向上

Astroは開発者の生産性を向上させるための機能を備えています。たとえば、ホットモジュールリプレースメント(HMR)のような現代の開発ツールのサポート、マークダウンでのコンテンツの書き方のサポートなどがあります。これにより、開発者はよりスムーズに、そして効率的に作業を進めることができます。

Astro を実装

Astroを使った開発の一例として、以下にTypeScriptを用いたシンプルなコンポーネントの作成方法を示します。

// src/components/HelloAstro.tsx
import { AstroProps } from 'astro/types';

type Props = {
  name: string;
} & AstroProps;

export const HelloAstro = ({ name }: Props) => {
  return (
    <div>
      <h1>Hello, {name}! Welcome to Astro.</h1>
    </div>
  );
};

この例では、HelloAstroというコンポーネントを作成しています。AstroPropsを含むPropsを定義し、その中にnameというプロパティを設定しています。そして、このコンポーネントは入力されたnameを使って挨拶を表示します。

Astroの素晴らしい点は、このように簡単にコンポーネントを作成できるだけでなく、これらのコンポーネントを最適化された静的HTMLとして出力し、それに必要なJavaScriptだけを追加することです。これにより、パフォーマンスが向上し、ユーザーエクスペリエンスが向上します

Next.js を学ぶ一覧へ