From 98997e2d2660a5fc0ff6849191cea0e560fb3844 Mon Sep 17 00:00:00 2001 From: tkskto Date: Sat, 27 Sep 2025 22:39:21 +0900 Subject: [PATCH] i18n(ja): replace Astro.glob with import.meta.glob in tutorial/5-astro-api/1.mdx --- .../docs/ja/tutorial/5-astro-api/1.mdx | 34 +++++++++++-------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/src/content/docs/ja/tutorial/5-astro-api/1.mdx b/src/content/docs/ja/tutorial/5-astro-api/1.mdx index 993d43f5c563c..c15c099678d99 100644 --- a/src/content/docs/ja/tutorial/5-astro-api/1.mdx +++ b/src/content/docs/ja/tutorial/5-astro-api/1.mdx @@ -3,7 +3,7 @@ type: tutorial title: ブログ記事一覧を作成する description: |- 「初めてのAstroブログ」チュートリアル - - Astro.glob()を使用してプロジェクト内にあるファイルのデータにアクセスする + import.meta.glob()を使用してプロジェクト内にあるファイルのデータにアクセスする i18nReady: true --- import Box from '~/components/tutorial/Box.astro'; @@ -16,7 +16,7 @@ import { Steps } from '@astrojs/starlight/components'; リンクしたいブログ記事がいくつかできたので、そのリストを自動的に作成するようブログページを設定しましょう! - - `Astro.glob()`を使ってすべての投稿のデータに一度にアクセスする + - `import.meta.glob()`を使ってすべての投稿のデータに一度にアクセスする - 動的に生成された記事のリストをブログページに表示する - リストの各項目に``コンポーネントを使用するようリファクタリングする @@ -24,12 +24,12 @@ import { Steps } from '@astrojs/starlight/components'; ## 記事のリストを動的に表示する -1. 以下のコードを`blog.astro`に追加して、すべてのMarkdownファイルに関する情報を取得します。`Astro.glob()`は、各ブログ記事に対応するオブジェクトの配列を返します。 +1. 以下のコードを`blog.astro`に追加して、すべてのMarkdownファイルに関する情報を取得します。`import.meta.glob()`は、各ブログ記事に対応するオブジェクトの配列を返します。 ```astro title="src/pages/blog.astro" ins={3} --- import BaseLayout from '../layouts/BaseLayout.astro' - const allPosts = await Astro.glob('../pages/posts/*.md'); + const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true })); const pageTitle = "私のAstro学習ブログ"; --- @@ -48,7 +48,7 @@ import { Steps } from '@astrojs/starlight/components'; ```astro title="src/pages/blog.astro" del={9,10,11} ins={13} --- import BaseLayout from '../layouts/BaseLayout.astro' - const allPosts = await Astro.glob('../pages/posts/*.md'); + const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true })); const pageTitle = "私のAstro学習ブログ"; --- @@ -58,12 +58,12 @@ import { Steps } from '@astrojs/starlight/components';
  • Post 2
  • Post 3
  • - {allPosts.map((post) =>
  • {post.frontmatter.title}
  • )} + {allPosts.map((post: any) =>
  • {post.frontmatter.title}
  • )}
    ``` - `Astro.glob()`によって返される配列をマップすることで、ブログ記事のリスト全体が動的に生成されるようになりました。 + Astroは標準でTypeScriptをサポートしています。`import.meta.glob()`が返す配列をマップすることで、ブログ記事のリスト全体が動的に生成されます。 3. `src/pages/posts/`に新しく`post-4.md`ファイルを作成し、Markdownコンテンツを追加して新しいブログ記事を追加します。以下で使用されているフロントマターのプロパティを少なくとも含めるようにしてください。 @@ -79,7 +79,7 @@ import { Steps } from '@astrojs/starlight/components'; pubDate: 2022-08-08 tags: ["astro", "成功"] --- - 記事のリストを作成するために`Astro.glob()`がすべての記事データのリストを返しているので、この記事は他のブログ記事と一緒に表示されるはずです。 + `import.meta.glob()`で取得した記事データの配列を使っているので、この記事は他のブログ記事と一緒に表示されるはずです。 ``` 4. ブラウザのプレビューで`http://localhost:4321/blog`のブログページに再度アクセスし、新しいブログ記事を含む4つの項目のリストへと更新されているのを確認してください。 @@ -93,8 +93,8 @@ import { Steps } from '@astrojs/starlight/components'; ```astro title="src/pages/blog.astro" del={2} ins={3} ``` @@ -141,7 +141,7 @@ import { Steps } from '@astrojs/starlight/components'; --- import BaseLayout from '../layouts/BaseLayout.astro'; import BlogPost from '../components/BlogPost.astro'; - const allPosts = await Astro.glob('../pages/posts/*.md'); + const allPosts = Object.values(import.meta.glob('../pages/posts/*.md', { eager: true })); const pageTitle = "私のAstro学習ブログ"; --- ``` @@ -161,13 +161,13 @@ import { Steps } from '@astrojs/starlight/components'; --- import BaseLayout from '../layouts/BaseLayout.astro'; import BlogPost from '../components/BlogPost.astro'; - const allPosts = await Astro.glob('../pages/posts/*.md'); + const allPosts = Object.values(import.meta.glob('../pages/posts/*.md', { eager: true })); const pageTitle = "私のAstro学習ブログ" ---

    ここには、私がAstroを学んでいく旅の様子を投稿します。

      - {allPosts.map((post) => )} + {allPosts.map((post: any) => )}
    ``` @@ -186,7 +186,7 @@ Astroコンポーネントに以下のコードが含まれているとします ```astro --- -const myPosts = await Astro.glob('../pages/posts/*.md'); +const myPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true })); --- ``` @@ -244,4 +244,8 @@ const myPosts = await Astro.glob('../pages/posts/*.md'); - [ ] ローカルファイルのデータを取得できる。 - [ ] ブログ記事のリストを表示できる。 - \ No newline at end of file + + +### 参考 + +- [globパターンでインポートする](/ja/guides/imports/#importmetaglob)