Skip to content

i18n(ja): update tutorial/5-astro-api/2.mdx #12454

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

Merged
merged 2 commits into from
Oct 4, 2025
Merged

i18n(ja): update tutorial/5-astro-api/2.mdx #12454

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
20ffeb2
i18n(ja): replace Astro.glob with import.meta.glob in tutorial/5-astr…
tkskto Sep 27, 2025
fb72fcc
Merge branch 'main' into i18n/ja/tutorial-5-astro-api-2
yanthomasdev Oct 4, 2025
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
76 changes: 38 additions & 38 deletions src/content/docs/ja/tutorial/5-astro-api/2.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ import { Steps } from '@astrojs/starlight/components';
{ params: { tag: "成功" } },
{ params: { tag: "コミュニティ" } },
{ params: { tag: "ブログ" } },
{ params: { tag: "後退" } },
{ params: { tag: "つまずき" } },
{ params: { tag: "公開学習" } },
];
}
Expand All @@ -49,7 +49,7 @@ import { Steps } from '@astrojs/starlight/components';
</BaseLayout>
```

`getStaticPaths`関数はページのルートの配列を返します。各ルートに対応するページは、このファイルで定義されたものと同じテンプレートを使用します。
`getStaticPaths`関数はページルートの配列を返します。各ルーティングに対応するページは、このファイルで定義されたものと同じテンプレートを使用します。

2. ブログ記事をカスタマイズしている場合は、個々のタグの値（たとえば「astro」、「成功」、「コミュニティ」など）を、記事で使用されているタグに置き換えます。

Expand All @@ -63,21 +63,21 @@ import { Steps } from '@astrojs/starlight/components';
<Steps>
1. 以下のpropsを`getStaticPaths()`関数に追加して、すべてのブログ記事のデータを各ページルートで利用できるようにします。

配列内の各ルートに新しいpropsを定義し、そのpropsを関数の外側のコンポーネントテンプレートで利用できるようにしてください。
配列内の各ルーティングに新しいpropsを定義し、そのpropsを関数の外側のコンポーネントテンプレートで利用できるようにしてください。

```astro title="src/pages/tags/[tag].astro" ins={5,18} "props: {posts: allPosts}"
---
import BaseLayout from '../../layouts/BaseLayout.astro';

export async function getStaticPaths() {
const allPosts = await Astro.glob('../posts/*.md');
const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));

return [
{params: {tag: "astro"}, props: {posts: allPosts}},
{params: {tag: "成功"}, props: {posts: allPosts}},
{params: {tag: "コミュニティ"}, props: {posts: allPosts}},
{params: {tag: "ブログ"}, props: {posts: allPosts}},
{params: {tag: "後退"}, props: {posts: allPosts}},
{params: {tag: "つまずき"}, props: {posts: allPosts}},
{params: {tag: "公開学習"}, props: {posts: allPosts}}
]
}
Expand All @@ -89,7 +89,7 @@ import { Steps } from '@astrojs/starlight/components';

2. 記事のリストを、ページのタグを含む記事のみへとフィルタリングします。

