Astroで動的にページを生成する

INDEX

こんにちは。uchimuroです。弊社エンジニアのブログがEvoLab.に移行してからは初めての記事となります。

個人的にAstroを最近ちらほらと使っているのですが、とても簡単に動的ページが作成できることに感動したため、今回はタイトルの通りAstroで動的ページを作成する方法を紹介して、皆さんがAstroに興味を持つきっかけを作れたらと思います。

Astroとは

  • 静的サイトジェネレーター
  • ビルド後の出力ファイルからJavaScriptが取り除かれる
  • ビルドツールにViteを採用しているので開発体験がとても良い
  • 公式ドキュメントが日本語対応しているので情報のキャッチアップが容易

今回は詳細な説明は行わずに、環境構築〜動的ページの生成までを紹介していきます。

この記事を読んでAstroに興味を持った方、またこの記事を読む前にAstroの基礎知識を知りたい方は公式ドキュメントをご覧ください。

環境構築

まずは下記コマンドを実行します。

npm create astro@latest

コマンドを実行すると以下の内容を聞かれるので、それぞれで必要事項を入力もしくは選択します。(今回はそれぞれ矢印右側の内容で進めています)

  • Where would you like to create your new project? › astro-tutorial
  • Which template would you like to use? › Just the basics
  • Would you like to install npm dependencies? › yes
  • Would you like to initialize a new git repository? › no

ちなみにAstroで使用するNode.jsは14.15.0もしくは16.0.0以上のバージョンが必要となるので注意してください。

無事にインストールが完了したらcd astro-tutorialコマンドを実行して作成されたフォルダに移動します。

移動が完了したら下記のコマンドを実行して、開発用サーバーを起動します。

npm run dev

これで開発環境が整いました。

動的ページの実装

それでは今回の本題に入っていきます。

src/pages/内に[id].astroというファイルを作成して、以下を記述します。

 ---
import Layout from "../layouts/Layout.astro";

export async function getStaticPaths() {
    return [
        { params: { id: 'chihuahua' } },
        { params: { id: 'toy-poodle' } },
        { params: { id: 'mameshiba' } }
    ];
}

const { id } = Astro.params;
---

<Layout title={ `${id}` }>
    <h1>{ id }</h1>
</Layout>

getStaticPaths関数の戻り値の配列にparams.idを設定しているのがわかるかと思いますが、これだけで、http://localhost:xxxx/chihuahuahttp://localhost:xxxx/toy-poodlehttp://localhost:xxxx/mameshibaのページが作成され、それぞれのh1内テキストもページによって変化します。

しかし、現状ではURLとなる文字列以外はページごとに出し分けることができません。それぞれのページで他の情報を出し分けたい場合は以下のように記述します。

---
import Layout from "../layouts/Layout.astro";

export async function getStaticPaths() {
    return [
        { 
            params: {
                id: 'chihuahua'
            },
            props: {
                name: 'ichiro',
                age: '4'
            }
        },
        {
            params: {
                id: 'toy-poodle'
            },
            props: {
                name: 'jiro',
                age: '3'
            }
        },
        {
            params: {
                id: 'mameshiba'
            },
            props: {
                name: 'saburo',
                age: '2'
            }
        }
    ];
}

const { id } = Astro.params;
const { name, age } = Astro.props;
---

<Layout title={ `${id}` }>
    <h1>{ id }</h1>
    <p>name: { name }</p>
    <p>age: { age }</p>
</Layout>

このようにpropsプロパティを使用することにより、URLとなる文字列以外もそれぞれのページで出し分けることができます。

静的ファイルの出力

最後にAstroの静的サイトジェネレーターとしての機能を使用して、静的ファイルを出力します。

現状はnpm run devが実行中かと思うので一度こちらを止めてから、下記のコマンドを実行します。

npm run build

正常にコマンドが実行されるとdistフォルダが作成されます。中身を確認すると、動的ページとして作成したhttp://localhost:xxxx/chihuahuahttp://localhost:xxxx/toy-poodlehttp://localhost:xxxx/mameshibaもそれぞれ静的ファイルとして出力されていることがわかるかと思います。

注意事項

今回の記事で使用しているAstroのバージョンは1.0.0-beta.72です。バージョンアップに伴い記事の内容が古くなっている可能性もあるので、不具合が発生した場合は公式ドキュメントを参照してください。

まとめ

駆け足ではありますが、Astroでの動的ページの作成方法を紹介させていただきました。

microCMSなどのヘッドレスCMSと今回紹介した手法を組み合わせることで、Jamstack構成のサイトも容易に作成することができるので、気になった方は是非試してみていただければと思います。

個人的には今後小規模な静的サイトを作成する際はAstroを使用していこうかな〜とも思っているので、これからのAstroの動向もチェックしていきます。

それでは今回はここら辺で失礼します。

(ちなみにサムネイル画像の書体は『Swear Display』というのですが、どこかで絶対に使いたい…!と思っていたので今回使用できてよかったです。)

参考

サムネイル画像出典

PREV

BLOG一覧

NEXT

最新記事 Latest