ページ

ページは、Astroプロジェクトのsrc/pages/サブディレクトリにあるファイルです。Webサイトの各ページのルーティングやデータ読み込み、全体的なページレイアウトを処理する役割を担っています。

サポートしているページファイル

Astroはsrc/pages/ディレクトリで次のファイルタイプをサポートしています。

.astro
.md
.mdx （MDXインテグレーションがインストール (EN)されている場合）
.html
[.js/.ts] （エンドポイントとして）

ファイルベースルーティング

Astroは、ファイルベースルーティングと呼ばれるルーティング手法を採用しています。 src/pages/ディレクトリの各ファイルはそのファイルパスに基づいたエンドポイントになります。

また、動的ルーティングを使用して、1つのファイルから複数のページを生成できます。これにより、コンテンツコレクションやCMSなど、特別な/pages/ディレクトリの外にコンテンツがあっても、ページを作成できます。

Astroのルーティングについて詳しくみる。

ページ間のリンク

サイト内の別のページへリンクを張るには、HTML標準の<a>要素をコンポーネントテンプレートに記述してください。相対パスではなく、ルートドメインへの URL 相対パスをリンクとして使用してください。

例: example.comのいずれかのページからhttps://example.com/authors/sonali/にリンクする。

Read more <a href="/authors/sonali/">about Sonali</a>.

Astroページ

Astroページは.astro拡張子を使いAstroコンポーネントと同じ機能を持ちます。

---
---
<html lang="ja">
  <head>
    <title>ホームページ</title>
  </head>
  <body>
    <h1>私のホームページへようこそ！</h1>
  </body>
</html>

ページは完全なHTMLを出力する必要があります。明示的に含まれていない場合、Astroはデフォルトで必要な<!DOCTYPE html>宣言と<head>コンテンツをsrc/pages/内にある.astroコンポーネントに追加します。コンポーネントをパーシャルページとしてマークすることで、コンポーネントごとにこの動作をオプトアウトできます。

すべてのページで同じHTML要素を繰り返すことを避けるために、共通の<head>と<body>要素を独自のレイアウトコンポーネントに移動できます。レイアウトコンポーネントはいくつでも使えます。

---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>レイアウトに包まれたコンテンツ！</p>
</MySiteLayout>

Astroのレイアウトコンポーネントについて詳しくみる。

Markdown/MDXページ

Astroは/src/pages/にあるMarkdown (.md) ファイルも、最終的なWebサイトのページとして扱います。もしMDXインテグレーションがインストールされている (EN)場合、MDX(.mdx)ファイルも同じように扱われます。これらは一般的に、ブログの投稿やドキュメントのような、テキストを多用するページに使用されます。

ページレイアウトはMarkdownファイルに対して特に有効です。Markdownファイルは特別な layoutというフロントマターのプロパティを使用して、Markdownコンテンツを<html>...</html>ページドキュメントにラップするレイアウトコンポーネントを指定できます。

---
layout: ../layouts/MySiteLayout.astro
title: Markdownページ
---
# タイトル

これは**Markdown**で書かれたページです。

AstroのMarkdownについて詳しくみる。

HTMLページ

.html拡張子のついたファイルをsrc/pages内に置くことができ、直接サイトのページとして使用されます。HTMLコンポーネントではAstroの主要機能の一部がサポートされていないことに注意してください。

カスタム404エラーページ

カスタムの404エラーページを作成するには、src/pagesに404.astroまたは404.mdファイルを作成します。

これは404.htmlページにビルドされます。ほとんどのデプロイサービスはこのファイルを見つけて使用します。

カスタム500エラーページ

オンデマンドレンダリングされたページのカスタムの500エラーページを作成するには、src/pages/500.astroを作成します。このカスタムページは事前レンダリングされたページでは使用されず、事前レンダリングされません。

このページをレンダリングする際にエラーが発生した場合は、デプロイサービスのデフォルトの500エラーページが表示されます。

