Translate tutorial/part-seven/

docs/tutorial/part-seven/index.md

@@ -1,61 +1,49 @@
 ---
-title: Programmatically create pages from data
+title: データからプログラムによるページを作成する
 typora-copy-images-to: ./
 disableTableOfContents: true
 ---
 
-> This tutorial is part of a series about Gatsby’s data layer. Make sure you’ve gone through [part 4](/tutorial/part-four/), [part 5](/tutorial/part-five/), and [part 6](/tutorial/part-six/) before continuing here.
+> このチュートリアルは Gatsby のデータ層に関する解説の一部です。先に、[パート 4](/tutorial/part-four/)、[パート 5](/tutorial/part-five/)、[パート 6](/tutorial/part-six/)の内容を確認してください。
 
-## What's in this tutorial?
+## このチュートリアルは何ですか？
 
-In the previous tutorial, you created a nice index page that queries markdown
-files and produces a list of blog post titles and excerpts. But you don't want to just see excerpts, you want actual pages for your
-markdown files.
+前回では Markdown を取得して、ブログ投稿のタイトルと抜粋のリストを作成し、すばらしい index ページを作成しました。しかし、抜粋の表示だけではなく、実際の Markdown を表示するページが必要です。
 
-You could continue to create pages by placing React components in `src/pages`. However, you'll
-now learn how to _programmatically_ create pages from _data_. Gatsby is _not_
-limited to making pages from files like many static site generators. Gatsby lets
-you use GraphQL to query your _data_ and _map_ the query results to _pages_—all at build
-time. This is a really powerful idea. You'll be exploring its implications and
-ways to use it for the remainder of this part of the tutorial.
+`src/pages`に React コンポーネントを設置することで、ページの作成を続けることができますが、今回は**データ**から**プログラムで**ページを作成する方法を学びます。 Gatsby は多くの静的サイトジェネレーターのように、ページの作成をファイルに**限定しません**。 Gatsby は GraphQL を使用して**データ**を取得し、ビルド時にクエリの結果を**マッピング**できます。これはとても強力なアイディアです。このチュートリアルで、その意味と実装の手順を掘り下げていきます。
 
-Let's get started.
+さっそく始めましょう。
 
-## Creating slugs for pages
+## ページのスラッグの作成
 
-Creating new pages has two steps:
+ページの作成には 2 つの手順があります。
 
-1.  Generate the "path" or "slug" for the page.
-2.  Create the page.
+1.  ページのパスかスラッグを生成する。
+2.  ページを作成する。
 
-_**Note**: Often data sources will directly provide a slug or pathname for content — when working with one of those systems (e.g. a CMS), you don't need to create the slugs yourself as you do with markdown files._
+_**ヒント**: 多くのデータソースは、コンテンツのスラッグやパスを直接提供します。それらを提供するシステム(CMS など)で作業をする場合は、 Markdown のように自分でスラッグを作成する必要はありません。_
 
