Astro.js入門 – 静的サイト構築の新たな選択肢 - アルアカ

Astro.jsは、モダンなWebアプリケーションのために設計された次世代の静的サイトジェネレーターです。従来のフロントエンドフレームワークとは異なり、Astroは「部分的な水和（Partial Hydration）」というユニークなアプローチを採用しており、必要な部分だけをクライアントサイドで動的に読み込みます。これにより、パフォーマンスが大幅に向上し、より速いWebサイトを構築することができます。本記事では、Astro.jsの基本的な概念とセットアップ方法を解説し、初めてのAstroプロジェクトを構築するステップをご紹介します。

[目次を開く]

1. Astro.jsとは？ 1.1 Partial Hydration 1.2 マルチフレームワークサポート 1.3 静的生成 2. 環境設定 2.1 Node.jsのインストール 2.2 新しいAstroプロジェクトの作成 2.3 Astroプロジェクトの実行 3. Astroの基本構造 3.1 .astroファイル 3.2 コンポーネントのインポート 4. AstroでReactやVueを使う方法 4.1 Reactコンポーネントの利用 src/components/MyButton.jsx src/pages/index.astro 5. Astroの応用機能 5.1 動的なデータフェッチ 5.2 SEOとパフォーマンス最適化 5. まとめ Astroのポイント

1. Astro.jsとは？

Astro.jsは、JavaScriptやTypeScriptをベースにした静的サイトジェネレーターですが、React、Vue、Svelte、Solidなどの他のフレームワークと一緒に使用できる点が大きな特徴です。これにより、既存のプロジェクトやスキルを再利用しながら、パフォーマンスを最大限に引き出すことができます。Astroの主要な特徴をいくつか見てみましょう。

1.1 Partial Hydration

通常のフレームワークはクライアントサイドで全てのJavaScriptを読み込みますが、Astroでは、必要な部分だけをクライアントサイドで水和（Hydration）する「Partial Hydration」というコンセプトを採用しています。これにより、クライアントに送られるJavaScriptの量が最小限に抑えられ、パフォーマンスが向上します。

1.2 マルチフレームワークサポート

Astroは、React、Vue、Svelte、Solidなど、さまざまなフレームワークのコンポーネントを一つのプロジェクトで使用することが可能です。これにより、チームやプロジェクトのニーズに合わせて柔軟に選択できるというメリットがあります。

1.3 静的生成

Astroは「静的サイトジェネレーター」としての機能が強力で、ページを事前にビルドして静的ファイルとして提供します。これにより、非常に高速なパフォーマンスが実現されます。

2. 環境設定

では、実際にAstro.jsをインストールし、プロジェクトをセットアップする方法を見てみましょう。

2.1 Node.jsのインストール

まず、Astroを使うためにはNode.jsが必要です。まだインストールしていない場合は、Node.jsの公式サイトから最新版をインストールしてください。

2.2 新しいAstroプロジェクトの作成

Node.jsがインストールされたら、次はAstroプロジェクトを作成します。ターミナルで以下のコマンドを実行してください。

npm create astro@latest

このコマンドを実行すると、プロジェクト名やテンプレートの選択など、いくつかの質問が表示されます。自分のプロジェクトに合った設定を選びましょう。

2.3 Astroプロジェクトの実行

プロジェクトのセットアップが完了したら、プロジェクトディレクトリに移動し、開発サーバーを起動します。

cd プロジェクト名
npm install
npm run dev

このコマンドを実行すると、ローカルホストで開発用のサーバーが立ち上がり、ブラウザでページを確認できます。

3. Astroの基本構造

Astroプロジェクトは、独自のファイル構造を持っています。主なディレクトリとファイルについて簡単に解説します。

my-astro-project/
├── src/
│   ├── pages/        # ページコンテンツ
│   │   ├── index.astro
│   │   ├── about.astro
│   ├── components/   # コンポーネント
│   │   ├── Header.astro
│   │   ├── Footer.astro
│   ├── layouts/      # レイアウトファイル
├── public/           # 静的ファイル（画像、フォントなど）
├── package.json      # 依存関係

