Astroにちょっと触れて、ちょっと知る。 - アドグローブブログ

こんにちは、株式会社アドグローブソリューション事業部の青山です。

普段Vueなどのフレームワークを使ってウェブ開発を行っていますが、最近注目を集めている新しいフレームワーク「Astro」に興味を持ち、軽く触っていました。端的にいうとAstroは、シンプルさと高速性に特化した静的サイトジェネレーターです。今回は、Astroがどのように静的コンテンツ表示に特化しているのか、他のフレームワークとの速度比較、そして実際にコンテンツコレクションを使ってMarkdownコンテンツを表示する方法について詳しくご紹介します。

Astroの概要と特徴
他のフレームワークとの速度比較
コンテンツコレクションを使ってMarkdownコンテンツを表示する方法
調べてわかったこと
まとめ
参照

Astroの概要と特徴

Astroは、静的サイトジェネレーターとして設計されたモダンなフロントエンドフレームワークです。主にコンテンツ駆動型のウェブサイトに最適化されており、以下のような特徴があります。

高速なパフォーマンス：Astroは、不要なJavaScriptを排除し、静的HTMLを生成することで、ページの読み込み速度を大幅に向上させます。
シンプルな開発体験：コンポーネントベースのアーキテクチャを採用しており、ReactやVue、Svelteなどのフレームワークとシームレスに統合できます。
柔軟なツール：Astroは、JavaScript、TypeScript、JSX、Vue、Svelteなど、好みの言語でコンポーネントを記述できます。
SEOに強い：静的サイトは検索エンジンにクロールされやすく、SEO効果が高いです。

他のフレームワークとの速度比較

Astroは、他のフレームワークと比較しても非常に高速です。以下に、Astro、Next.js、Nuxt.jsのパフォーマンス比較を示します：

フレームワーク	Time to Interactive (TTI)	Total Blocking Time (TBT)	Largest Contentful Paint (LCP)
Astro	0.3秒	0秒	0.4秒
Next.js	1.7秒	180ms	1.7秒
Nuxt.js	1.1秒	100ms	1.1秒

Astroは、最小限のJavaScriptを送信し、部分的なハイドレーション（partial hydration）を使用することで、非常に高速なパフォーマンスを実現しています。これに対し、Next.jsはフルページのハイドレーションを行うため、やや遅くなりますが、より動的な機能を提供します。Nuxt.jsもサーバーサイドレンダリング（SSR）を活用して高速なパフォーマンスを実現していますが、Astroの静的HTML生成には及びません。

AstroとNext.js, AstroとNuxt.jsを比較した記事がありますのでお時間あれば目を通してみてください。 Astro vs NextJS: A Comprehensive Comparison

Astro vs Nuxt: Detailed Comparison for Developers

コンテンツコレクションを使ってMarkdownコンテンツを表示する方法

Astroでは、コンテンツコレクションを使ってMarkdownコンテンツを簡単に表示することができます。ここからは、コンテンツコレクションを使ってMarkdownコンテンツを表示する例をコードを使って説明していきます。コードに触れる前にAstroプロジェクトを作成しておきましょう。

npm create astro@latest

1. コンテンツコレクションの設定

まず、src/contentフォルダにconfig.tsファイルを作成し、コレクションのスキーマを定義します。

import { z, defineCollection } from 'astro:content';

const blogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
    tags: z.array(z.string()),
    description: z.string(),
  }),
});

export const collections = {
  blog: blogCollection,
};

2. Markdownファイルの作成

次に、src/content/blogフォルダを作成し、その中にpost-1.mdとしてMarkdownファイルを配置します。

---
title: "Astroにブログ投稿"
date: 2024-06-12
tags: ["Astro", "adglobe", "アドグローブ"]
description: "Astroを使った初めてのブログ投稿。"
---

# ここはh1です

## ここはh2です

### ここはh3です

- リスト項目1
- リスト項目2
  - ネストしたリスト項目

[ADGLOBE](https://adglobe.co.jp/ja/)

ここにコンテンツを書いていきます。

3. 動的ルーティングの設定

src/pages/blog/[slug].astroファイルを作成し、動的ルーティングを設定します。

---
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
  const blogEntries = await getCollection('blog');
  return blogEntries.map(entry => ({
    params: { slug: entry.slug },
    props: { entry },
  }));
}

const { entry } = Astro.props;
const { Content } = await entry.render();
---

<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{entry.data.title}</title>
  </head>
  <body>
    <h1>{entry.data.title}</h1>
    <p>{entry.data.description}</p>
    <Content />
  </body>
</html>

4. インデックスページの作成

最後に、src/pages/index.astroファイルを作成し、ブログの一覧ページを表示します。

---
// src/pages/index.astro
import { getCollection } from 'astro:content';

const blogEntries = await getCollection('blog');
---

<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ブログ一覧</title>
  </head>
  <body>
    <h1>ブログ一覧</h1>
    <ul>
      {blogEntries.map(entry => (
        <li>
          <a href={`/blog/${entry.slug}`}>{entry.data.title}</a>
        </li>
      ))}
    </ul>
  </body>
</html>

ここでローカルを立ち上げてみましょう。

npm run dev

画像のようにブログ一覧とpost-1.mdで作ったブログページが閲覧できると思います。

調べてわかったこと

Astroは、静的コンテンツ表示に特化したフレームワークとして、非常に高速でシンプルな開発体験を提供します。以下に、Astroのメリットとデメリットをまとめます。

メリット： - 高速なパフォーマンス - シンプルな開発体験 - SEOに強い - ReactやVue, Svelteなど各JSフレームワークを混在可能

デメリット： 1. 動的な機能が必要な場合には制約がある：Astroは静的サイトジェネレーターとして設計されているため、リアルタイムのデータ更新やユーザーインタラクションが多いアプリケーションには向いていません。これにより、例えばチャットアプリやダッシュボードのような動的な機能を持つサイトの構築には不向きです。
2. 大規模なアプリケーションには不向きな場合がある：Astroは主に静的コンテンツを扱うため、大規模な業務系アプリケーションや複雑なビジネスロジックを持つアプリケーションには適していないことがあります。これにより、特定のユースケースでは他のフレームワークの方が適している場合があります。

活用方法： - ブログやドキュメントサイト、ポートフォリオサイトなど、コンテンツ駆動型のウェブサイトに最適

今後の期待： - データフェッチングやユーザーセッションのサポートなど、新機能の追加が期待される

また、今回はソースにMarkdownでコンテンツを持ちましたが、Astroは他のCMSサービスと連携してMarkdownを表示させることも可能です。例えば、microCMSやStrapiなどのヘッドレスCMSを使用することで、より柔軟なコンテンツ管理が可能になります。

まとめ

Astroは、特にコンテンツ駆動型のウェブサイトを構築する際に非常に有用なツールです。
おそらく、簡単なウェブサイト・LPなどはAstroが今後有力視されていくのではないかと思っています。
他にも、「アイランドアーキテクチャ」や「サーバーファースト」の考えなどAstroの特徴はありますが今回はこのあたりにしておきます。
(詳しくはドキュメントを参照ください)
まだまだ新しいフレームワークですので今後も進化を続けるAstroに注目していきたいと思います。

以上、Astroの紹介とその活用方法についてご説明しました。この記事が、皆さんのウェブ開発に役立つことを願っています。
最後までお読みいただきありがとうございました。

参照

astro.build

アドグローブでは、さまざまなポジションで一緒に働く仲間を募集しています！
詳細については下記からご確認ください。みなさまからのご応募お待ちしております。

採用情報