From b9bd1b4cce3a318974316b2095342eb0ee4d7da8 Mon Sep 17 00:00:00 2001 From: grgr-dkrk Date: Fri, 17 Jan 2020 00:08:28 +0900 Subject: [PATCH 01/10] up --- docs/tutorial/part-seven/index.md | 107 +++++++++++++++++++++++++++--- 1 file changed, 97 insertions(+), 10 deletions(-) diff --git a/docs/tutorial/part-seven/index.md b/docs/tutorial/part-seven/index.md index d42ebabf2..8f9d181d6 100644 --- a/docs/tutorial/part-seven/index.md +++ b/docs/tutorial/part-seven/index.md @@ -1,17 +1,21 @@ --- -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. -## What's in this tutorial? +> このチュートリアルは、 Gatsby のデータ層についての解説のひとつです。チュートリアルを続ける前に、[パート 4](/tutorial/part-four/)、[パート 5](/tutorial/part-five/)、[パート 6](/tutorial/part-six/)を完了していることを確認してください。 + +## このチュートリアルは何ですか? 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 @@ -19,28 +23,43 @@ you use GraphQL to query your _data_ and _map_ the query results to _pages_—al 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. -Let's get started. +`src/pages`に React コンポーネントを設置することで、ページの作成を続けることができます。しかし、今回は**データ**から**プログラムで**ページを作成する方法を学びます。 Gatsby は多くの静的サイトジェネレーターのように、ファイルからページを作成することに限定されません。 Gatsby は GraphQL を使用して**データ**を取得し、ビルド時にクエリーの結果を**マッピング**できます。これはとても強力なアイディアです。このチュートリアルで、その意味と方法を調べます。 + +さっそく始めましょう。 -## Creating slugs for pages +## ページのスラッグの作成 -Creating new pages has two steps: +新しいページの作成には 2 つのステップがあります。 1. Generate the "path" or "slug" for the page. 2. Create the page. +3. ページの "path" か "slag" を生成する。 +4. ページを作成する。 + _**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. +そのため、ここでそれを行います。サイトのルートで、`gatsby-node.js`ファイルを作成し、次のように記述します。 + ```javascript:title=gatsby-node.js exports.onCreateNode = ({ node }) => { console.log(node.internal.type) @@ -49,14 +68,22 @@ exports.onCreateNode = ({ node }) => { 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 }) => { // highlight-start @@ -73,6 +100,10 @@ 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: +TODO +ページのスラッグを作成するためには、各 Markdown の名前が必要です。 `pandas-and-bananas.md` は `/pandas-and-bananas/` になります。しかし、どうすれば`MarkdownRemark`ノードからファイル名を取得できるのでしょうか?`File`ノードにはあなたが必要としているファイルの情報が含まれています。 +そのために、関数を再度変更します。 + ```javascript:title=gatsby-node.js // highlight-next-line exports.onCreateNode = ({ node, getNode }) => { @@ -88,12 +119,16 @@ 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 @@ -108,10 +143,14 @@ 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 @@ -119,6 +158,8 @@ 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)と呼ばれる関数を使用します。この関数を使用すると、他のプラグインにより作成されたノードに追加のフィールドを作成できます。 + ```javascript:title=gatsby-node.js const { createFilePath } = require(`gatsby-source-filesystem`) // highlight-next-line @@ -140,6 +181,8 @@ 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 { allMarkdownRemark { @@ -156,10 +199,16 @@ 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`) @@ -202,24 +251,38 @@ 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 +3. GraphQL のクエリーデータ +4. クエリーの結果をページにマップする + 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 からページを作成する最初のステップです。 +次に、todo です。 + ![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. +ページを作成するために、スラッグの他にもう 1 つ追加する必要があります。ページテンプレートコンポーネントです。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" import Layout from "../components/layout" @@ -233,7 +296,7 @@ export default () => { } ``` -Then update `gatsby-node.js` +`gatsby-node.js` を更新します。 ```javascript:title=gatsby-node.js const path = require(`path`) // highlight-line @@ -288,15 +351,21 @@ 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 , you'll see the new pages you created. +開発用サーバーを再起動すると、ページが作成されます!開発中に作成したページを見つける簡単な方法は、Gatsby がサイトのページリストを表示してくれるランダムなパスに移動することです。 に移動すると、作成した新しいページが表示されます。 + ![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" import { graphql } from "gatsby" // highlight-line @@ -332,17 +401,21 @@ 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" import { css } from "@emotion/core" @@ -423,23 +496,37 @@ 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. -## What's coming next? +このパートでは、Gatsby のデータ層で構築する基礎を学びました。*ソース*とプラグインを使用して*変換*する方法、GraphQL  を使ってページのデータを*マップ*する方法、各ページのデータを取得する*ページ*テンプレートコンポーネントを構築する方法を学びました。 + +## 次は? 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 で検索して他の人が作成したものを見てみましょう! +- あなたはいくつかの[サンプルページ](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/)を調べる From 2f26ccb756add9bdc5a3ca525a1d50dacb791e73 Mon Sep 17 00:00:00 2001 From: grgr-dkrk Date: Fri, 17 Jan 2020 13:26:11 +0900 Subject: [PATCH 02/10] fix --- docs/tutorial/part-seven/index.md | 52 +++++++++++++++---------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/docs/tutorial/part-seven/index.md b/docs/tutorial/part-seven/index.md index 8f9d181d6..6dbbf8881 100644 --- a/docs/tutorial/part-seven/index.md +++ b/docs/tutorial/part-seven/index.md @@ -1,12 +1,12 @@ --- -title: プログラムでデータからページを作成する +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/)を完了していることを確認してください。 +> このチュートリアルは Gatsby のデータ層に関する解説の一部です。先に、[パート 4](/tutorial/part-four/)、[パート 5](/tutorial/part-five/)、[パート 6](/tutorial/part-six/)の内容を確認してください。 ## このチュートリアルは何ですか? @@ -14,7 +14,7 @@ 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 を表示するページが必要です。 +前回は 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_ @@ -29,7 +29,7 @@ ways to use it for the remainder of this part of the tutorial. ## ページのスラッグの作成 -新しいページの作成には 2 つのステップがあります。 +新しいページの作成には 2 つの手順があります。 1. Generate the "path" or "slug" for the page. 2. Create the page. @@ -58,7 +58,7 @@ with the name of the API from `gatsby-node.js`. 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. -そのため、ここでそれを行います。サイトのルートで、`gatsby-node.js`ファイルを作成し、次のように記述します。 +サイトのルートフォルダーに、`gatsby-node.js`を作成し、次のように記述します。 ```javascript:title=gatsby-node.js exports.onCreateNode = ({ node }) => { @@ -82,7 +82,7 @@ nodes. Change your function so it now only logs `MarkdownRemark` nodes. -`MarkdownRemark`ノードのみログを記録するように、関数を変更します。 +`MarkdownRemark`ノードだけのログを記録するように、関数を変更します。 ```javascript:title=gatsby-node.js exports.onCreateNode = ({ node }) => { @@ -100,7 +100,6 @@ 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: -TODO ページのスラッグを作成するためには、各 Markdown の名前が必要です。 `pandas-and-bananas.md` は `/pandas-and-bananas/` になります。しかし、どうすれば`MarkdownRemark`ノードからファイル名を取得できるのでしょうか?`File`ノードにはあなたが必要としているファイルの情報が含まれています。 そのために、関数を再度変更します。 @@ -119,7 +118,7 @@ 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 の相対パスがターミナルの画面に表示されます。 +開発用サーバーを再起動すると、2 つの Markdown の相対パスがターミナルに表示されます。 ![markdown-relative-path](markdown-relative-path.png) @@ -149,7 +148,7 @@ 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 でクエリーを実行できるので、強力です。そのため、ページを作成する時に、スラッグを取得するのが簡単です。 +これで新しいスラッグを `MarkdownRemark` ノードに直接追加できます。これは、 後から GraphQL でクエリーを実行できるので、強力です。そのため、ページを作成する時、スラッグを簡単に取得できます。 To do so, you'll use a function passed to your API implementation called [`createNodeField`](/docs/actions/#createNodeField). This function @@ -181,7 +180,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 クエリーを実行し、新しいスラッグを確認します。 +サーバーを再起動して、GraphiQL を開くか更新します。次に、以下の GraphQL クエリーを実行して、新しいスラッグを確認します。 ```graphql { @@ -199,7 +198,7 @@ GraphQL query to see your new slugs. Now that the slugs are created, you can create the pages. -スラッグが作成されたので、ページを作成できます。 +スラッグが作成され、ページを作成できます。 ## Creating pages @@ -255,20 +254,20 @@ pages. 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 -3. GraphQL のクエリーデータ -4. クエリーの結果をページにマップする +3. GraphQL でデータを取得する +4. 結果をページにマッピングする 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 からページを作成する最初のステップです。 -次に、todo です。 +それから。 ![query-markdown-slugs](query-markdown-slugs.png) @@ -276,12 +275,12 @@ 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. -ページを作成するために、スラッグの他にもう 1 つ追加する必要があります。ページテンプレートコンポーネントです。Gatsby の全てのように、プログラムされるページは React コンポーネントによって強化されます。ページを作成する時、使用するコンポーネントを指定する必要があります。 +ページを作成するためには、スラッグの他にもう 1 つ追加する必要があります。ページテンプレートコンポーネントです。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` という名前のファイルを作成して以下を追加します。 +`src/templates`ディレクトリーを追加し、`src/templates/blog-post.js`を作成して以下を追加します。 ```jsx:title=src/templates/blog-post.js import React from "react" @@ -296,7 +295,7 @@ export default () => { } ``` -`gatsby-node.js` を更新します。 +`gatsby-node.js`を更新します。 ```javascript:title=gatsby-node.js const path = require(`path`) // highlight-line @@ -351,20 +350,20 @@ 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 , you'll see the new pages you created. -開発用サーバーを再起動すると、ページが作成されます!開発中に作成したページを見つける簡単な方法は、Gatsby がサイトのページリストを表示してくれるランダムなパスに移動することです。 に移動すると、作成した新しいページが表示されます。 +サーバーを再起動すると、ページが作成されました!開発中に作成したページを見つける簡単な方法は、Gatsby がサイトのページリストを表示してくれるランダムなパスに移動することです。 に移動すると、作成した新しいページが表示されます。 ![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` を以下のように変更します。 +少し退屈で、あなたが望むものではありません。 Markdown の投稿からデータを取得できます。 `src/templates/blog-post.js` を次のように変更します。 ```jsx:title=src/templates/blog-post.js import React from "react" @@ -511,13 +510,13 @@ 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  を使ってページのデータを*マップ*する方法、各ページのデータを取得する*ページ*テンプレートコンポーネントを構築する方法を学びました。 +このパートでは、Gatsby のデータ層で構築する基礎を学びました。**ソース**とプラグインを使用して**変換**する方法、GraphQL を使ってページのデータを**マッピング**する方法、各ページのデータを取得する**ページ**テンプレート**コンポーネント**を構築する方法を学びました。 ## 次は? Now that you've built a Gatsby site, where do you go next? -あなたは Gatsby のサイトを構築しました。次はどこへ行きますか? +あなたは 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) @@ -525,8 +524,9 @@ Now that you've built a Gatsby site, where do you go next? - 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 で検索して他の人が作成したものを見てみましょう! -- あなたはいくつかの[サンプルページ](https://github.com/gatsbyjs/gatsby/tree/master/examples#gatsby-example-websites)を見ることができます。 -- より多くの[プラグイン](/docs/plugins/)を調べる +- 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/)を調べる From 83794b891439f0948c08388af1f26d231d3a99b5 Mon Sep 17 00:00:00 2001 From: grgr-dkrk Date: Sat, 18 Jan 2020 21:46:08 +0900 Subject: [PATCH 03/10] fix --- docs/tutorial/part-seven/index.md | 204 ++++++------------------------ 1 file changed, 36 insertions(+), 168 deletions(-) diff --git a/docs/tutorial/part-seven/index.md b/docs/tutorial/part-seven/index.md index 6dbbf8881..5372651dd 100644 --- a/docs/tutorial/part-seven/index.md +++ b/docs/tutorial/part-seven/index.md @@ -4,59 +4,30 @@ 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/)の内容を確認してください。 ## このチュートリアルは何ですか? -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. +前回では Markdown を取得して、ブログ投稿のタイトルと抜粋のリストを作成し、すばらしい index ページを作成しました。しかし、抜粋の表示だけではなく、実際の Markdown を表示するページが必要です。 -`src/pages`に React コンポーネントを設置することで、ページの作成を続けることができます。しかし、今回は**データ**から**プログラムで**ページを作成する方法を学びます。 Gatsby は多くの静的サイトジェネレーターのように、ファイルからページを作成することに限定されません。 Gatsby は GraphQL を使用して**データ**を取得し、ビルド時にクエリーの結果を**マッピング**できます。これはとても強力なアイディアです。このチュートリアルで、その意味と方法を調べます。 +`src/pages`に React コンポーネントを設置することで、ページの作成を続けることができますが、今回は**データ**から**プログラムで**ページを作成する方法を学びます。 Gatsby は多くの静的サイトジェネレーターのように、ページの作成をファイルに*限定しません*。 Gatsby は GraphQL を使用して**データ**を取得し、ビルド時にクエリの結果を**マッピング**できます。これはとても強力なアイディアです。このチュートリアルで、その意味と実装の手順を調べます。 さっそく始めましょう。 ## ページのスラッグの作成 -新しいページの作成には 2 つの手順があります。 - -1. Generate the "path" or "slug" for the page. -2. Create the page. - -3. ページの "path" か "slag" を生成する。 -4. ページを作成する。 +ページの作成には 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._ +1. ページのパスかスラッグを生成する。 +2. ページを作成する。 -_**注**: 多くのデータソースは、コンテンツのスラッグやパスを直接提供します - それらを提供するシステム(CMS など)で作業をする場合は、 Markdown のように自分でスラッグを作成する必要はありません。_ +_**注**: 多くのデータソースは、コンテンツのスラッグやパスを直接提供します。それらを提供するシステム(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 を学びます。: +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. +私達は、Gatsby の API をシンプルに実装できるようベストを尽くします。API を実装するには、`gatsby-node.js`で、 API の名前を用いた関数をエクスポートします。 サイトのルートフォルダーに、`gatsby-node.js`を作成し、次のように記述します。 @@ -66,23 +37,13 @@ exports.onCreateNode = ({ node }) => { } ``` -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. +`onCreateNode`関数は、新しいノードが作成(または更新)されたるたびに Gatsby によって呼び出されます。 -開発用のサーバーを停止し、再起動します。すると、多くのノードがターミナルのコンソールに記録されます。 +開発用のサーバーを再起動します。すると、多数のノードがターミナルのコンソールに記録されます。 -In the next section, you will use this API to add slugs for your Markdown pages to `MarkdownRemark` -nodes. +次は、この API を使用して、`MarkdownRemark`ノードに Markdown のスラッグを追加します。 -次のセクションでは、この API を使用して、`MarkdownRemark`ノードに Markdown のスラッグを追加します。 - -Change your function so it now only logs `MarkdownRemark` nodes. - -`MarkdownRemark`ノードだけのログを記録するように、関数を変更します。 +`MarkdownRemark`ノードだけのログを記録するように、関数の処理を変更します。 ```javascript:title=gatsby-node.js exports.onCreateNode = ({ node }) => { @@ -94,14 +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`ノードにはあなたが必要としているファイルの情報が含まれています。 -そのために、関数を再度変更します。 +ページのスラッグを作成するために、各 Markdown のファイル名が必要です。 `pandas-and-bananas.md` なら `/pandas-and-bananas/` になります。しかし、どうやって`MarkdownRemark`ノードからファイル名を取得するのでしょうか?`File`ノードには、あなたが必要としているファイルの情報が含まれているので、グラフを**親の**`File`ノードまで**辿る**必要があります。それを行うために、関数を再度変更します。 ```javascript:title=gatsby-node.js // highlight-next-line @@ -115,18 +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 の相対パスがターミナルに表示されます。 +サーバーを再起動すると、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` プラグインにはスラッグを作成する関数が付属されているので、それを使用しましょう。 +次に、スラッグを作成する必要があります。ファイル名からスラッグを作成するロジックは複雑になりがちです。`gatsby-source-filesystem` プラグインにはスラッグを作成する関数が付属されているので、それを使用しましょう。 ```javascript:title=gatsby-node.js const { createFilePath } = require(`gatsby-source-filesystem`) // highlight-line @@ -138,26 +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 つのスラッグがターミナルに表示されます。 -この関数はスラッグの作成とともに、 親の`File`ノードの探索を処理します。開発用サーバーを再起動すると。Markdown ごとに 1 つずつ、2 つのスラッグがターミナルに表示されます。 +これで新しいスラッグを `MarkdownRemark` ノードに直接追加できます。これは、ノードに追加したデータを後から GraphQL で取得できるので、強力です。新しくページを作成する時に、スラッグを簡単に取得できます。 -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)と呼ばれる関数を使用します。この関数を使用すると、他のプラグインにより作成されたノードに追加のフィールドを作成できます。 +そのためには、[`createNodeField`](/docs/actions/#createNodeField)と呼ばれる関数を使用します。この関数を使用すると、他のプラグインにより作成されたノードに、追加のフィールドを作成できます。ノードを変更できるのは元の作成者のみです。他のプラグイン(`gatsby-node.js`を含む)は、フィールドを追加するためにこの関数を用いる必要があります。 ```javascript:title=gatsby-node.js const { createFilePath } = require(`gatsby-source-filesystem`) @@ -177,10 +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 クエリーを実行して、新しいスラッグを確認します。 +サーバーを再起動して、GraphiQL を開くか更新します。次に、以下の GraphQL クエリを実行して、新しいスラッグを確認します。 ```graphql { @@ -196,16 +125,10 @@ 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 @@ -246,41 +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: +プラグインがページを追加できるように Gatsby が呼びだす [`createPages`](/docs/node-apis/#createPages) API を追加しました。 -冒頭で述べたように、プログラムでページを作成するステップは次の通りです。 +チュートリアルの冒頭で述べたように、プログラムでページを作成する手順は次の通りです。 -1. Query data with GraphQL -2. Map the query results to pages +1. GraphQL でデータを取得する +2. 結果をページにマッピングする -3. GraphQL でデータを取得する -4. 結果をページにマッピングする - -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 からページを作成する最初のステップです。 -それから。 +上記のコードは、`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. - -ページを作成するためには、スラッグの他にもう 1 つ追加する必要があります。ページテンプレートコンポーネントです。Gatsby の他のページと同じく、プログラムされるページは React コンポーネントによって強化されます。ページを作成する時、使用するコンポーネントを指定する必要があります。 +ページを作成するためには、スラッグの他に、ページのテンプレートコンポーネントを追加する必要があります。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`を作成して以下を追加します。 +`src/templates`ディレクトリーを追加し、`src/templates/blog-post.js`を作成して、以下を追加します。 ```jsx:title=src/templates/blog-post.js import React from "react" @@ -345,25 +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 -, you'll see the new pages you created. - -サーバーを再起動すると、ページが作成されました!開発中に作成したページを見つける簡単な方法は、Gatsby がサイトのページリストを表示してくれるランダムなパスに移動することです。 に移動すると、作成した新しいページが表示されます。 +サーバーを再起動すれば、ページが作成されます!作成したページを見つける簡単な方法は、サイトに存在しないでたらめなパスへ移動することです。Gatsby がページのリストを表示してくれます。例えばに移動すれば、作成したページのリストが表示されます。 ![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` を次のように変更します。 +これは少し退屈で、あなたが望むものではありません。 Markdown の投稿からデータを取得するために、 `src/templates/blog-post.js` を次のように変更します。 ```jsx:title=src/templates/blog-post.js import React from "react" @@ -406,12 +298,7 @@ export const query = graphql` すばらしい! -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. +最後のステップは、index から作成したページにリンクすることです。 `src/pages/index.js` に戻り、 Markdown のスラッグを取得し、リンクを作成します。 @@ -493,39 +380,20 @@ export const query = graphql` ` ``` -And there you go! A working, albeit small, blog! - -そして、それを開きます! 小さなブログですが、動作します! +それでは、移動してみましょう! 小さなブログですが、動作しています! -## チャレンジ +## チャレンジする -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`から他のデータを取得し、それらをフロントページや投稿ページに追加する方法を調べてください。 -作成したサイトでもっと遊んでみてください。さらに 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 を使ってページのデータを**マッピング**する方法、各ページのデータを取得する**ページ**テンプレート**コンポーネント**を構築する方法を学びました。 +このパートでは、Gatsby のデータ層を使用した構築の基礎を学びました。プラグインを使用して**ソース**を**変換**する方法、GraphQL を使ってページデータを**マッピング**する方法、各ページデータを取得する**ページ**の**テンプレートコンポーネント**を構築する方法を学びました。 ## 次は? -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  のハッシュタグを含めてください :) + ツイートには @gatsbyjs を記載して、 #gatsbytutorial  のハッシュタグを含めてください :) - いくつかの[サンプルページ](https://github.com/gatsbyjs/gatsby/tree/master/examples#gatsby-example-websites)を見ることができます。 - [プラグイン](/docs/plugins/)を調べる - [Gatsby によって構築されたページ](/showcase/)を見る From e8e7b680cfc97c485025c18a391a63ff730098bd Mon Sep 17 00:00:00 2001 From: grgr-dkrk Date: Sun, 19 Jan 2020 18:46:39 +0900 Subject: [PATCH 04/10] fix --- docs/tutorial/part-seven/index.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/tutorial/part-seven/index.md b/docs/tutorial/part-seven/index.md index 5372651dd..5197b91f7 100644 --- a/docs/tutorial/part-seven/index.md +++ b/docs/tutorial/part-seven/index.md @@ -10,7 +10,7 @@ disableTableOfContents: true 前回では Markdown を取得して、ブログ投稿のタイトルと抜粋のリストを作成し、すばらしい index ページを作成しました。しかし、抜粋の表示だけではなく、実際の Markdown を表示するページが必要です。 -`src/pages`に React コンポーネントを設置することで、ページの作成を続けることができますが、今回は**データ**から**プログラムで**ページを作成する方法を学びます。 Gatsby は多くの静的サイトジェネレーターのように、ページの作成をファイルに*限定しません*。 Gatsby は GraphQL を使用して**データ**を取得し、ビルド時にクエリの結果を**マッピング**できます。これはとても強力なアイディアです。このチュートリアルで、その意味と実装の手順を調べます。 +`src/pages`に React コンポーネントを設置することで、ページの作成を続けることができますが、今回は**データ**から**プログラムで**ページを作成する方法を学びます。 Gatsby は多くの静的サイトジェネレーターのように、ページの作成をファイルに**限定しません**。 Gatsby は GraphQL を使用して**データ**を取得し、ビルド時にクエリの結果を**マッピング**できます。これはとても強力なアイディアです。このチュートリアルで、その意味と実装の手順を掘り下げていきます。 さっそく始めましょう。 @@ -21,7 +21,7 @@ disableTableOfContents: true 1. ページのパスかスラッグを生成する。 2. ページを作成する。 -_**注**: 多くのデータソースは、コンテンツのスラッグやパスを直接提供します。それらを提供するシステム(CMS など)で作業をする場合は、 Markdown のように自分でスラッグを作成する必要はありません。_ +_**ヒント**: 多くのデータソースは、コンテンツのスラッグやパスを直接提供します。それらを提供するシステム(CMS など)で作業をする場合は、 Markdown のように自分でスラッグを作成する必要はありません。_ Markdown のページを作成するために、2 つの Gatsby API を学びます。 [`onCreateNode`](/docs/node-apis/#onCreateNode) と @@ -55,7 +55,7 @@ exports.onCreateNode = ({ node }) => { } ``` -ページのスラッグを作成するために、各 Markdown のファイル名が必要です。 `pandas-and-bananas.md` なら `/pandas-and-bananas/` になります。しかし、どうやって`MarkdownRemark`ノードからファイル名を取得するのでしょうか?`File`ノードには、あなたが必要としているファイルの情報が含まれているので、グラフを**親の**`File`ノードまで**辿る**必要があります。それを行うために、関数を再度変更します。 +ページのスラッグを作成するために、各 Markdown のファイル名が必要です。`pandas-and-bananas.md` なら `/pandas-and-bananas/` になります。しかし、どうやって `MarkdownRemark` ノードからファイル名を取得するのでしょうか?`File` ノードには、あなたが必要としているファイルの情報が含まれているので、ノードのつながりから**親の**`File` ノードまで**辿る**必要があります。それを行うために、関数を再度変更します。 ```javascript:title=gatsby-node.js // highlight-next-line @@ -89,7 +89,7 @@ exports.onCreateNode = ({ node, getNode }) => { これで新しいスラッグを `MarkdownRemark` ノードに直接追加できます。これは、ノードに追加したデータを後から GraphQL で取得できるので、強力です。新しくページを作成する時に、スラッグを簡単に取得できます。 -そのためには、[`createNodeField`](/docs/actions/#createNodeField)と呼ばれる関数を使用します。この関数を使用すると、他のプラグインにより作成されたノードに、追加のフィールドを作成できます。ノードを変更できるのは元の作成者のみです。他のプラグイン(`gatsby-node.js`を含む)は、フィールドを追加するためにこの関数を用いる必要があります。 +そのためには、[`createNodeField`](/docs/actions/#createNodeField) と呼ばれる関数を使用します。この関数を使用すると、他のプラグインにより作成されたノードに、追加のフィールドを作成できます。ノードを変更できるのは元の作成者のみです。他のプラグイン(`gatsby-node.js`を含む)は、フィールドを追加するためにこの関数を用いる必要があります。 ```javascript:title=gatsby-node.js const { createFilePath } = require(`gatsby-source-filesystem`) @@ -173,8 +173,8 @@ exports.createPages = async ({ graphql, actions }) => { チュートリアルの冒頭で述べたように、プログラムでページを作成する手順は次の通りです。 -1. GraphQL でデータを取得する -2. 結果をページにマッピングする +1. GraphQL でデータを取得 +2. 結果をページにマッピング 上記のコードは、`graphql` 関数を使用して Markdown のスラッグを取得するため、 Markdown からページを作成する最初のステップです。これで、次のような取得結果が出力されます。 @@ -182,7 +182,7 @@ exports.createPages = async ({ graphql, actions }) => { ページを作成するためには、スラッグの他に、ページのテンプレートコンポーネントを追加する必要があります。Gatsby の他のページと同様に、プログラムされるページは React コンポーネントによって動作します。ページを作成する時には、使用するコンポーネントを指定する必要があります。 -`src/templates`ディレクトリーを追加し、`src/templates/blog-post.js`を作成して、以下を追加します。 +`src/templates` ディレクトリーを追加し、`src/templates/blog-post.js` を作成して、以下を追加します。 ```jsx:title=src/templates/blog-post.js import React from "react" @@ -247,7 +247,7 @@ exports.createPages = async ({ graphql, actions }) => { } ``` -サーバーを再起動すれば、ページが作成されます!作成したページを見つける簡単な方法は、サイトに存在しないでたらめなパスへ移動することです。Gatsby がページのリストを表示してくれます。例えばに移動すれば、作成したページのリストが表示されます。 +サーバーを再起動すれば、ページが作成されます!作成したページを見つける簡単な方法は、サイトに存在しないでたらめなパスへ移動することです。Gatsby がページのリストを表示してくれます。例えば に移動すれば、作成したページのリストが表示されます。 ![new-pages](new-pages.png) @@ -380,7 +380,7 @@ export const query = graphql` ` ``` -それでは、移動してみましょう! 小さなブログですが、動作しています! +よくできました!小さなブログですが、動作しています! ## チャレンジする From a141999a9301f8785b2b50eaa7610493c315c192 Mon Sep 17 00:00:00 2001 From: grgr-dkrk Date: Wed, 22 Jan 2020 12:38:41 +0900 Subject: [PATCH 05/10] fix --- docs/tutorial/part-seven/index.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/tutorial/part-seven/index.md b/docs/tutorial/part-seven/index.md index 5197b91f7..4d2ba6858 100644 --- a/docs/tutorial/part-seven/index.md +++ b/docs/tutorial/part-seven/index.md @@ -29,7 +29,7 @@ Markdown のページを作成するために、2 つの Gatsby API を学びま 私達は、Gatsby の API をシンプルに実装できるようベストを尽くします。API を実装するには、`gatsby-node.js`で、 API の名前を用いた関数をエクスポートします。 -サイトのルートフォルダーに、`gatsby-node.js`を作成し、次のように記述します。 +試しに API を実装してみましょう。サイトのルートフォルダーに、`gatsby-node.js`を作成し、次のように記述してください。 ```javascript:title=gatsby-node.js exports.onCreateNode = ({ node }) => { @@ -37,13 +37,13 @@ exports.onCreateNode = ({ node }) => { } ``` -`onCreateNode`関数は、新しいノードが作成(または更新)されたるたびに Gatsby によって呼び出されます。 +`onCreateNode` 関数は、新しいノードが作成(または更新)されたるたびに Gatsby によって呼び出されます。 -開発用のサーバーを再起動します。すると、多数のノードがターミナルのコンソールに記録されます。 +開発用のサーバーを再起動してください。すると、多数のノードがターミナルのコンソールに記録されます。 次は、この API を使用して、`MarkdownRemark`ノードに Markdown のスラッグを追加します。 -`MarkdownRemark`ノードだけのログを記録するように、関数の処理を変更します。 +`MarkdownRemark` ノードだけのログを記録するように、関数の処理を変更します。 ```javascript:title=gatsby-node.js exports.onCreateNode = ({ node }) => { @@ -85,7 +85,7 @@ exports.onCreateNode = ({ node, getNode }) => { } ``` -この関数はスラッグの作成とともに、 親の`File`ノードの探索を処理します。サーバーを再起動すると、Markdown ごとに 1 つずつ、計 2 つのスラッグがターミナルに表示されます。 +この関数はスラッグの作成とともに、 親の `File` ノードの探索を処理します。サーバーを再起動すると、Markdown ごとに 1 つずつ、計 2 つのスラッグがターミナルに表示されます。 これで新しいスラッグを `MarkdownRemark` ノードに直接追加できます。これは、ノードに追加したデータを後から GraphQL で取得できるので、強力です。新しくページを作成する時に、スラッグを簡単に取得できます。 @@ -197,7 +197,7 @@ export default () => { } ``` -`gatsby-node.js`を更新します。 +`gatsby-node.js` を更新します。 ```javascript:title=gatsby-node.js const path = require(`path`) // highlight-line @@ -392,8 +392,8 @@ export const query = graphql` あなたは Gatsby のサイトを構築しました。次はどうしますか? -- Gatsby のサイトを Twitter で共有し、 #gatsbytutorial で検索して、他の人が作成したサイトを見てみましょう! - ツイートには @gatsbyjs を記載して、 #gatsbytutorial  のハッシュタグを含めてください :) +- Gatsby のサイトを Twitter で共有し、#gatsbytutorial で検索して、他の人が作成したサイトを見てみましょう! + ツイートには @gatsbyjs を記載して、#gatsbytutorial のハッシュタグを含めてください :) - いくつかの[サンプルページ](https://github.com/gatsbyjs/gatsby/tree/master/examples#gatsby-example-websites)を見ることができます。 - [プラグイン](/docs/plugins/)を調べる - [Gatsby によって構築されたページ](/showcase/)を見る From 2c3fd7403291c417638d81df173f1bb6952cb556 Mon Sep 17 00:00:00 2001 From: grgr-dkrk Date: Thu, 23 Jan 2020 12:50:03 +0900 Subject: [PATCH 06/10] fix --- docs/tutorial/part-seven/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/part-seven/index.md b/docs/tutorial/part-seven/index.md index 4d2ba6858..f4ffaf3e0 100644 --- a/docs/tutorial/part-seven/index.md +++ b/docs/tutorial/part-seven/index.md @@ -255,7 +255,7 @@ exports.createPages = async ({ graphql, actions }) => { ![hello-world-blog-post](hello-world-blog-post.png) -これは少し退屈で、あなたが望むものではありません。 Markdown の投稿からデータを取得するために、 `src/templates/blog-post.js` を次のように変更します。 +これだけでは少し退屈なページですね。 Markdown の投稿からデータを取得するために、 `src/templates/blog-post.js` を次のように変更します。 ```jsx:title=src/templates/blog-post.js import React from "react" From 77beb6b3c61dd2dad721af6cc4e2b00559c857d0 Mon Sep 17 00:00:00 2001 From: grgr-dkrk Date: Thu, 23 Jan 2020 17:54:32 +0900 Subject: [PATCH 07/10] fix --- docs/tutorial/part-seven/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/tutorial/part-seven/index.md b/docs/tutorial/part-seven/index.md index f4ffaf3e0..11941b57f 100644 --- a/docs/tutorial/part-seven/index.md +++ b/docs/tutorial/part-seven/index.md @@ -27,7 +27,7 @@ Markdown のページを作成するために、2 つの Gatsby API を学びま [`onCreateNode`](/docs/node-apis/#onCreateNode) と [`createPages`](/docs/node-apis/#createPages) です。この 2 つは、多くのサイトやプラグインで使用されている主力の API です。 -私達は、Gatsby の API をシンプルに実装できるようベストを尽くします。API を実装するには、`gatsby-node.js`で、 API の名前を用いた関数をエクスポートします。 +私たちは Gatsby API をシンプルに実装できるようベストを尽くします。API を使って実装するには、`gatsby-node.js` で API 関数名をエクスポートします。 試しに API を実装してみましょう。サイトのルートフォルダーに、`gatsby-node.js`を作成し、次のように記述してください。 @@ -89,7 +89,7 @@ exports.onCreateNode = ({ node, getNode }) => { これで新しいスラッグを `MarkdownRemark` ノードに直接追加できます。これは、ノードに追加したデータを後から GraphQL で取得できるので、強力です。新しくページを作成する時に、スラッグを簡単に取得できます。 -そのためには、[`createNodeField`](/docs/actions/#createNodeField) と呼ばれる関数を使用します。この関数を使用すると、他のプラグインにより作成されたノードに、追加のフィールドを作成できます。ノードを変更できるのは元の作成者のみです。他のプラグイン(`gatsby-node.js`を含む)は、フィールドを追加するためにこの関数を用いる必要があります。 +そのためには、[`createNodeField`](/docs/actions/#createNodeField) と呼ばれる関数を使用します。この関数を使用すると、他のプラグインにより作成されたノードに、追加のフィールドを作成できます。ノードを変更できるのは元の作成者のみなので、他のプラグイン(`gatsby-node.js`を含む)は、フィールドを追加するためにこの関数を用いる必要があります。 ```javascript:title=gatsby-node.js const { createFilePath } = require(`gatsby-source-filesystem`) From 44580932f17cf318b269a9fe60da436e88dd2eb9 Mon Sep 17 00:00:00 2001 From: grgr-dkrk Date: Fri, 24 Jan 2020 18:39:17 +0900 Subject: [PATCH 08/10] fix --- docs/tutorial/part-seven/index.md | 42 +++++++++++++++---------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/docs/tutorial/part-seven/index.md b/docs/tutorial/part-seven/index.md index 11941b57f..1aff74eeb 100644 --- a/docs/tutorial/part-seven/index.md +++ b/docs/tutorial/part-seven/index.md @@ -1,5 +1,5 @@ --- -title: データからプログラムによるページを作成する +title: プログラムでデータからページを生成する typora-copy-images-to: ./ disableTableOfContents: true --- @@ -8,22 +8,22 @@ disableTableOfContents: true ## このチュートリアルは何ですか? -前回では Markdown を取得して、ブログ投稿のタイトルと抜粋のリストを作成し、すばらしい index ページを作成しました。しかし、抜粋の表示だけではなく、実際の Markdown を表示するページが必要です。 +前回では Markdown を取得して、ブログ投稿のタイトルと抜粋のリストを生成し、すばらしい index ページを作成しました。しかし、抜粋の表示だけではなく、実際の Markdown を表示するページが必要です。 -`src/pages`に React コンポーネントを設置することで、ページの作成を続けることができますが、今回は**データ**から**プログラムで**ページを作成する方法を学びます。 Gatsby は多くの静的サイトジェネレーターのように、ページの作成をファイルに**限定しません**。 Gatsby は GraphQL を使用して**データ**を取得し、ビルド時にクエリの結果を**マッピング**できます。これはとても強力なアイディアです。このチュートリアルで、その意味と実装の手順を掘り下げていきます。 +`src/pages`に React コンポーネントを設置することで、ページの作成を続けることができますが、今回は**データ**から**プログラムで**ページを生成する方法を学びます。 Gatsby は多くの静的サイトジェネレーターのように、ページの生成をファイルに**限定しません**。 Gatsby は GraphQL を使用して**データ**を取得し、ビルド時にクエリの結果を**マッピング**できます。これはとても強力なアイディアです。このチュートリアルで、その意味と実装の手順を掘り下げていきます。 さっそく始めましょう。 -## ページのスラッグの作成 +## ページのスラッグの生成 -ページの作成には 2 つの手順があります。 +ページの生成には 2 つの手順があります。 1. ページのパスかスラッグを生成する。 -2. ページを作成する。 +2. ページを生成する。 -_**ヒント**: 多くのデータソースは、コンテンツのスラッグやパスを直接提供します。それらを提供するシステム(CMS など)で作業をする場合は、 Markdown のように自分でスラッグを作成する必要はありません。_ +_**ヒント**: 多くのデータソースは、コンテンツのスラッグやパスを直接提供します。それらを提供するシステム(CMS など)で作業をする場合は、 Markdown のように自分でスラッグを生成する必要はありません。_ -Markdown のページを作成するために、2 つの Gatsby API を学びます。 +Markdown のページを生成するために、2 つの Gatsby API を学びます。 [`onCreateNode`](/docs/node-apis/#onCreateNode) と [`createPages`](/docs/node-apis/#createPages) です。この 2 つは、多くのサイトやプラグインで使用されている主力の API です。 @@ -37,7 +37,7 @@ exports.onCreateNode = ({ node }) => { } ``` -`onCreateNode` 関数は、新しいノードが作成(または更新)されたるたびに Gatsby によって呼び出されます。 +`onCreateNode` 関数は、新しいノードが生成(または更新)されたるたびに Gatsby によって呼び出されます。 開発用のサーバーを再起動してください。すると、多数のノードがターミナルのコンソールに記録されます。 @@ -55,7 +55,7 @@ exports.onCreateNode = ({ node }) => { } ``` -ページのスラッグを作成するために、各 Markdown のファイル名が必要です。`pandas-and-bananas.md` なら `/pandas-and-bananas/` になります。しかし、どうやって `MarkdownRemark` ノードからファイル名を取得するのでしょうか?`File` ノードには、あなたが必要としているファイルの情報が含まれているので、ノードのつながりから**親の**`File` ノードまで**辿る**必要があります。それを行うために、関数を再度変更します。 +ページのスラッグを生成するために、各 Markdown のファイル名が必要です。`pandas-and-bananas.md` なら `/pandas-and-bananas/` になります。しかし、どうやって `MarkdownRemark` ノードからファイル名を取得するのでしょうか?`File` ノードには、あなたが必要としているファイルの情報が含まれているので、ノードのつながりから**親の**`File` ノードまで**辿る**必要があります。それを行うために、関数を再度変更します。 ```javascript:title=gatsby-node.js // highlight-next-line @@ -73,7 +73,7 @@ exports.onCreateNode = ({ node, getNode }) => { ![markdown-relative-path](markdown-relative-path.png) -次に、スラッグを作成する必要があります。ファイル名からスラッグを作成するロジックは複雑になりがちです。`gatsby-source-filesystem` プラグインにはスラッグを作成する関数が付属されているので、それを使用しましょう。 +次に、スラッグを生成する必要があります。ファイル名からスラッグを生成するロジックは複雑になりがちです。`gatsby-source-filesystem` プラグインにはスラッグを生成する関数が付属されているので、それを使用しましょう。 ```javascript:title=gatsby-node.js const { createFilePath } = require(`gatsby-source-filesystem`) // highlight-line @@ -85,11 +85,11 @@ exports.onCreateNode = ({ node, getNode }) => { } ``` -この関数はスラッグの作成とともに、 親の `File` ノードの探索を処理します。サーバーを再起動すると、Markdown ごとに 1 つずつ、計 2 つのスラッグがターミナルに表示されます。 +この関数はスラッグの生成とともに、 親の `File` ノードの探索を処理します。サーバーを再起動すると、Markdown ごとに 1 つずつ、計 2 つのスラッグがターミナルに表示されます。 -これで新しいスラッグを `MarkdownRemark` ノードに直接追加できます。これは、ノードに追加したデータを後から GraphQL で取得できるので、強力です。新しくページを作成する時に、スラッグを簡単に取得できます。 +これで新しいスラッグを `MarkdownRemark` ノードに直接追加できます。これは、ノードに追加したデータを後から GraphQL で取得できるので、強力です。新しいページを生成する時に、スラッグを簡単に取得できます。 -そのためには、[`createNodeField`](/docs/actions/#createNodeField) と呼ばれる関数を使用します。この関数を使用すると、他のプラグインにより作成されたノードに、追加のフィールドを作成できます。ノードを変更できるのは元の作成者のみなので、他のプラグイン(`gatsby-node.js`を含む)は、フィールドを追加するためにこの関数を用いる必要があります。 +そのためには、[`createNodeField`](/docs/actions/#createNodeField) と呼ばれる関数を使用します。この関数を使用すると、他のプラグインにより生成されたノードに、フィールドを追加できます。ノードを変更できるのは元の作成者のみなので、他のプラグイン(`gatsby-node.js`を含む)は、フィールドを追加するためにこの関数を用いる必要があります。 ```javascript:title=gatsby-node.js const { createFilePath } = require(`gatsby-source-filesystem`) @@ -125,9 +125,9 @@ exports.onCreateNode = ({ node, getNode, actions }) => { } ``` -これでスラッグが作成され、ページを作成できます。 +これでスラッグが生成され、ページを生成できます。 -## ページを作成する +## ページを生成する `gatsby-node.js` ファイルに、以下を追加します。 @@ -171,16 +171,16 @@ exports.createPages = async ({ graphql, actions }) => { プラグインがページを追加できるように Gatsby が呼びだす [`createPages`](/docs/node-apis/#createPages) API を追加しました。 -チュートリアルの冒頭で述べたように、プログラムでページを作成する手順は次の通りです。 +チュートリアルの冒頭で述べたように、プログラムでページを生成する手順は次の通りです。 1. GraphQL でデータを取得 2. 結果をページにマッピング -上記のコードは、`graphql` 関数を使用して Markdown のスラッグを取得するため、 Markdown からページを作成する最初のステップです。これで、次のような取得結果が出力されます。 +上記のコードは、`graphql` 関数を使用して Markdown のスラッグを取得するため、 Markdown からページを生成する最初のステップです。これで、次のような取得結果が出力されます。 ![query-markdown-slugs](query-markdown-slugs.png) -ページを作成するためには、スラッグの他に、ページのテンプレートコンポーネントを追加する必要があります。Gatsby の他のページと同様に、プログラムされるページは React コンポーネントによって動作します。ページを作成する時には、使用するコンポーネントを指定する必要があります。 +ページを生成するためには、スラッグの他に、ページのテンプレートコンポーネントを追加する必要があります。Gatsby の他のページと同様に、プログラムされるページは React コンポーネントによって動作します。ページを生成する時には、使用するコンポーネントを指定する必要があります。 `src/templates` ディレクトリーを追加し、`src/templates/blog-post.js` を作成して、以下を追加します。 @@ -247,7 +247,7 @@ exports.createPages = async ({ graphql, actions }) => { } ``` -サーバーを再起動すれば、ページが作成されます!作成したページを見つける簡単な方法は、サイトに存在しないでたらめなパスへ移動することです。Gatsby がページのリストを表示してくれます。例えば に移動すれば、作成したページのリストが表示されます。 +サーバーを再起動すれば、ページが生成されます!生成されたページを見つける簡単な方法は、サイトに存在しないでたらめなパスへ移動することです。Gatsby がページのリストを表示してくれます。例えば に移動すれば、生成されたページのリストが表示されます。 ![new-pages](new-pages.png) @@ -298,7 +298,7 @@ export const query = graphql` すばらしい! -最後のステップは、index から作成したページにリンクすることです。 +最後のステップは、index から生成されたページにリンクすることです。 `src/pages/index.js` に戻り、 Markdown のスラッグを取得し、リンクを作成します。 From 1f41384e884e66f384d2b998b2212ce0b86b8a0c Mon Sep 17 00:00:00 2001 From: grgr-dkrk Date: Fri, 24 Jan 2020 18:46:26 +0900 Subject: [PATCH 09/10] fix --- docs/tutorial/part-seven/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/part-seven/index.md b/docs/tutorial/part-seven/index.md index 1aff74eeb..7fbb29407 100644 --- a/docs/tutorial/part-seven/index.md +++ b/docs/tutorial/part-seven/index.md @@ -10,7 +10,7 @@ disableTableOfContents: true 前回では Markdown を取得して、ブログ投稿のタイトルと抜粋のリストを生成し、すばらしい index ページを作成しました。しかし、抜粋の表示だけではなく、実際の Markdown を表示するページが必要です。 -`src/pages`に React コンポーネントを設置することで、ページの作成を続けることができますが、今回は**データ**から**プログラムで**ページを生成する方法を学びます。 Gatsby は多くの静的サイトジェネレーターのように、ページの生成をファイルに**限定しません**。 Gatsby は GraphQL を使用して**データ**を取得し、ビルド時にクエリの結果を**マッピング**できます。これはとても強力なアイディアです。このチュートリアルで、その意味と実装の手順を掘り下げていきます。 +`src/pages`に React コンポーネントを設置することで、ページの作成を続けることができますが、今回は**プログラムでデータ**からページを生成する方法を学びます。 Gatsby は多くの静的サイトジェネレーターのように、ページの生成をファイルに**限定しません**。 Gatsby は GraphQL を使用して**データ**を取得し、ビルド時にクエリの結果を**マッピング**できます。これはとても強力なアイディアです。このチュートリアルで、その意味と実装の手順を掘り下げていきます。 さっそく始めましょう。 From dab386ca2bb1dffe1dbac452e575937e9bf328c3 Mon Sep 17 00:00:00 2001 From: grgr-dkrk Date: Sun, 26 Jan 2020 13:33:55 +0900 Subject: [PATCH 10/10] fix --- docs/tutorial/part-seven/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/tutorial/part-seven/index.md b/docs/tutorial/part-seven/index.md index 7fbb29407..0bd3aba01 100644 --- a/docs/tutorial/part-seven/index.md +++ b/docs/tutorial/part-seven/index.md @@ -390,7 +390,7 @@ export const query = graphql` ## 次は? -あなたは Gatsby のサイトを構築しました。次はどうしますか? +無事、Gatsby のサイトを構築できましたね!次はどうしますか? - Gatsby のサイトを Twitter で共有し、#gatsbytutorial で検索して、他の人が作成したサイトを見てみましょう! ツイートには @gatsbyjs を記載して、#gatsbytutorial のハッシュタグを含めてください :)