src/pages/：このディレクトリには、各ページのコンテンツが含まれます。各ファイルはURLに対応し、.astroファイルや.mdファイルで記述されます。
src/components/：ここには、再利用可能なUIコンポーネントを配置します。ReactやVue、Svelteなどのコンポーネントもここに含まれます。
public/：静的ファイル（画像やフォントなど）はこのディレクトリに配置されます。これらはそのまま公開されるため、ビルド時に最適化されません。

3.1 `.astro`ファイル

Astroでは、.astroという独自のファイル形式が使用されます。これはHTMLに似たテンプレート言語で、ReactやVueのようにコンポーネントを組み合わせてUIを構築することができます。

以下は簡単な.astroファイルの例です。

※pages/welcome.astoroを作成するとlocalhost:4321/welcomeにルーティングされます。

---
const name = "Astro";
---

<html>
  <head>
    <meta charset="utf-8" />
    <title>{name}</title>
  </head>
  <body>
    <h1>ようこそ、{name}へ！</h1>
  </body>
</html>

このコードでは、テンプレートの上部に変数やロジックを定義し、その後のHTMLテンプレート内で{}を使って変数を参照しています。

3.2 コンポーネントのインポート

Astroでは、ReactやVueなど他のフレームワークで作成したコンポーネントを簡単にインポートして使用することができます。例えば、Reactコンポーネントをインポートする場合、次のように記述します。

---
import MyReactComponent from '../components/MyReactComponent.jsx';
---

<MyReactComponent />

このように、Astroでは複数のフレームワークのコンポーネントを同時に使用できるため、非常に柔軟な開発が可能です。

4. AstroでReactやVueを使う方法

Astroは、ネイティブの.astroコンポーネントだけでなく、React、Vue、Svelteなどのフレームワークと組み合わせて使うことができます。

4.1 Reactコンポーネントの利用

まず、Reactを追加します。

npm install @astrojs/react react react-dom

次に、astro.config.mjsにプラグインを追加。

import react from "@astrojs/react";

export default {
  integrations: [react()],
};

Reactコンポーネントを作成し、Astroページに組み込めばOKです。

`src/components/MyButton.jsx`

export default function MyButton() {
  return <button onClick={() => alert("Hello Astro!")}>Click me</button>;
}

`src/pages/index.astro`

---
import MyButton from "../components/MyButton.jsx";
---

<MyButton client:load />

このclient:loadは、クライアントサイドでコンポーネントを動的に読み込むための指示です。

5. Astroの応用機能

Astroは単に静的なWebサイトを作成するだけでなく、動的なコンテンツや複雑な機能も簡単に実装することができます。以下はその一部です。

5.1 動的なデータフェッチ

Astroでは、getStaticPathsやgetStaticPropsを使って、ビルド時に外部APIからデータを取得することができます。例えば、ブログの記事一覧を外部のAPIから取得して表示する場合、次のように記述します。

---
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  return { props: { posts } };
}
---

<ul>
  {posts.map(post => (
    <li>{post.title}</li>
  ))}
</ul>

5.2 SEOとパフォーマンス最適化

Astroは、SEO（検索エンジン最適化）やパフォーマンスに関しても優れています。静的なHTMLとして生成されるため、Googleなどの検索エンジンによるインデックスもスムーズです。また、ページごとにJavaScriptを最小限に抑える設計のため、ページのロード時間も短く、ユーザーエクスペリエンスが向上します。

5. まとめ

Astro.jsは、静的サイトのパフォーマンスを最大化しながら、動的なコンポーネントも組み込める柔軟性を持ったフレームワークです。特に、ブログやドキュメントサイト、マーケティングサイトの構築に最適であり、初心者でも簡単に使い始められます。

Astroのポイント

✅ 静的サイトに最適で超高速

✅ 必要な場合のみJavaScriptをロード

✅ React、Vue、Svelteとの統合が可能

✅ MarkdownやMDXをネイティブサポート

今後、Astroを使ったプロジェクトが増えていくことが予想されます。この機会に、Astro.jsを試してみてはいかがでしょうか？

アルアカ - Arcadia Academia