```astro title="/src/pages/tags/[tag].astro" ins={4}
```astro title="src/pages/tags/[tag].astro" ins={4}
---
const { tag } = Astro.params;
const { posts } = Astro.props;
Expand All @@ -103,7 +103,7 @@ import { Steps } from '@astrojs/starlight/components';
<BaseLayout pageTitle={tag}>
<p>{tag}のタグが付いた記事</p>
<ul>
{filteredPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
{filteredPosts.map((post: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
</ul>
</BaseLayout>
```
Expand All @@ -114,8 +114,8 @@ import { Steps } from '@astrojs/starlight/components';
<BaseLayout pageTitle={tag}>
<p>{tag}のタグが付いた記事</p>
<ul>
{filteredPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
{filteredPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
{filteredPosts.map((post: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
{filteredPosts.map((post: any) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
</ul>
</BaseLayout>
```
Expand All @@ -127,16 +127,16 @@ import { Steps } from '@astrojs/starlight/components';

### パターンを分析する

以下の各項目について、コードが`getStaticPath()`関数の**内側**に書かれるか、それとも**外側**に書かれるか選択してください。
以下の各項目について、コードが`getStaticPaths()`関数の**内側**に書かれるか、それとも**外側**に書かれるか選択してください。

1. `.md`ファイルに関する情報を受け取り、各ページルートに渡すための`Astro.glob()`の呼び出し。
1. `.md`ファイルに関する情報を受け取り、各ページルートに渡すための`import.meta.glob()`の呼び出し。

<MultipleChoice>
<Option isCorrect>`getStaticPaths`の内側</Option>
<Option>`getStaticPaths`の外側</Option>
</MultipleChoice>

2. `getStaticPaths()`によって生成（返却、return）されるルートのリスト。
2. `getStaticPaths()`によって生成（返却、return）されるルーティングのリスト。

<MultipleChoice>
<Option isCorrect>`getStaticPaths`の内側</Option>
Expand Down Expand Up @@ -172,7 +172,7 @@ import { Steps } from '@astrojs/starlight/components';

1. すべてのブログ記事にタグが含まれていることを確認する

既存のMarkdownページをそれぞれ再度開き、すべての記事のフロントマターに`tags`配列が含まれていることを確認します。1つのタグしかない場合でも、`tags: ["blogging"]`のように配列として書く必要があります。
既存のMarkdownページをそれぞれ開き、すべての記事のフロントマターに`tags`配列が含まれていることを確認します。1つのタグしかない場合でも、`tags: ["ブログ"]`のように配列として書く必要があります。

2. すべての既存タグの配列を作成する

Expand All @@ -183,9 +183,9 @@ import { Steps } from '@astrojs/starlight/components';
import BaseLayout from '../../layouts/BaseLayout.astro';

export async function getStaticPaths() {
const allPosts = await Astro.glob('../posts/*.md');
const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));

const uniqueTags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
const uniqueTags = [...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat())];
```

<details>
Expand All @@ -196,27 +196,27 @@ import { Steps } from '@astrojs/starlight/components';
ここではまず1つずつMarkdownの投稿を処理し、タグの配列を1つの大きな配列へと結合しています。次に、（繰り返される値を無視するために）見つかったすべてのタグから新しい`Set`を作成します。最後に、その集合（Set）を配列に変換します（この段階で重複はなくなっています）。これで、ページにタグのリストを表示するために使用するための配列ができました。
</details>

以上により、`"astro"`、`"成功"`、`"コミュニティ"`、`"ブログ"`、`"後退"`、`"公開学習"`という要素をもつ配列`uniqueTags`ができました。
以上により、`"astro"`、`"成功"`、`"コミュニティ"`、`"ブログ"`、`"つまずき"`、`"公開学習"`という要素をもつ配列`uniqueTags`ができました。

3. `getStaticPaths`関数の`return`値を置き換える

```js title="src/pages/tags/[tag].astro" del={1-8} ins={10-16}
return [
{params: {tag: "astro"}, props: {posts: allPosts}},
{params: {tag: "成功"}, props: {posts: allPosts}},
{params: {tag: "コミュニティ"}, props: {posts: allPosts}},
{params: {tag: "ブログ"}, props: {posts: allPosts}},
{params: {tag: "後退"}, props: {posts: allPosts}},
{params: {tag: "公開学習"}, props: {posts: allPosts}}
]
return uniqueTags.map((tag) => {
const filteredPosts = allPosts.filter((post) => post.frontmatter.tags.includes(tag));
return {
params: { tag },
props: { posts: filteredPosts },
};
});
return [
{params: {tag: "astro"}, props: {posts: allPosts}},
{params: {tag: "成功"}, props: {posts: allPosts}},
{params: {tag: "コミュニティ"}, props: {posts: allPosts}},
{params: {tag: "ブログ"}, props: {posts: allPosts}},
{params: {tag: "つまずき"}, props: {posts: allPosts}},
{params: {tag: "公開学習"}, props: {posts: allPosts}}
]

return uniqueTags.map((tag) => {
const filteredPosts = allPosts.filter((post: any) => post.frontmatter.tags.includes(tag));
return {
params: { tag },
props: { posts: filteredPosts },
};
});
```

4. `getStaticPaths`関数は、`params`（各ページルートの名前）を含むオブジェクトのリストを常に返す必要があります。また、任意で`props`（各ページに渡したいデータ）を含めることもできます。先ほどまでは、ブログで使用されている各タグ名を自分で指定し、各ページにすべての記事データを`props`として渡していました。
Expand All @@ -232,8 +232,8 @@ import { Steps } from '@astrojs/starlight/components';
---
<!-- -->
<ul>
{filteredPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
{posts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
{filteredPosts.map((post: any) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
{posts.map((post: any) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
</ul>
```

Expand All @@ -249,12 +249,12 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
import BlogPost from '../../components/BlogPost.astro';

export async function getStaticPaths() {
const allPosts = await Astro.glob('../posts/*.md');
const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));

const uniqueTags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
const uniqueTags = [...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat())];

return uniqueTags.map((tag) => {
const filteredPosts = allPosts.filter((post) => post.frontmatter.tags.includes(tag));
const filteredPosts = allPosts.filter((post: any) => post.frontmatter.tags.includes(tag));
return {
params: { tag },
props: { posts: filteredPosts },
Expand All @@ -268,7 +268,7 @@ const { posts } = Astro.props;
<BaseLayout pageTitle={tag}>
<p>{tag}のタグが付いた記事</p>
<ul>
{posts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
{posts.map((post: any) => <BlogPost url={post.url} title={post.frontmatter.title}/>)}
</ul>
</BaseLayout>
```
Expand Down
Loading