Skip to content

i18n(ja): Updatebasics/astro-pages.mdx #11580

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

i18n(ja): Updatebasics/astro-pages.mdx #11580

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 28 additions & 25 deletions src/content/docs/ja/basics/astro-pages.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ title: ページ
description: Astroページの紹介
i18nReady: true
---

import ReadMore from '~/components/ReadMore.astro';
import Since from '~/components/Since.astro'

Expand All @@ -12,6 +11,7 @@ import Since from '~/components/Since.astro'
## サポートしているページファイル

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

- [`.astro`](#astroページ)
- [`.md`](#markdownmdxページ)
- `.mdx` （[MDXインテグレーションがインストール](/ja/guides/integrations-guide/mdx/#installation)されている場合）
Expand Down Expand Up @@ -57,9 +57,8 @@ Astroページは`.astro`拡張子を使い[Astroコンポーネント](/ja/basi

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

```astro {3} /</?MySiteLayout>/
```astro title="src/pages/index.astro" /</?MySiteLayout>/ {2}
---
// 例: src/pages/index.astro
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
Expand All @@ -73,15 +72,17 @@ import MySiteLayout from '../layouts/MySiteLayout.astro';

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

`src/content/`にある[MarkdownやMDXページコンテンツのコレクション](/ja/guides/content-collections/)は、[動的にページを生成する](/ja/guides/routing/#動的ルーティング)ために使用できます。
:::tip
ブログ記事や商品アイテムなど、同じ構造を持つMarkdownファイルのディレクトリには、ページではなく[コンテンツコレクション](/ja/guides/content-collections/)の作成を検討してください。
:::

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

```md {3}
---
# 例: src/pages/page.md
layout: '../layouts/MySiteLayout.astro'
title: 'Markdownページ'
layout: ../layouts/MySiteLayout.astro
title: Markdownページ
---
# タイトル

Expand Down Expand Up @@ -114,23 +115,24 @@ title: 'Markdownページ'

<p><Since v="4.11.0" /></p>

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

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

```astro title="src/pages/500.astro"
---
interface Props {
error: unknown
error: unknown;
}

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

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

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

## パーシャルページ

<p><Since v="3.4.0" /></p>
Expand All @@ -145,7 +147,7 @@ const { error } = Astro.props

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

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

パーシャルをレンダリングライブラリと組み合わせると、Astroで動的コンテンツを構築するための[アイランド](/ja/concepts/islands/)や[`<script>` タグ](/ja/guides/client-side-scripts/)の代替手段が提供されます。

Expand All @@ -157,7 +159,6 @@ const { error } = Astro.props
---
export const partial = true;
---

<li>パーシャルファイルです!</li>
```

Expand All @@ -180,18 +181,20 @@ export const partial = true;
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>
<section>
<div id="parent-div">ターゲット</div>

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

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