Astroでesaのデータを扱うローダーを公開した

AstroのContent Layerを使ってesaのデータを簡単に扱えるローダー「astro-loader-esa」を公開しました。これはこのウェブサイトをGatsbyからAstroに置き換える際にesa.ioのデータをAstroで使うために作ったものです。

本記事ではAstroのContent Layerについて簡単な説明と、astro-loader-esaの使い方を紹介します。

AstroのContent Layer

AstroのContent Layerは、Astroのプロジェクトにおけるコンテンツ管理の仕組みです。マークダウンやCMSからのデータを統一的なインターフェースで扱えるため、開発者はデータの出どころを意識せずにコンテンツを利用できます。 Astro v5以前までは、リポジトリに含まれるMarkdownなどのファイルを扱う仕組みでしたが、v5からはLoaderという概念が導入され、外部サービスのデータも扱えるようになりました。

Loaderを使わなくても、データを利用するだけであれば利用側のコンポーネントから読み込みができます。しかし、Loaderを使うと事前にすべてのデータを取得してくるので、APIリクエストが少なく済み、結果的にビルドも早くなります。

具体的な流れでいうと、src/content.config.tsで定義したデータがサーバー立ち上げ時点で読み込まれ、以降はgetCollectionやgetEntryを使ってデータにアクセスできます。

astro-loader-esaの使い方

インストール

astro-loader-esaはAstroでesaのデータを扱うためのローダーです。Astroのプロジェクト内でnpmなどのパッケージマネージャーでライブラリをインストールします。

npm install astro-loader-esa

esa.ioのアクセストークンとチーム名を準備

esa.ioのアクセストークンを取得します。利用したいteamNameも控えておきます。 今回はそれぞれ環境変数ESA_ACCESS_TOKEN, ESA_TEAM_NAMEとして定義しておきます。

ローダーの設定

ローダーを利用する処理はsrc/content.config.tsに記述します。

import { defineCollection } from "astro:content";
import { esaLoader } from "astro-loader-esa";

const esaPosts = defineCollection({
  loader: esaLoader({
    accessToken: getSecret("ESA_ACCESS_TOKEN"),
    teamName: getSecret("ESA_TEAM_NAME"),
    params: {
      q: "in:blog wip:false",
    },
  }),
});

export const collections = { esaPosts };

データの利用

ローダーを記述して、サーバーを立ち上げるとgetCollectionやgetEntryを使ってesaのデータを利用できます。

---
import { getCollection } from "astro:content";
const posts = getCollection("esaPosts");
---

{posts.map((post) => (
  <article>
    <h2>{post.data.number} {post.data.name}</h2>
    <p>{post.data.bodyMd}</p>
  </article>
))}

---
export const getStaticPaths: GetStaticPaths = async () => {
  const items = await getCollection("esaPosts");
  return items.map((item) => ({ params: { number: item.data.number } }));
};

const { number } = Astro.params;
const post = await getEntry("esaPosts", String(number));

const { Content } = await render(post);
---

<h1>{post.data.name}</h1>

<Content />

作ってみた感想

ContentLayerの仕組みはビルド時にHTMLが確定するブログのようなサイトとの相性がとても良く、Web APIが提供されているサービスの多くをCMSとして利用できる仕組みだと思います。

また、Loader自体の実装自体も簡単なので、欲しいものがないなら作ってみる選択肢を取りやすいのでAstro自体をより人に勧めやすくなりました。