-To create your markdown pages, you'll learn to use two Gatsby APIs:
-[`onCreateNode`](/docs/node-apis/#onCreateNode) and
-[`createPages`](/docs/node-apis/#createPages). These are two workhorse APIs
-you'll see used in many sites and plugins.
+Markdown のページを作成するために、2 つの Gatsby API を学びます。
+[`onCreateNode`](/docs/node-apis/#onCreateNode) と
+[`createPages`](/docs/node-apis/#createPages) です。この 2 つは、多くのサイトやプラグインで使用されている主力の API です。
 
-We do our best to make Gatsby APIs simple to implement. To implement an API, you export a function
-with the name of the API from `gatsby-node.js`.
+私達は、Gatsby の API をシンプルに実装できるようベストを尽くします。API を実装するには、`gatsby-node.js`で、 API の名前を用いた関数をエクスポートします。
 
-So, here's where you'll do that. In the root of your site, create a file named
-`gatsby-node.js`. Then add the following.
+試しに API を実装してみましょう。サイトのルートフォルダーに、`gatsby-node.js`を作成し、次のように記述してください。
 
 ```javascript:title=gatsby-node.js
 exports.onCreateNode = ({ node }) => {
   console.log(node.internal.type)
 }
 ```
 
-This `onCreateNode` function will be called by Gatsby whenever a new node is created (or updated).
+`onCreateNode` 関数は、新しいノードが作成（または更新）されたるたびに Gatsby によって呼び出されます。
 
-Stop and restart the development server. As you do, you'll see quite a few newly
-created nodes get logged to the terminal console.
+開発用のサーバーを再起動してください。すると、多数のノードがターミナルのコンソールに記録されます。
 
-In the next section, you will use this API to add slugs for your Markdown pages to `MarkdownRemark`
-nodes.
+次は、この API を使用して、`MarkdownRemark`ノードに Markdown のスラッグを追加します。
 
-Change your function so it now only logs `MarkdownRemark` nodes.
+`MarkdownRemark` ノードだけのログを記録するように、関数の処理を変更します。
 
 ```javascript:title=gatsby-node.js
 exports.onCreateNode = ({ node }) => {
@@ -67,11 +55,7 @@ exports.onCreateNode = ({ node }) => {
 }
 ```
 
-You want to use each markdown file name to create the page slug. So
-`pandas-and-bananas.md` will become `/pandas-and-bananas/`. But how do you get
-the file name from the `MarkdownRemark` node? To get it, you need to _traverse_
-the "node graph" to its _parent_ `File` node, as `File` nodes contain data you
-need about files on disk. To do that, modify your function again:
+ページのスラッグを作成するために、各 Markdown のファイル名が必要です。`pandas-and-bananas.md` なら `/pandas-and-bananas/` になります。しかし、どうやって `MarkdownRemark` ノードからファイル名を取得するのでしょうか？`File` ノードには、あなたが必要としているファイルの情報が含まれているので、ノードのつながりから**親の**`File` ノードまで**辿る**必要があります。それを行うために、関数を再度変更します。
 
 ```javascript:title=gatsby-node.js
 // highlight-next-line
@@ -85,14 +69,11 @@ exports.onCreateNode = ({ node, getNode }) => {
 }
 ```
 
-After restarting your development server, you should see the relative paths for your two markdown
-files print to the terminal screen.
+サーバーを再起動すると、2 つの Markdown の相対パスがターミナルに表示されます。
 
 ![markdown-relative-path](markdown-relative-path.png)
 
-Now you'll have to create slugs. As the logic for creating slugs from file names can get
-tricky, the `gatsby-source-filesystem` plugin ships with a function for creating
-slugs. Let's use that.
+次に、スラッグを作成する必要があります。ファイル名からスラッグを作成するロジックは複雑になりがちです。`gatsby-source-filesystem` プラグインにはスラッグを作成する関数が付属されているので、それを使用しましょう。
 
 ```javascript:title=gatsby-node.js
 const { createFilePath } = require(`gatsby-source-filesystem`) // highlight-line
@@ -104,20 +85,11 @@ exports.onCreateNode = ({ node, getNode }) => {
 }
 ```
 
-The function handles finding the parent `File` node along with creating the
-slug. Run the development server again and you should see logged to the terminal
-two slugs, one for each markdown file.
+この関数はスラッグの作成とともに、 親の `File` ノードの探索を処理します。サーバーを再起動すると、Markdown ごとに 1 つずつ、計 2 つのスラッグがターミナルに表示されます。
 
-Now you can add your new slugs directly onto the `MarkdownRemark` nodes. This is
-powerful, as any data you add to nodes is available to query later with GraphQL.
-So, it'll be easy to get the slug when it comes time to create the pages.
+これで新しいスラッグを `MarkdownRemark` ノードに直接追加できます。これは、ノードに追加したデータを後から GraphQL で取得できるので、強力です。新しくページを作成する時に、スラッグを簡単に取得できます。
 
-To do so, you'll use a function passed to your API implementation called
-[`createNodeField`](/docs/actions/#createNodeField). This function
-allows you to create additional fields on nodes created by other plugins. Only
-the original creator of a node can directly modify the node—all other plugins
-(including your `gatsby-node.js`) must use this function to create additional
-fields.
+そのためには、[`createNodeField`](/docs/actions/#createNodeField) と呼ばれる関数を使用します。この関数を使用すると、他のプラグインにより作成されたノードに、追加のフィールドを作成できます。ノードを変更できるのは元の作成者のみです。他のプラグイン（`gatsby-node.js`を含む）は、フィールドを追加するためにこの関数を用いる必要があります。
 
 ```javascript:title=gatsby-node.js
 const { createFilePath } = require(`gatsby-source-filesystem`)
@@ -137,8 +109,7 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
 }
 ```
 
-Restart the development server and open or refresh GraphiQL. Then run this
-GraphQL query to see your new slugs.
+サーバーを再起動して、GraphiQL を開くか更新します。次に、以下の GraphQL クエリを実行して、新しいスラッグを確認します。
 
 ```graphql
 {
@@ -154,11 +125,11 @@ GraphQL query to see your new slugs.
 }
 ```
 
-Now that the slugs are created, you can create the pages.
+これでスラッグが作成され、ページを作成できます。
 
-## Creating pages
+## ページを作成する
 
-In the same `gatsby-node.js` file, add the following.
+`gatsby-node.js` ファイルに、以下を追加します。
 
 ```javascript:title=gatsby-node.js
 const { createFilePath } = require(`gatsby-source-filesystem`)
@@ -198,27 +169,20 @@ exports.createPages = async ({ graphql, actions }) => {
 // highlight-end
 ```
 
-You've added an implementation of the
-[`createPages`](/docs/node-apis/#createPages) API which Gatsby calls so plugins can add
-pages.
+プラグインがページを追加できるように Gatsby が呼びだす [`createPages`](/docs/node-apis/#createPages) API を追加しました。
 
-As mentioned in the intro to this part of the tutorial, the steps to programmatically creating pages are:
+チュートリアルの冒頭で述べたように、プログラムでページを作成する手順は次の通りです。
 
-1.  Query data with GraphQL
-2.  Map the query results to pages
+1.  GraphQL でデータを取得
+2.  結果をページにマッピング
 
-The above code is the first step for creating pages from your markdown as you're
-using the supplied `graphql` function to query the markdown slugs you created.
-Then you're logging out the result of the query which should look like:
+上記のコードは、`graphql` 関数を使用して Markdown のスラッグを取得するため、 Markdown からページを作成する最初のステップです。これで、次のような取得結果が出力されます。
 
 ![query-markdown-slugs](query-markdown-slugs.png)
 
-You need one additional thing beyond a slug to create pages: a page template
-component. Like everything in Gatsby, programmatic pages are powered by React
-components. When creating a page, you need to specify which component to use.
+ページを作成するためには、スラッグの他に、ページのテンプレートコンポーネントを追加する必要があります。Gatsby の他のページと同様に、プログラムされるページは React コンポーネントによって動作します。ページを作成する時には、使用するコンポーネントを指定する必要があります。
 
-Create a directory at `src/templates`, and then add the following in a file named
-`src/templates/blog-post.js`.
+`src/templates` ディレクトリーを追加し、`src/templates/blog-post.js` を作成して、以下を追加します。
 
 ```jsx:title=src/templates/blog-post.js
 import React from "react"
@@ -233,7 +197,7 @@ export default () => {
 }
 ```
 
-Then update `gatsby-node.js`
+`gatsby-node.js` を更新します。
 
 ```javascript:title=gatsby-node.js
 const path = require(`path`) // highlight-line
@@ -283,19 +247,15 @@ exports.createPages = async ({ graphql, actions }) => {
 }
 ```
 
-Restart the development server and your pages will be created! An easy way to
-find new pages you create while developing is to go to a random path where
-Gatsby will helpfully show you a list of pages on the site. If you go to
-<http://localhost:8000/sdf>, you'll see the new pages you created.
+サーバーを再起動すれば、ページが作成されます！作成したページを見つける簡単な方法は、サイトに存在しないでたらめなパスへ移動することです。Gatsby がページのリストを表示してくれます。例えば <http://localhost:8000/sdf> に移動すれば、作成したページのリストが表示されます。
 
 ![new-pages](new-pages.png)
 
-Visit one of them and you see:
+そのどれかにアクセスすると、次のように表示されます。
 
 ![hello-world-blog-post](hello-world-blog-post.png)
 
-Which is a bit boring and not what you want. Now you can pull in data from your markdown post. Change
-`src/templates/blog-post.js` to:
+これだけでは少し退屈なページですね。 Markdown の投稿からデータを取得するために、 `src/templates/blog-post.js` を次のように変更します。
 
 ```jsx:title=src/templates/blog-post.js
 import React from "react"
@@ -332,16 +292,15 @@ export const query = graphql`
 // highlight-end
 ```
 
-And…
+そして…。
 
 ![blog-post](blog-post.png)
 
-Sweet!
+すばらしい！
 
-The last step is to link to your new pages from the index page.
+最後のステップは、index から作成したページにリンクすることです。
 
-Return to `src/pages/index.js`, query for your markdown slugs, and create
-links.
+`src/pages/index.js` に戻り、 Markdown のスラッグを取得し、リンクを作成します。
 
 ```jsx:title=src/pages/index.js
 import React from "react"
@@ -421,25 +380,21 @@ export const query = graphql`
 `
 ```
 
-And there you go! A working, albeit small, blog!
+よくできました！小さなブログですが、動作しています！
 
-## Challenge
+## チャレンジする
 
-Try playing more with the site. Try adding some more markdown files. Explore
-querying other data from the `MarkdownRemark` nodes and adding them to the
-front page or blog posts pages.
+作成したサイトでもっと遊んでみてください。さらに Markdown を追加してみてください。`MarkdownRemark`から他のデータを取得し、それらをフロントページや投稿ページに追加する方法を調べてください。
 
-In this part of the tutorial, you've learned the foundations of building with
-Gatsby's data layer. You've learned how to _source_ and _transform_ data using
-plugins, how to use GraphQL to _map_ data to pages, and then how to build _page
-template components_ where you query for data for each page.
+このパートでは、Gatsby のデータ層を使用した構築の基礎を学びました。プラグインを使用して**ソース**を**変換**する方法、GraphQL を使ってページデータを**マッピング**する方法、各ページデータを取得する**ページ**の**テンプレートコンポーネント**を構築する方法を学びました。
 
-## What's coming next?
+## 次は？
 
-Now that you've built a Gatsby site, where do you go next?
+あなたは Gatsby のサイトを構築しました。次はどうしますか？
 
-- Share your Gatsby site on Twitter and see what other people have created by searching for #gatsbytutorial! Make sure to mention @gatsbyjs in your Tweet and include the hashtag #gatsbytutorial :)
-- You could take a look at some [example sites](https://github.com/gatsbyjs/gatsby/tree/master/examples#gatsby-example-websites)
-- Explore more [plugins](/docs/plugins/)
-- See what [other people are building with Gatsby](/showcase/)
-- Check out the documentation on [Gatsby's APIs](/docs/api-specification/), [nodes](/docs/node-interface/), or [GraphQL](/docs/graphql-reference/)
+- Gatsby のサイトを Twitter で共有し、#gatsbytutorial で検索して、他の人が作成したサイトを見てみましょう！
+  ツイートには @gatsbyjs を記載して、#gatsbytutorial のハッシュタグを含めてください :)
+- いくつかの[サンプルページ](https://github.com/gatsbyjs/gatsby/tree/master/examples#gatsby-example-websites)を見ることができます。
+- [プラグイン](/docs/plugins/)を調べる
+- [Gatsby によって構築されたページ](/showcase/)を見る
+- [Gatsby の API](/docs/api-specification/)、[ノード](/docs/node-interface/)、[GraphQL](/docs/graphql-reference/)を調べる