Astroで現在のページのパスやURLを取得する方法

AstroでWebサイトを構築する際に、現在のページのパスやURLを取得したい場合がありますね。

Astroでは便利なグローバルオブジェクトやAPIが提供されており、それらを活用することで簡単に現在のページのURLを取得することができます。

本記事では、AstroのランタイムAPIを活用して、現在のページのパスやURLを取得する具体的な方法について解説します。

動作環境

当記事で紹介する方法は、以下のバージョンで動作確認を行っています。

Astroで現在のページのURLを取得する

まずは現在のページのURLを取得する方法から見ていきましょう。

Astroのグローバルオブジェクトを利用するには、.astroファイル内である必要があります。

そのため、.astroファイル内で以下のコードを実行してください。

方法1. Astro.url.hrefを使用する

1つ目は、Astro.url.hrefを使用する方法です。

    ---
const currentPageUrl = Astro.url.href;
---
 
<div>
  <p>現在のページのURL: {currentPageUrl}</p>
</div>
  

このコードを実行すると、以下のような結果になります。

現在のページのURLが正しく表示されていますね。

Astro.urlは URLオブジェクト を返すので、href以外にもoriginやpathnameなどのプロパティを利用することもできます。

詳しくは、Astroの公式ドキュメントを参照してください。

Astro render context

https://docs.astro.build/en/reference/api-reference/#url

方法2. Astro.request.urlを使用する

2つ目は、Astro.request.urlを使用する方法です。

    ---
const currentPageUrl = Astro.request.url;
---
 
<div>
  <p>現在のページのURL: {currentPageUrl}</p>
</div>
  

こちらの実行結果は以下の通りです。

先ほどと同様に、現在のページのURLが正しく表示されています。

Astro.requestは Requestオブジェクト を返すので、url以外にもmethodやheadersなどのプロパティを利用することもできます。

Astro render context

https://docs.astro.build/en/reference/api-reference/#request

Astroで現在のページのホスト名やパス等を取得する

次に、現在のページのホスト名やパスを取得する方法を見ていきましょう。

これらはAstro.urlオブジェクトのプロパティを利用することで取得できます。

    ---
// オリジン: プロトコル + ホスト名
const currentPageOrigin = Astro.url.origin;
// ホスト名: ドメイン名
const currentPageHostname = Astro.url.hostname;
// パス: ドメイン名以降のパス
const currentPagePathname = Astro.url.pathname;
---
 
<div>
  <p>現在のページのオリジン: {currentPageOrigin}</p>
  <p>現在のページのホスト名: {currentPageHostname}</p>
  <p>現在のページのパス: {currentPagePathname}</p>
</div>
  

以下は上記のコードの実行結果です。

他にも取得できるプロパティはいくつかありますので、詳しくは 公式ドキュメント を参照してください。

本番環境でURLが正しく取得されない場合

上記で紹介したコードを使用しても、本番環境でlocalhostのURLが取得される場合があります。

この場合は、astro.config.mjsファイルに記載すべき設定が抜けている可能性があります。

astro.config.mjsに設定を追加する

本番環境で正式なURLを取得するためには、astro.config.mjsファイルに以下の設定を追加してください。

    import { defineConfig } from "astro/config";
 
export default defineConfig({
  site: "https://your-production-url.com",
  // 他の設定...
});
  

上記の通り、siteプロパティに本番環境のURLを指定することで、本番環境で正式なURLを取得できるようになります。

まとめ：Astroで現在のページのパスやURLを取得する方法

Astroでは、Astro.urlやAstro.requestを利用することで、簡単に現在のページのURLやパスを取得することができます。

これらのAPIは.astroファイル内でのみ利用可能なので、URLやパスを取得する際はぜひ活用してみてください。