From f5bb2ef0ae650e4f0e47bf2123ca2b6e33fe05b1 Mon Sep 17 00:00:00 2001 From: nzws Date: Tue, 21 Jan 2020 05:04:32 +0900 Subject: [PATCH 01/16] Translate docs/sourcing-content-from-json-or-yaml --- .../sourcing-content-from-json-or-yaml.md | 102 +++++++++--------- 1 file changed, 51 insertions(+), 51 deletions(-) diff --git a/docs/docs/sourcing-content-from-json-or-yaml.md b/docs/docs/sourcing-content-from-json-or-yaml.md index 470afe42c..ef4d36d7a 100644 --- a/docs/docs/sourcing-content-from-json-or-yaml.md +++ b/docs/docs/sourcing-content-from-json-or-yaml.md @@ -1,24 +1,24 @@ --- -title: Sourcing Content from JSON or YAML +title: JSON または YAML ファイルからデータを取得する --- -As you work with Gatsby, you might want to source data from a JSON or YAML file directly into a page or component. This guide will cover approaches for those techniques, as well as architecting a Gatsby site from a YAML file. +Gatsby では、JSON または YAML ファイルからデータを取得しページまたはコンポーネントで直接使用できます。このガイドでは、これらのやり方と YAML ファイルから Gatsby サイトを構築する方法について説明します。 -To follow along with the JSON or YAML data sourcing tips outlined in this guide, you can start by creating a new Gatsby site based on the official [hello world starter](https://github.com/gatsbyjs/gatsby-starter-hello-world). +このガイドで概説されている JSON または YAML からデータ取得をする方法に従うには、公式の [hello world スターター](https://github.com/gatsbyjs/gatsby-starter-hello-world) を使用して Gatsby サイトを作成することから始めます。 -Open up a terminal and run the following command: +ターミナルを開き、次のコマンドを実行します： ```bash gatsby new gatsby-YAML-JSON-at-buildtime https://github.com/gatsbyjs/gatsby-starter-hello-world ``` -## Directly import data with YAML +## YAML からデータを直接インポートする -This section starts with YAML data sourcing. If you want to see how to do it using JSON instead, jump to the [next section](#Directly-importing-data-with-JSON). +この項では YAML からデータを取得します。代わりに JSON を使用してインポートする方法を確認するには、 [次の項](#Directly-importing-data-with-JSON) に移動してください。 -### Add the YAML content +### YAML コンテンツを追加する -In your Gatsby project folder, create a directory called `content` and inside, add a file called `My-YAML-Content.yaml` with the following content: +Gatsby プロジェクトフォルダーで、`content` ディレクトリーを作成し、その中に次の内容を記述した `My-YAML-Content.yaml` ファイルを作成してください： ```yaml:title=content/My-YAML-Content.yaml title: YAML content used at build time with Gatsby @@ -42,11 +42,11 @@ content: - item: 111111 ``` -### Import YAML into the page component +### YAML をページコンポーネントにインポートする -Now that you have something you want to show, the only thing missing is to create a page that will consume the data. +表示したいデータができたので、あとはデータを表示するページを作るだけです。 -Add a new file called `yml-at-buildtime.js` inside the `pages` folder, with the following code: +`yml-at-buildtime.js` というページを `pages` というフォルダーの中に作成し、次のコードを記述してください： ```jsx:title=src/pages/yml-at-buildtime.js import React from "react" @@ -65,15 +65,15 @@ const YAMLbuildtime = () => ( export default YAMLbuildtime ``` -The above code imports YAML source data as an array, iterates over it with the `Array.map` method, and renders the data-filled markup through a functional stateless React component. +上記のコードは YAML データを配列としてインポートし、`Array.map`メソッドでそれを反復処理し、ファンクショナルステートレス React コンポーネントを使用してデータが埋められたマークアップをレンダリングします。 -## Directly import data with JSON +## JSON からデータを直接インポートする -In addition to (or instead of) sourcing from YAML, you can use JSON as a data source in a Gatsby site. +YAML からのデータに加えて（または、その代わりに）JSON を Gatsby サイトのデータソースとして使用できます。 -### Add the JSON content +### JSON コンテンツを追加する -In your Gatsby project folder, create a directory named `content` if it doesn't exist, and then add a new file inside called `My-JSON-Content.json` with the following content: +Gatsby プロジェクトフォルダーで、（存在しなければ）`content` ディレクトリーを作成し、その中に次の内容を記述した `My-JSON-Content.json` ファイルを作成してください： ```json:title=content/My-JSON-Content.json { @@ -95,11 +95,11 @@ In your Gatsby project folder, create a directory named `content` if it doesn't } ``` -### Import JSON into the page component +### JSON をページコンポーネントにインポートする -Now that you have JSON data that needs to be shown, all that's missing is a page to consume it. +表示したいデータができたので、あとはデータを表示するページを作るだけです。 -Add a new file called `json-at-buildtime.js` inside the `pages` folder with the following code: +`json-at-buildtime.js` というページを `pages` というフォルダーの中に作成し、次のコードを記述してください： ```jsx:title=src/pages/json-at-buildtime.js import React from "react" @@ -118,29 +118,29 @@ const JSONbuildtime = () => ( export default JSONbuildtime ``` -Similar to the YAML example above, this code snippet shows how to import a JSON file for sourcing data. When imported, the data can be iterated upon with the `Array.map` method and rendered in a React component. +上記の YAML サンプルと同様に、このコードはデータを取得するために JSON ファイルをインポートする方法を示しています。インポートすると、データを `Array.map`メソッドで反復処理し、React コンポーネントでレンダリングできます。 -Out of the box and without any extra configuration, the page will show content sourced from a JSON file. +追加設定なしで、ページに JSON ファイルからのコンテンツが表示されます。 -## Build a Gatsby site sourced from YAML +## YAML をソースとする Gatsby サイトを構築する -You can also build a fully functional Gatsby site with a page structure sourced from a YAML file. +YAML ファイルをソースとするページ構造を使用して、完全に機能する Gatsby サイトを構築することもできます。 -### Add necessary dependencies +### 必要な依存関係を追加する -For this example, you will need to add an extra dependency so that the file containing the site structure and its contents can be loaded and interpreted safely. +この例では、サイト構造とそのコンテンツを含むファイルを安全に読み込んで解釈できるように、依存関係を追加する必要があります。 -Open your terminal, navigate to the folder containing the Gatsby site, and issue the following command: +ターミナルを開き、Gatsby サイトのフォルダーに移動して、次のコマンドを実行します： ```bash npm install --save js-yaml ``` -This newly added package will be responsible for loading and parsing the YAML file safely. +この新しく追加されたパッケージは、YAML ファイルを安全に読み込んで解析する役割を果たします。 -### Add some content +### いくつかのコンテンツを追加する -Create a folder named `content` if it doesn't exist, and then add a new file inside called `index.yaml` with the following contents: +（存在しなければ）`content` ディレクトリーを作成し、その中に次の内容を記述した `index.yaml` ファイルを作成してください： ```yaml:title=content/index.yaml - path: "/page1" @@ -206,17 +206,17 @@ Create a folder named `content` if it doesn't exist, and then add a new file ins - to: "/page1" ``` -The code block above creates a YAML object in which: +上記のコードブロックは、次の YAML オブジェクトを作成します。 -- Each `path` is a page's endpoint (the relevant part of its URL). -- The `contents` list holds some data to be displayed. -- The `links` list holds some endpoints to other pages. +- それぞれの `path` がページのエンドポイントです。 (URL の関連部分） +- `contents` リストは表示されるデータを保持しています。 +- `links`　リストは他ページへのエンドポイントを保持しています。 -### Configure Gatsby pages +### Gatsby ページを設定する -Once the dynamic site structure and content exists, you need to tell Gatsby to generate the appropriate pages and display the contents for each one. +動的なサイト構造とコンテンツが準備できたら、Gatsby に適切なページを生成し、それぞれのコンテンツを表示するように指示する必要があります。 -If you don't already have one, create a `gatsby-node.js` file at the root of the project. Add the following code inside the file: +もし `gatsby-node.js` ファイルが無ければプロジェクトのルートに作成します。そして、次のコードを記述します： ```js:title=gatsby-node.js const fs = require("fs") @@ -237,18 +237,18 @@ exports.createPages = ({ actions }) => { } ``` -Breaking down this code excerpt into smaller parts: +このコードは何をしているのか解説します： -1. Import the `js-yaml` package you installed earlier. -2. Load the `index.yaml` file and parse the content. -3. Using Gatsby's [`createPage()` API](/docs/actions/#createPage), create some pages programmatically from the parsed file. -4. Use the `context` property to pass your data into the page as a special prop named `pageContext`, allowing it to be consumed. You can read more about `context` in [creating and modifying pages](/docs/creating-and-modifying-pages/). +1. 以前インストールした `js-yaml` パッケージをインポートします。 +2. `index.yaml` ファイルを読み込み、コンテンツを解析します。 +3. Gatsby の [`createPage()` API](/docs/actions/#createPage)を使用して、解析されたファイルからプログラムでいくつかのページを作成します。 +4. `context` プロパティを使用して、 `pageContext` という特別な prop としてデータをページに渡し、それを使用できるようにします。 `context`の詳細については [ページの作成と変更](/docs/creating-and-modifying-pages/) を参照してください。 -### Create a template +### テンプレートを作成する -To complete the process of rendering the sourced content, you'll need to create a template for producing dynamic pages from data. +ソースコンテンツのレンダリングプロセスを完了するには、データから動的ページを作成するためのテンプレートを作成する必要があります。 -To match the component referenced in `gatsby-config.js`, create a file called `basicTemplate.js` in the `src/templates/` folder and add the following: +`gatsby-config.js` で参照されるコンポーネントと一致させるには、`src/templates/` フォルダー内に `basicTemplate.js` というファイルを作成して次のコードを記述してください： ```jsx:title=src/templates/basicTemplate.js import React from "react" @@ -279,9 +279,9 @@ const basicTemplate = props => { export default basicTemplate ``` -### Join the pieces +### 部品を繋ぐ -After parsing a YAML file into data and configuring Gatsby to produce pages with a template, you should have the following file and folder structure: +YAML ファイルを解析し、Gatsby を設定してテンプレートでページを生成した後、次のファイルとフォルダーの構造が必要です： ```text |gatsby-YAML-JSON-at-buildtime @@ -293,10 +293,10 @@ After parsing a YAML file into data and configuring Gatsby to produce pages with - gatsby-node.js ``` -Running `gatsby develop` in the terminal and opening a browser window to you'll see a page with content that was sourced from a YAML file used to generate your site. +ターミナルで `gatsby develop` を実行し、ブラウザーで にアクセスすると、 サイトの生成に使用された YAML ファイルを元とするコンテンツを含んだページが表示されます。 -To make this work on your existing Gatsby site, you would need to: +これを既存の Gatsby サイトで機能させるには、次の物が必要です： -- Copy over the `gatsby-node.js` file contents: https://github.com/gatsbyjs/gatsby/blob/master/examples/using-gatsby-with-json-yaml/gatsby-node.js -- Create a basic template: https://github.com/gatsbyjs/gatsby/blob/master/examples/using-gatsby-with-json-yaml/src/templates/basicTemplate.js -- And grab the YAML file: https://github.com/gatsbyjs/gatsby/blob/master/examples/using-gatsby-with-json-yaml/content/index.yaml +- `gatsby-node.js` ファイルの内容をコピーします： https://github.com/gatsbyjs/gatsby/blob/master/examples/using-gatsby-with-json-yaml/gatsby-node.js +- ベーシックテンプレートを作成します： https://github.com/gatsbyjs/gatsby/blob/master/examples/using-gatsby-with-json-yaml/src/templates/basicTemplate.js +- YAML ファイルを取得します： https://github.com/gatsbyjs/gatsby/blob/master/examples/using-gatsby-with-json-yaml/content/index.yaml From 4c1fb590a507c089ec171e3400728c2779c0dc8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nzws=20/=20=E3=81=AD=E3=81=98=E3=82=8F=E3=81=95?= Date: Mon, 27 Jan 2020 02:07:09 +0900 Subject: [PATCH 02/16] Update docs/docs/sourcing-content-from-json-or-yaml.md Co-Authored-By: Jesse Katsumata --- docs/docs/sourcing-content-from-json-or-yaml.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/sourcing-content-from-json-or-yaml.md b/docs/docs/sourcing-content-from-json-or-yaml.md index ef4d36d7a..3b1d323bc 100644 --- a/docs/docs/sourcing-content-from-json-or-yaml.md +++ b/docs/docs/sourcing-content-from-json-or-yaml.md @@ -2,7 +2,7 @@ title: JSON または YAML ファイルからデータを取得する --- -Gatsby では、JSON または YAML ファイルからデータを取得しページまたはコンポーネントで直接使用できます。このガイドでは、これらのやり方と YAML ファイルから Gatsby サイトを構築する方法について説明します。 +Gatsby では、JSON または YAML ファイルからデータを取得し、ページまたはコンポーネントで直接使用できます。このガイドでは、これらのやり方と YAML ファイルから Gatsby サイトを構築する方法について説明します。 このガイドで概説されている JSON または YAML からデータ取得をする方法に従うには、公式の [hello world スターター](https://github.com/gatsbyjs/gatsby-starter-hello-world) を使用して Gatsby サイトを作成することから始めます。 From 3d5b4b31d7cc655823a0ea7e2f8ac7edac32394e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nzws=20/=20=E3=81=AD=E3=81=98=E3=82=8F=E3=81=95?= Date: Mon, 27 Jan 2020 02:07:18 +0900 Subject: [PATCH 03/16] Update docs/docs/sourcing-content-from-json-or-yaml.md Co-Authored-By: Jesse Katsumata --- docs/docs/sourcing-content-from-json-or-yaml.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/sourcing-content-from-json-or-yaml.md b/docs/docs/sourcing-content-from-json-or-yaml.md index 3b1d323bc..55fc4b533 100644 --- a/docs/docs/sourcing-content-from-json-or-yaml.md +++ b/docs/docs/sourcing-content-from-json-or-yaml.md @@ -14,7 +14,7 @@ gatsby new gatsby-YAML-JSON-at-buildtime https://github.com/gatsbyjs/gatsby-star ## YAML からデータを直接インポートする -この項では YAML からデータを取得します。代わりに JSON を使用してインポートする方法を確認するには、 [次の項](#Directly-importing-data-with-JSON) に移動してください。 +この項では YAML からデータを取得します。代わりに JSON を使用してインポートする方法を確認するには、[次の項](#Directly-importing-data-with-JSON) に移動してください。 ### YAML コンテンツを追加する From 72af78829aad75625190af5253e51984df19c40b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nzws=20/=20=E3=81=AD=E3=81=98=E3=82=8F=E3=81=95?= Date: Mon, 27 Jan 2020 02:07:34 +0900 Subject: [PATCH 04/16] Update docs/docs/sourcing-content-from-json-or-yaml.md Co-Authored-By: Jesse Katsumata --- docs/docs/sourcing-content-from-json-or-yaml.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/sourcing-content-from-json-or-yaml.md b/docs/docs/sourcing-content-from-json-or-yaml.md index 55fc4b533..02106ae71 100644 --- a/docs/docs/sourcing-content-from-json-or-yaml.md +++ b/docs/docs/sourcing-content-from-json-or-yaml.md @@ -18,7 +18,7 @@ gatsby new gatsby-YAML-JSON-at-buildtime https://github.com/gatsbyjs/gatsby-star ### YAML コンテンツを追加する -Gatsby プロジェクトフォルダーで、`content` ディレクトリーを作成し、その中に次の内容を記述した `My-YAML-Content.yaml` ファイルを作成してください： +Gatsby プロジェクトフォルダーで、`content` ディレクトリーを作成し、その中に次の内容を記述した `My-YAML-Content.yaml` ファイルを作成してください。 ```yaml:title=content/My-YAML-Content.yaml title: YAML content used at build time with Gatsby From c3f5003f7e6c53a6e07970af9671641a4693d35b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nzws=20/=20=E3=81=AD=E3=81=98=E3=82=8F=E3=81=95?= Date: Mon, 27 Jan 2020 02:07:44 +0900 Subject: [PATCH 05/16] Update docs/docs/sourcing-content-from-json-or-yaml.md Co-Authored-By: Jesse Katsumata --- docs/docs/sourcing-content-from-json-or-yaml.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/sourcing-content-from-json-or-yaml.md b/docs/docs/sourcing-content-from-json-or-yaml.md index 02106ae71..c89e55a09 100644 --- a/docs/docs/sourcing-content-from-json-or-yaml.md +++ b/docs/docs/sourcing-content-from-json-or-yaml.md @@ -46,7 +46,7 @@ content: 表示したいデータができたので、あとはデータを表示するページを作るだけです。 -`yml-at-buildtime.js` というページを `pages` というフォルダーの中に作成し、次のコードを記述してください： +`yml-at-buildtime.js` というファイルを `pages` というフォルダーの中に作成し、次のコードを記述してください。 ```jsx:title=src/pages/yml-at-buildtime.js import React from "react" From 29a560794450465ceffb5430e9068dcb8e3c193d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nzws=20/=20=E3=81=AD=E3=81=98=E3=82=8F=E3=81=95?= Date: Mon, 27 Jan 2020 02:07:56 +0900 Subject: [PATCH 06/16] Update docs/docs/sourcing-content-from-json-or-yaml.md Co-Authored-By: Jesse Katsumata --- docs/docs/sourcing-content-from-json-or-yaml.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/sourcing-content-from-json-or-yaml.md b/docs/docs/sourcing-content-from-json-or-yaml.md index c89e55a09..14ef62dab 100644 --- a/docs/docs/sourcing-content-from-json-or-yaml.md +++ b/docs/docs/sourcing-content-from-json-or-yaml.md @@ -65,7 +65,7 @@ const YAMLbuildtime = () => ( export default YAMLbuildtime ``` -上記のコードは YAML データを配列としてインポートし、`Array.map`メソッドでそれを反復処理し、ファンクショナルステートレス React コンポーネントを使用してデータが埋められたマークアップをレンダリングします。 +上記のコードは YAML データを配列としてインポートし、`Array.map` メソッドでそれを反復処理し、ファンクショナルステートレス React コンポーネントを使用してデータが埋められたマークアップをレンダリングします。 ## JSON からデータを直接インポートする From 4adcff9cca2152fa8c7583561efd4edc04b6ce07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nzws=20/=20=E3=81=AD=E3=81=98=E3=82=8F=E3=81=95?= Date: Mon, 27 Jan 2020 02:08:17 +0900 Subject: [PATCH 07/16] Update docs/docs/sourcing-content-from-json-or-yaml.md Co-Authored-By: Jesse Katsumata --- docs/docs/sourcing-content-from-json-or-yaml.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/sourcing-content-from-json-or-yaml.md b/docs/docs/sourcing-content-from-json-or-yaml.md index 14ef62dab..07a00eb98 100644 --- a/docs/docs/sourcing-content-from-json-or-yaml.md +++ b/docs/docs/sourcing-content-from-json-or-yaml.md @@ -73,7 +73,7 @@ YAML からのデータに加えて（または、その代わりに）JSON を ### JSON コンテンツを追加する -Gatsby プロジェクトフォルダーで、（存在しなければ）`content` ディレクトリーを作成し、その中に次の内容を記述した `My-JSON-Content.json` ファイルを作成してください： +Gatsby プロジェクトフォルダーで、（存在しなければ）`content` ディレクトリーを作成し、その中に次の内容を記述した `My-JSON-Content.json` ファイルを作成してください。 ```json:title=content/My-JSON-Content.json { From 3e2f03a1c357e5ab630b219911a6f6246e9fda7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nzws=20/=20=E3=81=AD=E3=81=98=E3=82=8F=E3=81=95?= Date: Mon, 27 Jan 2020 02:08:27 +0900 Subject: [PATCH 08/16] Update docs/docs/sourcing-content-from-json-or-yaml.md Co-Authored-By: Jesse Katsumata --- docs/docs/sourcing-content-from-json-or-yaml.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/sourcing-content-from-json-or-yaml.md b/docs/docs/sourcing-content-from-json-or-yaml.md index 07a00eb98..9272096db 100644 --- a/docs/docs/sourcing-content-from-json-or-yaml.md +++ b/docs/docs/sourcing-content-from-json-or-yaml.md @@ -99,7 +99,7 @@ Gatsby プロジェクトフォルダーで、（存在しなければ）`conten 表示したいデータができたので、あとはデータを表示するページを作るだけです。 -`json-at-buildtime.js` というページを `pages` というフォルダーの中に作成し、次のコードを記述してください： +`json-at-buildtime.js` というファイルを `pages` というフォルダーの中に作成し、次のコードを記述してください。 ```jsx:title=src/pages/json-at-buildtime.js import React from "react" From 398978d25eaf3d0e22a98fe7b98b5d9aad44db78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nzws=20/=20=E3=81=AD=E3=81=98=E3=82=8F=E3=81=95?= Date: Mon, 27 Jan 2020 02:08:36 +0900 Subject: [PATCH 09/16] Update docs/docs/sourcing-content-from-json-or-yaml.md Co-Authored-By: Jesse Katsumata --- docs/docs/sourcing-content-from-json-or-yaml.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/sourcing-content-from-json-or-yaml.md b/docs/docs/sourcing-content-from-json-or-yaml.md index 9272096db..712915f04 100644 --- a/docs/docs/sourcing-content-from-json-or-yaml.md +++ b/docs/docs/sourcing-content-from-json-or-yaml.md @@ -130,7 +130,7 @@ YAML ファイルをソースとするページ構造を使用して、完全に この例では、サイト構造とそのコンテンツを含むファイルを安全に読み込んで解釈できるように、依存関係を追加する必要があります。 -ターミナルを開き、Gatsby サイトのフォルダーに移動して、次のコマンドを実行します： +ターミナルを開き、Gatsby サイトのフォルダーに移動して、次のコマンドを実行します。 ```bash npm install --save js-yaml From 4d7950e02a1c1cdc0e6423e420a79b6aa53d2492 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nzws=20/=20=E3=81=AD=E3=81=98=E3=82=8F=E3=81=95?= Date: Mon, 27 Jan 2020 02:08:46 +0900 Subject: [PATCH 10/16] Update docs/docs/sourcing-content-from-json-or-yaml.md Co-Authored-By: Jesse Katsumata --- docs/docs/sourcing-content-from-json-or-yaml.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/sourcing-content-from-json-or-yaml.md b/docs/docs/sourcing-content-from-json-or-yaml.md index 712915f04..e50402861 100644 --- a/docs/docs/sourcing-content-from-json-or-yaml.md +++ b/docs/docs/sourcing-content-from-json-or-yaml.md @@ -140,7 +140,7 @@ npm install --save js-yaml ### いくつかのコンテンツを追加する -（存在しなければ）`content` ディレクトリーを作成し、その中に次の内容を記述した `index.yaml` ファイルを作成してください： +（存在しなければ）`content` ディレクトリーを作成し、その中に次の内容を記述した `index.yaml` ファイルを作成してください。 ```yaml:title=content/index.yaml - path: "/page1" From 52fecd4e729da4185d4e7e8b4b8bffb80ceadb04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nzws=20/=20=E3=81=AD=E3=81=98=E3=82=8F=E3=81=95?= Date: Mon, 27 Jan 2020 02:08:57 +0900 Subject: [PATCH 11/16] Update docs/docs/sourcing-content-from-json-or-yaml.md Co-Authored-By: Jesse Katsumata --- docs/docs/sourcing-content-from-json-or-yaml.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/sourcing-content-from-json-or-yaml.md b/docs/docs/sourcing-content-from-json-or-yaml.md index e50402861..ea5e96692 100644 --- a/docs/docs/sourcing-content-from-json-or-yaml.md +++ b/docs/docs/sourcing-content-from-json-or-yaml.md @@ -237,7 +237,7 @@ exports.createPages = ({ actions }) => { } ``` -このコードは何をしているのか解説します： +このコードは何をしているのか解説します。 1. 以前インストールした `js-yaml` パッケージをインポートします。 2. `index.yaml` ファイルを読み込み、コンテンツを解析します。 From 7a3b91e0c0cf61275bac2b775ba5d218198859e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nzws=20/=20=E3=81=AD=E3=81=98=E3=82=8F=E3=81=95?= Date: Mon, 27 Jan 2020 02:09:08 +0900 Subject: [PATCH 12/16] Update docs/docs/sourcing-content-from-json-or-yaml.md Co-Authored-By: Jesse Katsumata --- docs/docs/sourcing-content-from-json-or-yaml.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/sourcing-content-from-json-or-yaml.md b/docs/docs/sourcing-content-from-json-or-yaml.md index ea5e96692..db9704a77 100644 --- a/docs/docs/sourcing-content-from-json-or-yaml.md +++ b/docs/docs/sourcing-content-from-json-or-yaml.md @@ -293,7 +293,7 @@ YAML ファイルを解析し、Gatsby を設定してテンプレートでペ - gatsby-node.js ``` -ターミナルで `gatsby develop` を実行し、ブラウザーで にアクセスすると、 サイトの生成に使用された YAML ファイルを元とするコンテンツを含んだページが表示されます。 +ターミナルで `gatsby develop` を実行し、ブラウザーで にアクセスすると、サイトの生成に使用された YAML ファイルを元とするコンテンツを含んだページが表示されます。 これを既存の Gatsby サイトで機能させるには、次の物が必要です： From ea2640dba0fbacab7fde500f369b749a8f00d53a Mon Sep 17 00:00:00 2001 From: nzws Date: Mon, 27 Jan 2020 02:17:07 +0900 Subject: [PATCH 13/16] Fix symbols --- docs/docs/sourcing-content-from-json-or-yaml.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/docs/sourcing-content-from-json-or-yaml.md b/docs/docs/sourcing-content-from-json-or-yaml.md index db9704a77..a78f68501 100644 --- a/docs/docs/sourcing-content-from-json-or-yaml.md +++ b/docs/docs/sourcing-content-from-json-or-yaml.md @@ -6,7 +6,7 @@ Gatsby では、JSON または YAML ファイルからデータを取得し、 このガイドで概説されている JSON または YAML からデータ取得をする方法に従うには、公式の [hello world スターター](https://github.com/gatsbyjs/gatsby-starter-hello-world) を使用して Gatsby サイトを作成することから始めます。 -ターミナルを開き、次のコマンドを実行します： +ターミナルを開き、次のコマンドを実行します。 ```bash gatsby new gatsby-YAML-JSON-at-buildtime https://github.com/gatsbyjs/gatsby-starter-hello-world @@ -216,7 +216,7 @@ npm install --save js-yaml 動的なサイト構造とコンテンツが準備できたら、Gatsby に適切なページを生成し、それぞれのコンテンツを表示するように指示する必要があります。 -もし `gatsby-node.js` ファイルが無ければプロジェクトのルートに作成します。そして、次のコードを記述します： +もし `gatsby-node.js` ファイルが無ければプロジェクトのルートに作成します。そして、次のコードを記述します。 ```js:title=gatsby-node.js const fs = require("fs") @@ -248,7 +248,7 @@ exports.createPages = ({ actions }) => { ソースコンテンツのレンダリングプロセスを完了するには、データから動的ページを作成するためのテンプレートを作成する必要があります。 -`gatsby-config.js` で参照されるコンポーネントと一致させるには、`src/templates/` フォルダー内に `basicTemplate.js` というファイルを作成して次のコードを記述してください： +`gatsby-config.js` で参照されるコンポーネントと一致させるには、`src/templates/` フォルダー内に `basicTemplate.js` というファイルを作成して次のコードを記述してください。 ```jsx:title=src/templates/basicTemplate.js import React from "react" @@ -281,7 +281,7 @@ export default basicTemplate ### 部品を繋ぐ -YAML ファイルを解析し、Gatsby を設定してテンプレートでページを生成した後、次のファイルとフォルダーの構造が必要です： +YAML ファイルを解析し、Gatsby を設定してテンプレートでページを生成した後、次のファイルとフォルダーの構造が必要です。 ```text |gatsby-YAML-JSON-at-buildtime @@ -295,7 +295,7 @@ YAML ファイルを解析し、Gatsby を設定してテンプレートでペ ターミナルで `gatsby develop` を実行し、ブラウザーで にアクセスすると、サイトの生成に使用された YAML ファイルを元とするコンテンツを含んだページが表示されます。 -これを既存の Gatsby サイトで機能させるには、次の物が必要です： +これを既存の Gatsby サイトで機能させるには、次の物が必要です。 - `gatsby-node.js` ファイルの内容をコピーします： https://github.com/gatsbyjs/gatsby/blob/master/examples/using-gatsby-with-json-yaml/gatsby-node.js - ベーシックテンプレートを作成します： https://github.com/gatsbyjs/gatsby/blob/master/examples/using-gatsby-with-json-yaml/src/templates/basicTemplate.js From 6d5714bb559f097ad1403cff50be8fbefae4fcb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nzws=20/=20=E3=81=AD=E3=81=98=E3=82=8F=E3=81=95?= Date: Mon, 27 Jan 2020 15:09:13 +0900 Subject: [PATCH 14/16] Update docs/docs/sourcing-content-from-json-or-yaml.md Co-Authored-By: Yasuaki Uechi --- docs/docs/sourcing-content-from-json-or-yaml.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/sourcing-content-from-json-or-yaml.md b/docs/docs/sourcing-content-from-json-or-yaml.md index a78f68501..eca413899 100644 --- a/docs/docs/sourcing-content-from-json-or-yaml.md +++ b/docs/docs/sourcing-content-from-json-or-yaml.md @@ -65,7 +65,7 @@ const YAMLbuildtime = () => ( export default YAMLbuildtime ``` -上記のコードは YAML データを配列としてインポートし、`Array.map` メソッドでそれを反復処理し、ファンクショナルステートレス React コンポーネントを使用してデータが埋められたマークアップをレンダリングします。 +上記のコードは YAML データを配列としてインポートし、`Array.map` メソッドでそれを反復処理し、ファンクショナルステートレス React コンポーネント（SFC）を使用してデータが埋められたマークアップをレンダリングします。 ## JSON からデータを直接インポートする From 851a2fc9fbd9c43e5772fe77203ca9b9c0d00aa5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nzws=20/=20=E3=81=AD=E3=81=98=E3=82=8F=E3=81=95?= Date: Mon, 27 Jan 2020 19:03:19 +0900 Subject: [PATCH 15/16] Update docs/docs/sourcing-content-from-json-or-yaml.md Co-Authored-By: Yasuaki Uechi --- docs/docs/sourcing-content-from-json-or-yaml.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/sourcing-content-from-json-or-yaml.md b/docs/docs/sourcing-content-from-json-or-yaml.md index eca413899..fa890a85f 100644 --- a/docs/docs/sourcing-content-from-json-or-yaml.md +++ b/docs/docs/sourcing-content-from-json-or-yaml.md @@ -65,7 +65,7 @@ const YAMLbuildtime = () => ( export default YAMLbuildtime ``` -上記のコードは YAML データを配列としてインポートし、`Array.map` メソッドでそれを反復処理し、ファンクショナルステートレス React コンポーネント（SFC）を使用してデータが埋められたマークアップをレンダリングします。 +上記のコードは YAML データを配列としてインポートし、`Array.map` メソッドでそれを反復処理し、ファンクショナル React コンポーネント（FC）を使用してデータが埋められたマークアップをレンダリングします。 ## JSON からデータを直接インポートする From bad586826441ffb53c281c536d1c88d2866e3eb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?nzws=20/=20=E3=81=AD=E3=81=98=E3=82=8F=E3=81=95?= Date: Sun, 2 Feb 2020 17:15:03 +0900 Subject: [PATCH 16/16] Update docs/docs/sourcing-content-from-json-or-yaml.md Co-Authored-By: BSKY --- docs/docs/sourcing-content-from-json-or-yaml.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/sourcing-content-from-json-or-yaml.md b/docs/docs/sourcing-content-from-json-or-yaml.md index fa890a85f..79aa73374 100644 --- a/docs/docs/sourcing-content-from-json-or-yaml.md +++ b/docs/docs/sourcing-content-from-json-or-yaml.md @@ -242,7 +242,7 @@ exports.createPages = ({ actions }) => { 1. 以前インストールした `js-yaml` パッケージをインポートします。 2. `index.yaml` ファイルを読み込み、コンテンツを解析します。 3. Gatsby の [`createPage()` API](/docs/actions/#createPage)を使用して、解析されたファイルからプログラムでいくつかのページを作成します。 -4. `context` プロパティを使用して、 `pageContext` という特別な prop としてデータをページに渡し、それを使用できるようにします。 `context`の詳細については [ページの作成と変更](/docs/creating-and-modifying-pages/) を参照してください。 +4. `context` プロパティを使用して、`pageContext` という特別な prop としてデータをページに渡し、それを使用できるようにします。 `context`の詳細については [ページの作成と変更](/docs/creating-and-modifying-pages/) を参照してください。 ### テンプレートを作成する