昨年に引き続き参加させて頂きました。今回は、AstroとmicroCMSで作成したWebサイトにページネーションを実装する内容について書いています。はじめにmicroCMSは日本製のヘッドレスCMSです。日本語の分かりやすい管理画面でコンテンツを管理して、APIベースで簡単にデータを扱うことができます。AstroはWebサイトを構築するためのフレームワークです。websites."とあるように、高速なWebサイトを構築することを目的としていて、完全な静的HTMLを生成することもできるといった特徴があります。Astroにはページネーションに必要な機能がビルトインでサポートされています。本記事ではこの機能を利用して、以下のような2種類のページネーションを実装しています。セットアップ今回使用したNode.jsと主なパッケージのバージョンは以下の通りです。v3.55.0作成したサンプルデータは下記リポジトリに置いています。最初にAstroプロジェクトの作成をします。雛形を生成するためのCLIが用意されているので、コマンドを実行して作成します。astro@latest実行するといくつか質問されますが、今回は下記のようにしました。devコマンドを実行すると、開発サーバーが立ち上がります。exposehttp://localhost:3000/にアクセスするとテンプレートで用意された初期画面が表示されます。この時点でのディレクトリ構成は以下のようになっています。astro.config.mjssrcディレクトリにプロジェクトのソースコードを格納します。インストール後にもいくつかのサンプルデータが格納されています。publicディレクトリはビルドプロセスで処理する必要のないファイルやアセットを格納します。astro.config.mjsはAstroの設定ファイルです。使用するインテグレーション、ビルドオプション、サーバーオプションなどを指定できます。!各ディレクトリの詳細は以下のドキュメントを参照してください。次にmicroCMSでコンテンツのデータを用意します。公式のマニュアルを参照して、アカウント登録からAPIとコンテンツの作成まで行います。https://document.microcms.io/manual/getting-started今回は以下のようなスキーマでAPIを作成し、サンプル用にいくつかデータを入稿しています。SDKのインストールフレームワークからmicroCMSのデータを扱うのに便利なSDK(microcms-js-sdk)が公式から提供されているのでインストールします。microcms-js-sdk環境変数の設定プロジェクトのルートディレクトリに.envファイルを作成し、microCMSのサービス名とAPIキーを環境変数として設定します。.envMICROCMS_SERVICE_DOMAIN=<サービス名>MICROCMS_API_KEY=<APIキー>!Astroの環境変数の詳細は以下のドキュメントを参照してください。Astroドキュメント以上で実装の準備が整いました。APIからデータを取得して表示ここから、microCMSで作成したAPIからデータを取得してページに表示してみます。microcms-js-sdkを使用してAPIからデータを取得するための関数を、以下のようなモジュールとして実装しました。});};型定義は作成したAPIのスキーマと合わせて、microcms-js-sdkから提供されているものを利用しています。createClient()でclientを作成してclient.get()でデータを取得します。引数のendpointにAPI名(ここでは"cats")を指定して、特定のAPIからデータを取得できる設計となっています。pagesディレクトリ内のindex.astroを書き換えて、APIから取得したデータを表示します。Astroコンポーネントは、上部の---で囲まれたスクリプト部分と、下部のテンプレート部分の2つに大きく分かれていて、スクリプト部分で定義された変数はテンプレート部分で{ブラケット}で括って使用することができます。!CSSはstyle要素で囲んた部分に書くことができ、スコープ化もされます。今回はスタイル部分の記述は省略しています。awaitが利用できます)。}として、とりあえず1000件までデータを取得し、テンプレート部分でリスト表示しています。Astroコンポーネントでは下記のようなJSXに似た記述をすることができます。(<li>...<li/>))}!AstroとJSXの違いについては以下のドキュメントを参照下さい。Astroドキュメントこれで、以下のようにmicroCMSのAPIからデータを取得してルートページにリストを表示することができました。ルーティングとページネーション前置きが長くなりましたが、ここから本題のページネーションの実装についてです。ルーティングAstroはファイルベースのルーティングを採用しています。src/pages/ディレクトリにAstroコンポーネント(.astro)やMarkdownファイル(.md)を配置すると自動でページ(URL)が生成されルーティングされる仕組みとなっています。動的にルーティングする場合には[ブラケット]記法を用いてファイルを作成し、getStaticPaths()関数の戻り値として生成するパスの配列を返します。今回は個別ページ用にsrc/pages/cats/[id].astroファイル([id]部分が動的なルーティングとなる)を作成して以下のように実装しました。</main></Layout>各ルーティングに対してAstro.paramsオブジェクトが利用できます。以下の部分で、Astro.paramsのidを引数にAPIからデータを取得しています。string);これでhttp://localhost:3000/cats/2022-12-01(2022-12-01はid)にアクセスすると以下のように個別ページが表示されるようになりました。!その他ルーティングに関しての詳細は以下のドキュメントを参照下さい。Astroドキュメントページネーション次に、一覧ページにページネーションを実装します。Astroにはビルトインでページネーションの機能がサポートされています。paginate()関数を使用することで、前ページ、次ページのURLや総ページ数などページネーション用のプロパティを生成することができます。分割するページのファイル名は、先程の動的ルーティングと同じように[ブラケット]で囲みます。今回はsrc/pages/cats/page/[page].astroファイルを作成しました。/cats/page/2といった分割されたページが生成される事となります。実装は以下のようにしました。}を渡して返すことで、1ページに3項目入るように分割されたページが生成されます。});};そして、各ページのデータはpageオブジェクトとして以下のようにして利用できます。Astro.props;この中から以下のプロパティを使用してリストデータとページネーションを表示しています。次のページのURL!その他のpageプロパティの詳細は以下のドキュメントを参照下さい。分割されたページを移動できるようになりました。ページ移動の機能追加ここまでの実装では、次ページと前ページへの移動しかできないため、最後にもう少し機能を追加してみます。要件は以下のようにしました。現在ページとその前後ページへのリンクを表示する最初のページと最後のページへのリンクは常に表示するそれ以外のページは「...」として隠す現在ページが先頭ページ以外の場合に「PREV」リンクを、最終ページ以外の場合に「NEXT」リンクを表示する分かりにくいですが、図示すると以下のようになります。UIフレームワークのインストールAstroは、インテグレーションをインストールすることでReact、Vue、SvelteなどのUIフレームワーク/ライブラリを使用することができます。今回の場合はAstroコンポーネントのみでも実装できますが、例としてSvelteを使用してみます。!インテグレーションとはAstroの機能を拡張する外部パッケージのことで、公式が提供しているもの、コミュニティが提供しているものがあり、自分で書くこともできるようです。詳細は以下のドキュメントを参照下さい。addコマンドを実行することでインストールから設定まで行ってくれます。svelte実行すると「設定ファイルの変更確認」と「インストールコマンドの実行確認」の2つ質問されるので両方yキーで続行します。これで以下のようにパッケージの追加と設定ファイルの変更まで完了し、プロジェクト内でSvelteが使えるようになります。componentsディレクトリを作成してsvelteコンポーネントを記述していきます。!Svelteの基本的な使い方は以下のドキュメントを参照下さい。Svelte実装は以下のようにしました。</ul></nav>先程作成したページネーション用のpageオブジェクトをpropsで受け取り、テンプレート部分では現在ページpage.currentPageとそれぞれの表示条件を比較して表示を出し分けています。page.url.prevとpage.url.nextは値がない場合はundefinedが返るので、そのまま分岐条件として利用しています。中身のコンポーネントの実装は以下のようにしました。PaginationPrevNext.sveltehttps://github.com/K-shigehito/astro-microcms-example/blob/main/src/components/UI/PaginationItem.sveltehttps://github.com/K-shigehito/astro-microcms-example/blob/main/src/components/UI/PaginationPrevNext.svelteこれを[page].astro内でインポートしてpageデータをpropsで渡して表示しています。buildを実行し、生成される/dist/index.htmlを確認するとスクリプトが読み込まれていないHTMLが生成されていることが確認できます。Islandsと呼ばれるAstroの重要な特徴かもしれません)。https://docs.astro.build/ja/concepts/islands/各ホスティングサービスへのデプロイ方法は以下ドキュメントにまとめられています。https://docs.astro.build/ja/guides/deploy/まとめmicroCMSを利用すると、コンテンツを誰でも操作しやすいUIで管理でき、実装側もとても扱いやすいAPIとなっています。Astroは、ページネーションのような機能をフレームワーク側がサポートしているのがとてもよいなと感じました。静的なWebサイトを作成する選択肢としてとても良いのではないでしょうか。shigehitoWeb技術やUIデザインの学習記録として記事を書いています。バッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。shigehitoWeb技術やUIデザインの学習記録として記事を書いています。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。