追加： [email protected]

開発サーバーの起動中にエラーが発生した場合は、エラーオーバレイではなくターミナル上にエラーが表示されます。

`error`

追加： [email protected]

src/pages/500.astroは特別なページで、レンダリング中に発生したエラーが自動的にerrorpropとして渡されます。errorpropにより、エラーの詳細(例: ページからのエラー、ミドルウェアからのエラー)を表示することができるようになります。

errorpropの型は何でも構いませんが、コード内での型指定や使用方法に影響を与える可能性があります。

---
interface Props {
  error: unknown;
}

const { error } = Astro.props;
---

<div>{error instanceof Error ? error.message : "Unknown error"}</div>

errorpropから機密情報を漏洩させないため、まずエラーを評価し、適切な内容を返すことを検討してください。例えば、エラーのスタックは表示すべきでありません。スタックにはサーバー上のコード構造に関する情報が含まれているためです。

パーシャルページ

追加： [email protected]

パーシャルページは、htmxやUnpolyなどのフロントエンドライブラリと組み合わせて使用することを目的としています。低レベルのフロントエンドJavaScriptの記述に慣れている場合は、これらを使用することもできます。このため、これらは高度な機能です。

さらに、コンポーネントにスコープされたスタイルまたはスクリプトが含まれている場合は、これらの要素がHTML出力から削除されるため、パーシャルを使用すべきではありません。スコープ付きスタイルが必要な場合は、パーシャルではない通常のページと一緒にコンテンツをheadにマージできるフロントエンドライブラリを使用することをお勧めします。

パーシャルはsrc/pages/内にあるページコンポーネントであり、完全なページとしてレンダリングすることを目的としていません。

このフォルダーの外にあるコンポーネントと同様、これらのファイルには、<!DOCTYPE html>宣言や、スコープ指定されたスタイルやスクリプトなどの<head>コンテンツは自動的に含まれません。

ただし、これらは特別なsrc/pages/ディレクトリに配置されているため、生成されたHTMLはそのファイルパスに対応するURLで利用できます。これにより、レンダリングライブラリ(例：htmx, Stimulus, jQueryなど)がクライアント上でアクセスし、ブラウザの更新やページナビゲーションを行わずにHTMLのセクションを動的に読み込むことができます。

パーシャルをレンダリングライブラリと組み合わせると、Astroで動的コンテンツを構築するためのアイランドや<script> タグの代替手段が提供されます。

値をエクスポートできるページファイル(例.astro、.mdx)は、パーシャルファイルとしてマークできます。

次のエクスポートを追加して、src/pages/内のファイルをパーシャルファイルとして構成します。

---
export const partial = true;
---
<li>パーシャルファイルです!</li>

export const partialは静的に識別可能である必要があります。次の値を取ることができます。

真偽値 true
import.meta.env.USE_PARTIALSなどのimport.meta.envを使用した環境変数

ライブラリと併用する

パーシャルは、htmxなどのライブラリを使用したページのセクションを動的に更新するために使用されます。

次の例は、hx-post属性にパーシャルのURLが設定された例を示しています。パーシャルページのコンテンツは、このページ上のターゲットのHTML要素を更新するために使用されます。

<html>
  <head>
    <title>マイページ</title>
    <script src="https://unpkg.com/[email protected]"
      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
      crossorigin="anonymous"></script>
  </head>
  <body>
    <section>
      <div id="parent-div">ターゲット</div>

      <button hx-post="/partials/clicked/"
        hx-trigger="click"
        hx-target="#parent-div"
        hx-swap="innerHTML"
      >
        ここをクリック！
      </button>
    </section>
  </body>
</html>

.astroのパーシャルは対応するファイルパスに存在する必要があり、パーシャルページとして定義するエクスポートが含まれている必要があります。

---
export const partial = true;
---
<div>クリックされました!</div>

htmxの使用方法の詳細については、htmxのドキュメントを参照してください。

貢献するコミュニティスポンサー