Astroのルーティング入門！静的ファイルベースから動的ルーティングまで
ルーティングとは
皆さんはURLを意識して見たことがあるだろうか？
https://www.kurotech.net/works/games/
上記は「ゲーム一覧」が表示されるURLとなっており、https://www.kurotech.net/ までは本サイトにおける他のページも同じ構成になっている。https はプロトコルを示しており、kurotech.net はドメインを表している。プロトコルに関しては固定であり、ドメインは購入して管理しているドメインが反映されているに過ぎない。
今回したい本題は、ドメイン以降の「/works/games/」の部分はどのように決められるのかについて、だ。その詳細を語る前に、そもそもルーティングとは何かの話からまずはしたい。
プロトコルから始まるURLはブラウザからサーバーに対して送られる。サーバーはURLを受け取って、その内容に応じたデータをブラウザに返却する。ブラウザはそのデータを描画することで、我々は目的のサイトを開くことができる。さて、ここで初学者が考えるべきことは大きく2つある。
- サーバーの場所はどのようにして分かるのか？
- サーバーは返すべきデータをどのように判定しているのか？
1については本題ではないので多くを語らないが、DNSに登録されているドメインが住所を示しているためデータを返却することが可能になる。今回考えたいのは「2. サーバーは返すべきデータをどのように判定しているのか？」であり、この答えの鍵を握っているのが、ドメイン以降の「/works/games/」の部分である。
つまり、サーバーは「/works/games/」の部分を見て、「ゲーム一覧」を表示するのに必要なデータを返却する。このルートとデータの対応をどのように実現するのか？
その手法について「静的」と「動的」の2種類がある。それぞれの詳細を見ていきたい。
静的ルーティング
静的ルーティングを簡単に説明すると、フォルダ構成とパスが一致するマッピング手法である。例えば「ゲーム一覧」ページの src/pages/works/games/index.astro にて実装しており、URLでもそのようなパスになっていることは確認できる。
src/
pages/
index.astro -> https://www.kurotech.net/
works/
index.astro -> https://www.kurotech.net/works/
games/
index.astro -> https://www.kurotech.net/works/games/
このように実装で配置したファイルが、そのままパスになるルーティングを「ファイルベースルーティング」と呼ぶ。特別な設定ファイルを一から書く必要がなく、直感的にフォルダを切るだけでページを増やせるため、非常に開発体験が良いのが特徴だ。
しかし全てのページを手動で作成してパスに配置するやり方は現実的ではないことがある。例えば毎日のように追加されるブログページがある場合、毎回のようにページ毎のファイルを作って配置して……と繰り返していくと、ファイル数はあっという間に100を超えることだろう。そのファイルの管理はあまりに大変になってくる。
動的ルーティング
動的ルーティングの場合、100を超える膨大なファイルの管理を1つのファイルで集約可能になることがある。
本サイトでの「プロフィール」ページは、自身のスキルを大分類にカテゴライズして細かなスキルを一覧表示した「カテゴリ」ページへ遷移し、スキル毎にそれぞれの習熟度を証明する「スキル根拠詳細」ページへと遷移する構成となっている。
このスキルをカテゴライズした大分類は、「フロントエンド」「バックエンド」「デザイン」……といったように複数存在する。それらページのカテゴリ毎に表示するレイアウトは変わらず、中身に表示するスキルの一覧や文言のみが変わるため、1つのファイルで管理するに十分な内容だと判断した。そんなカテゴリのページは、下記のような構造で実装している。
src/
pages/
about/
[category].astro
-> フロントエンドの場合:https://www.kurotech.net/about/frontend/
-> バックエンドの場合:https://www.kurotech.net/about/backend/
-> デザインの場合:https://www.kurotech.net/about/design/
ファイル名に角括弧 [ ] を使うことで、1つのファイルで複数のパスを実現する動的ルーティングを実装している。フロントエンドの場合、バックエンドの場合、それぞれで表示する項目についてはDB上で管理しており、ビルドタイミングでAPIを呼び出してページを生成するようにしている。
具体的な実装は下記の通り。 fetchPublicSkillCategories ではAPIを使ってカテゴリの一覧を取得してパスの生成と、パス毎に表示する情報を管理するようにしている。
---
import (省略)
export async function getStaticPaths() {
const res = await fetchPublicSkillCategories({ includeSkills: true });
return res.data.map((category) => ({
params: { category: category.slug },
props: {
category: {
...category,
slug: category.slug as SkillCategorySlug,
},
skills: (category.skills || []).map((s) => ({
...s,
category: category.slug as SkillCategorySlug,
})) as Skill[],
},
}));
}
（省略）
---
また、Astroで静的サイト生成（SSG）を行う場合、このように getStaticPaths() 関数を定義することで、「どのURL（params）で、どのデータ（props）を使ったHTMLをビルド時に事前出力しておくか」をAstroに教えてあげることができる仕組みになっている。
まとめ
本記事では、URLの仕組みから「ルーティング」の概念、そしてAstroにおける静的・動的ルーティングの実現方法について解説してきた。
- ルーティング： リクエストされたURL（パス）に応じて、返すべき画面やデータを紐付ける仕組み。
- 静的ルーティング（ファイルベース）： フォルダやファイルの配置構造がそのままURLパスになる（直感的で分かりやすい）。
- 動的ルーティング：
[category].astroのように角括弧を使い、getStaticPaths() と組み合わせることで、1つのファイルで無数の個別ページを効率よく管理・生成できる。
静的ルーティングによる「構造のわかりやすさ」と、動的ルーティングによる「効率的な管理性」。この両方をシームレスかつ直感的に組み合わせられる点こそが、AstroでWebサイトを構築する際の大きな魅力の1つなのだと実感している。
