i18n(ja): update tutorial/5-astro-api/1.mdx (#12452)

Co-authored-by: Yan <[email protected]>
Co-authored-by: knj <[email protected]>

Author: 3 people

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,20 +16,20 @@ import { Steps } from '@astrojs/starlight/components';
 リンクしたいブログ記事がいくつかできたので、そのリストを自動的に作成するようブログページを設定しましょう！
 
 <PreCheck>
-  - `Astro.glob()`を使ってすべての投稿のデータに一度にアクセスする
+  - `import.meta.glob()`を使ってすべての投稿のデータに一度にアクセスする
   - 動的に生成された記事のリストをブログページに表示する
   - リストの各項目に`<BlogPost />`コンポーネントを使用するようリファクタリングする
 </PreCheck>
 
 ## 記事のリストを動的に表示する
 
 <Steps>
-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学習ブログ";
     ---
     <BaseLayout pageTitle={pageTitle}>
@@ -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学習ブログ";
     ---
     <BaseLayout pageTitle={pageTitle}>
@@ -58,12 +58,12 @@ import { Steps } from '@astrojs/starlight/components';
         <li><a href="/posts/post-2/">Post 2</a></li>
         <li><a href="/posts/post-3/">Post 3</a></li>
 
-        {allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
+        {allPosts.map((post: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
       </ul>
     </BaseLayout>
     ```
 
-    `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}
 <ul>
-  {allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
-  {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
+  {allPosts.map((post: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
+  {allPosts.map((post: any) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
 </ul>
 ```
 
@@ -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学習ブログ"
     ---
     <BaseLayout pageTitle={pageTitle}>
       <p>ここには、私がAstroを学んでいく旅の様子を投稿します。</p>
       <ul>
-        {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
+        {allPosts.map((post: any) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
       </ul>
     </BaseLayout>
     ```
@@ -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');
 - [ ] ローカルファイルのデータを取得できる。
 - [ ] ブログ記事のリストを表示できる。
 </Checklist>
-</Box>
+</Box>
+
+### 参考
+
+- [globパターンでインポートする](/ja/guides/imports/#importmetaglob)