以前にmicroCMSで作成した記事をPHPで出力する方法を記事にしましたが、今回はフレームワークはAstro.jsを使用して、microCMSの記事を出力する方法です。
microCMS JavaScript SDKのインストール
まずはnpmでmicroCMS JavaScript SDKをインストールしていきます。
プロジェクトルートで、
npm install microcms-js-sdkこれでインストール完了。
CDNもサポートされてるようです。
<script src="https://unpkg.com/microcms-js-sdk@latest/dist/umd/microcms-js-sdk.js"></script>
API呼び出しの設定
API呼び出すための設定をしていきます。
環境変数の設定
.envを開き下記を追加します。
.envがない場合は作成してください。
MICROCMS_SERVICE_DOMAIN=サービス名
MICROCMS_API_KEY=APIキーMICROCMS_SERVICE_DOMAINには、サービス名を入れます。
https://◯◯◯◯.microcms.io/
これの「◯◯◯◯」の部分です。
MICROCMS_API_KEYには、APIキーを入れます。
microcms.tsファイルの作成
TypeScriptを使用しています。
src/library/microcms.ts
こちらを作成し、下記のように記述します。
import { createClient, MicroCMSQueries } from "microcms-js-sdk";
const client = createClient({
serviceDomain: import.meta.env.MICROCMS_SERVICE_DOMAIN,
apiKey:import. meta.env.MICROCMS_API_KEY,
});
export type News = {
id: string;
createdAt: string;
updatedAt: string;
publishedAt: string;
revisedAt: string;
title: string;
content: string;
};
export type NewsResponse = {
totalCount: number;
offset: number;
limit: number;
contents: News[];
};
export const getNews = async (queries?: MicroCMSQueries) => {
return await client.get<NewsResponse>({ endpoint: "エンドポイント", queries });
};エンドポイントとなっている箇所は変更してください。
また、今回はNews記事を取得したいので、型の定義等Newsになっていますが、こちらは任意で変更してください。
export type News = {
id: string;
createdAt: string;
updatedAt: string;
publishedAt: string;
revisedAt: string;
title: string;
content: string;
};この部分で、型の定義をしていますが、特に取得する必要のないものは削除してしまっても問題ないと思います。
もし後々必要なものが出てきた場合、追加し忘れると型エラーが発生するので全部書いておいた方が無難かもですね。
出力したいページまたはコンポーネント側の設定
出力したいページまたはコンポーネントファイルを開き、コンポーネントスクリプトを追加します。
---
// microCMS呼び出し
import { getNews } from "../library/microcms";
const response = await getNews({ fields: ["publishedAt", "title"] });
---ただ、publishedAtの日付データは、ISO 8601形式のUTCで返ってきてしまうのでフォーマットが必要です。
フォーマットの関数を作って追加しておきます。
---
// microCMS呼び出し
import { getNews } from "../library/microcms";
const response = await getNews({ fields: ["publishedAt", "title"] });
// 日付データのフォーマット
function formatDate(dateString: string): string {
const date = new Date(dateString);
const year = date.getFullYear();
const month = (date.getMonth() +1).toString().padStart(2, "0");
const day = date.getDate().toString().padStart(2, "0");
return `${year}.${month}.${day}`;
}
---
そして最後にHTML側に出力するコードを書いていきます。
<ul>
{
response.contents.map((content: any) => (
<li>
<div class="date">{formatDate(content.publishedAt)}</div>
<div class="title">{content.title}</div>
</li>
))
}
</ul>これで記事の一覧が表示されるようになります。
参考にしたサイト
microCMS公式ブログ
