i18n(ja): add data-fetching.mdx

src/content/docs/ja/guides/data-fetching.mdx

@@ -0,0 +1,109 @@
+---
+title: データの取得
+description: Astroでfetch APIを使ってリモートデータを取得する方法を学びます。
+i18nReady: true
+---
+`.astro`ファイルは、ページの生成に使用するためにリモートデータを取得できます。
+
+## Astroでの`fetch()`
+
+すべての[Astroコンポーネント](/ja/basics/astro-components/)は、コンポーネントスクリプト内で[グローバルな`fetch()`関数](https://developer.mozilla.org/ja/docs/Web/API/fetch)にアクセスでき、URL全体（例: `https://example.com/api`）を指定してAPIへのHTTPリクエストを送れます。
+さらに、[`new URL("/api", Astro.url)`](/ja/reference/api-reference/#url)を使えば、サーバー上でオンデマンドにレンダリングされるプロジェクトのページやエンドポイントへのURLを構築できます。
+
+このfetch呼び出しはビルド時に実行され、取得したデータは動的なHTMLを生成するためにコンポーネントテンプレートで利用できます。[SSR](/ja/guides/on-demand-rendering/)モードが有効な場合、fetch呼び出しはランタイムに実行されます。
+
+💡 Astroコンポーネントスクリプト内では、[**トップレベル`await`**](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/await#top_level_await)を活用しましょう。
+
+💡 取得したデータは、propsとしてAstroコンポーネントとフレームワークコンポーネントの両方に渡せます。
+
+```astro /await fetch\\(.*?\\);/
+---
+// src/components/User.astro
+import Contact from "../components/Contact.jsx";
+import Location from "../components/Location.astro";
+
+const response = await fetch("https://randomuser.me/api/");
+const data = await response.json();
+const randomUser = data.results[0];
+---
+<!-- ビルド時に取得したデータをHTMLとしてレンダリングできる -->
+<h1>User</h1>
+<h2>{randomUser.name.first} {randomUser.name.last}</h2>
+
+<!-- ビルド時に取得したデータをpropsとしてコンポーネントに渡せる -->
+<Contact client:load email={randomUser.email} />
+<Location city={randomUser.location.city} />
+```
+
+:::note
+Astroコンポーネント内のすべてのデータは、コンポーネントがレンダリングされるときに取得される点に注意してください。
+
+デプロイされたAstroサイトは、**ビルド時に一度だけ**データを取得します。開発環境では、コンポーネントが更新されるたびにデータが取得されます。クライアントサイドでデータを複数回再取得する必要がある場合は、Astroコンポーネント内で[フレームワークコンポーネント](/ja/guides/framework-components/)または[クライアントサイドスクリプト](/ja/guides/client-side-scripts/)を使用してください。
+:::
+
+## フレームワークコンポーネントでの`fetch()`
+
+`fetch()`関数は、あらゆる[フレームワークコンポーネント](/ja/guides/framework-components/)でもグローバルに利用できます。
+
+```tsx title="src/components/Movies.tsx" /await fetch\\(.*?\\)/
+import type { FunctionalComponent } from 'preact';
+
+const data = await fetch('https://example.com/movies.json').then((response) => response.json());
+
+// ビルド時にレンダリングされるコンポーネントは、CLIにもログを出力する。
+// `client:*`ディレクティブでレンダリングされる場合は、ブラウザのコンソールにもログを出力する。
+console.log(data);
+
+const Movies: FunctionalComponent = () => {
+  // 結果をページに出力する
+  return <div>{JSON.stringify(data)}</div>;
+};
+
+export default Movies;
+```
+
+## GraphQLクエリ
+
+Astroは`fetch()`を使って、有効なあらゆるGraphQLクエリでGraphQLサーバーに問い合わせることもできます。
+
+```astro title="src/components/Film.astro" "await fetch"
+---
+const response = await fetch(
+  "https://swapi-graphql.netlify.app/.netlify/functions/index",
+  {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      query: `
+        query getFilm ($id:ID!) {
+          film(id: $id) {
+            title
+            releaseDate
+          }
+        }
+      `,
+      variables: {
+        id: "ZmlsbXM6MQ==",
+      },
+    }),
+  }
+);
+
+
+const json = await response.json();
+const { film } = json.data;
+---
+<h1>Fetching information about Star Wars: A New Hope</h1>
+<h2>Title: {film.title}</h2>
+<p>Year: {film.releaseDate}</p>
+```
+
+## ヘッドレスCMSからの取得
+
+Astroコンポーネントは、お好みのCMSからデータを取得し、それをページコンテンツとしてレンダリングできます。[動的ルート](/ja/guides/routing/#dynamic-routes)を使えば、CMSのコンテンツをもとにページを生成することも可能です。
+
+Storyblok、Contentful、WordPressなどのヘッドレスCMSとAstroを統合する方法の詳細については、[CMSガイド](/ja/guides/cms/)を参照してください。
+
+## コミュニティリソース
+
+- [Astro + GraphQLでフルスタックアプリを作成する](https://robkendal.co.uk/blog/how-to-build-astro-site-with-graphql/)