From ffd96c29e3a815a8969b2c1d63960ffc9974476a Mon Sep 17 00:00:00 2001 From: shinobuhori Date: Sat, 15 Feb 2020 23:45:12 +0900 Subject: [PATCH 01/17] docs: translate docs/why-gatsby-uses-graphql --- docs/docs/why-gatsby-uses-graphql.md | 156 +++++++++++++-------------- 1 file changed, 78 insertions(+), 78 deletions(-) diff --git a/docs/docs/why-gatsby-uses-graphql.md b/docs/docs/why-gatsby-uses-graphql.md index f578392ec..74cdb1b86 100644 --- a/docs/docs/why-gatsby-uses-graphql.md +++ b/docs/docs/why-gatsby-uses-graphql.md @@ -1,23 +1,23 @@ --- -title: Why Gatsby Uses GraphQL +title: Gatsby が GraphQL を使用する理由 --- -A common question about Gatsby is, “Why does Gatsby use GraphQL? Doesn’t it generate static files?” +「なぜ Gatsby は GraphQL を使用するのですか？　 Gatsby は静的ファイルを生成するのですよね？」とよく質問されます。 -Without providing some context, it can seem like GraphQL is overkill for something like Gatsby. In this document, you’ll see what problems arise when creating pages, and how those problems can be solved using GraphQL. +何らかのコンテキストが与えられなければ、 Gatsby にとって GraphQL は過剰に見えるかもしれません。このドキュメントでは、ページ作成時に発生する問題と、それらの問題を GraphQL を使用して解決する方法について説明します。 -## Create a page without any data +## データなしでページを作成する -For any kind of pages that aren’t directly created in `src/pages/`, you’ll need Gatsby’s [`createPages` Node API](/docs/node-apis/#createPages) to create pages programmatically. +`src/pages/` 以外の場所でページを動的に作成するためには、Gatsby の [`createPages` Node API](/docs/node-apis/#createPages) が必要です。 -All that’s required to create a page is a `path` where it should be created and the component that should be rendered there. +`path` とレンダリングしたいコンポーネントを指定するだけで、ページを作成できます。 -For example, if you had the following component: +例えば、次のコンポーネントを考えてみましょう。 ```jsx:title=src/templates/no-data.js import React from "react" @@ -34,7 +34,7 @@ const NoData = () => ( export default NoData ``` -You could programmatically create a page at `/no-data/` by adding the following to `gatsby-node.js`: +以下のコードを `gatsby-node.js` に追加することで、`/no-data/` にページを動的に作成できます。 ```js:title=gatsby-node.js exports.createPages = ({ actions: { createPage } }) => { @@ -45,22 +45,22 @@ exports.createPages = ({ actions: { createPage } }) => { } ``` -After running `gatsby develop`, you’ll see the following at `http://localhost:8000/no-data/`: +`gatsby develop` コマンドを実行すると、`localhost:8000/no-data/` では次のように表示されます。 -![Screenshot of the page generated by the previous code snippet.](./images/why-gql-no-data.png) +![１つ前のコードスニペットで生成されたページのスクリーンショット](./images/why-gql-no-data.png) -In the simplest cases, this is all that’s required for building pages with Gatsby. However, you’ll often want to pass data to the page so that the template component is reusable. +もっともシンプルな場合は、 Gatsby でページを作成するために必要な手順はこれだけです。 しかし多くの場合は、ページにデータを渡し、テンプレートコンポーネントを再利用できるようにしたいはずです。 -## Create a page with hard-coded data +## ハードコードされたデータでページを作成する -To pass data to the created pages, you’ll need to pass `context` to the `createPage` call. +作成されたページにデータを渡すには、`context` を `createPage` に渡す必要があります。 -In `gatsby-node.js`, you can add context like so: +`gatsby-node.js` では、以下のように `context` を追加できます。 ```js:title=gatsby-node.js exports.createPages = ({ actions: { createPage } }) => { @@ -75,11 +75,11 @@ exports.createPages = ({ actions: { createPage } }) => { } ``` -The `context` property accepts an object, and you can pass in any data you want the page to be able to access. +このようにして追加された `context` は、オブジェクトを受け取ります。`context` に渡された任意のデータは、そのページから参照できるようにできます。 -> **NOTE:** There are a few reserved names that _cannot_ be used in `context`. They are: `path`, `matchPath`, `component`, `componentChunkName`, `pluginCreator___NODE`, and `pluginCreatorId`. +> **ヒント：** `context` の中で使用できない予約語がいくつかあります。 それらは、`path` 、`matchPath` 、`component` 、`componentChunkName` 、`pluginCreator___NODE` 、そして `pluginCreatorId` です。 -When Gatsby creates pages, it includes a prop called `pageContext` and sets its value to `context`, so you can access any of the values in your component: +Gatsby が作成したページには `pageContext` という プロパティが含まれており、その値は `context` となっています。そのため、作成されたページからは、コンポーネントの任意の値を参照できます。 ```jsx:title=src/templates/with-context.js import React from "react" @@ -94,22 +94,22 @@ const WithContext = ({ pageContext }) => ( export default WithContext ``` -Start the development server with `gatsby develop` and visit `http://localhost:8000/page-with-context/` to see the created page: +`gatsby develop` コマンドで開発サーバーを起動し、`localhost:8000/page-with-context/` にアクセスして、作成されたページを確認してみましょう。 -![Screenshot of a page with hard-coded context.](./images/why-gql-with-context.png) +![ハードコードされたデータで作成されたページのスクリーンショット](./images/why-gql-with-context.png) -In some cases, this approach may be enough. However, it’s often necessary to create pages from data that can't be hard-coded. +場合によっては、この方法で十分かもしれません。 しかし、ハードコードできないデータからページを作成したい場合も多々あります。 -## Create pages from JSON with images +## 画像を含む JSON ファイルからページを作成する -In many cases, the data for pages can't feasibly be hard-coded into `gatsby-node.js`. More likely it will come from an external source, such as a third-party API, local Markdown, or JSON files. +多くの場合、ページ用のデータを `gatsby-node.js` にハードコーディングすることはできません。 サードパーティー API 、ローカル Markdown、JSON ファイルなどの外部ソースからデータを取得する可能性が高くなるでしょう。 -For example, you might have a JSON file with post data: +例えば、投稿データを含む JSON ファイルがあるとします。 ```json:title=data/products.json [ @@ -137,9 +137,9 @@ For example, you might have a JSON file with post data: ] ``` -The images need to be added to the `/static/images/` folder. (This is where things start to get hard to manage — the JSON and the images aren’t in the same place.) +この場合、画像を `/static/images/` フォルダーに追加する必要があります。（JSON ファイルと画像が同じ場所に追加されないため、これらの管理は難しくなります） -Once the JSON and the images are added, you can create product pages by importing the JSON into `gatsby-node.js` and loop through the entries to create pages: +JSON ファイルと画像を追加したら、JSON ファイルを `gatsby-node.js` にインポートしてエントリーをループ処理し、 product ページを作成します。 ```js:title=gatsby-node.js exports.createPages = ({ actions: { createPage } }) => { @@ -159,7 +159,7 @@ exports.createPages = ({ actions: { createPage } }) => { } ``` -The product template still uses `pageContext` to display the product data: +product テンプレートは、引き続き `pageContext` を使用して product データを表示します。 ```jsx:title=src/templates/product.js import React from "react" @@ -180,55 +180,55 @@ const Product = ({ pageContext }) => ( export default Product ``` -Run `gatsby develop`, then open `http://localhost:8000/product/space-socks/` to see one of the generated products. +`gatsby develop` コマンドを実行し、`localhost:8000/product/space-socks/` を開いて、生成された product の一例を見てみましょう。 -![Screenshot of a rendered product page.](./images/why-gql-product-json.png) +![レンダリングされた product ページのスクリーンショット](./images/why-gql-product-json.png) -This gets the job done, but it has a few shortcomings that are going to get more complicated as time goes on: +以上で作業は完了ですが、時間が経つにつれて複雑になる欠点がいくつかあります。 -1. The images and the product data are in different places in the source code. -2. The image paths are absolute from the _built_ site, not the source code, which makes it confusing to know how to find them from the JSON. -3. The images are unoptimized, and any optimization you do would have to be manual. -4. To create a preview listing of all products, we’d need to pass _all_ of the product info in `context`, which will get unwieldy as the number of products increases. -5. It’s not very obvious where data is coming from in the templates that render the pages, so updating the data might be confusing later. +1. 画像と product データは、ソースコードの異なる場所にあります。 +2. 画像のパスは、ソースコードではなく*ビルドされた*サイトからの絶対パスであるため、JSON ファイルから画像のパスを見つける方法を知るのは大変です。 +3. 画像は最適化されていないため、手動で最適化を行う必要があります。 +4. すべての product のプレビューリストを作成するには、`context` に _全ての_ product の情報を渡す必要があります。`context` は、product の数が増えるにつれて扱いにくくなります。 +5. ページをレンダリングするテンプレートのどの部分からデータが来ているかがあまり明らかではないため、データを更新すると後で混乱を招く可能性があります。 -To overcome these limitations, Gatsby introduces GraphQL as a data management layer. +これらの欠点を克服するために、Gatsby はデータ管理層として GraphQL を使用しています。 -## Create pages using GraphQL +## GraphQL を使用してページを作成する -There’s a bit more up-front setup required to get data into GraphQL, but the benefits far outweigh the cost. +GraphQL にデータを取り込むには、少し前もってセットアップする必要がありますが、その利益はコストをはるかに上回ります。 -Using `data/products.json` as an example, by using GraphQL we’re able to solve all of the limitations from the previous section: +`data/products.json` を例に考えてみましょう。GraphQL を使用することにより、前のセクションで述べた全ての欠点を解決できます。 -1. The images can be collocated with the products in `data/images/`. -2. Image paths in `data/products.json` can be relative to the JSON file. -3. Gatsby can automatically optimize images for faster loading and better user experience. -4. You no longer need to pass all product data into `context` when creating pages. -5. Data is loaded using GraphQL in the components where it’s used, making it much easier to see where data comes from and how to change it. +1. 画像は `data/images/` にある product と同じ場所に配置できます。 +2. `data/products.json` 中に記述される画像のパスを、その JSON ファイルを起点とする相対パスにできます。 +3. Gatsby は、画像読み込みの高速化と UX の向上のために、画像を自動的に最適化できます。 +4. ページを作成するときに、すべての product データを `context` に渡す必要がなくなりました。 +5. データは使用されているコンポーネント内で GraphQL を用いて読み込まれるため、私たちはそのデータの取得元と変更方法をとても簡単に確認できます。 -### Add the necessary plugins to load data into GraphQL +### GraphQL にデータを読み込むために必要なプラグインを追加する -In order to load the product and image data into GraphQL, you need to add a few [Gatsby plugins](/plugins/). Namely, you need plugins to: +product データと画像を GraphQL に読み込むには、以下の [Gatsby プラグイン](/plugins/) を追加し、いくつかの手順を踏む必要があります。 -- Load the JSON file into Gatsby’s internal data store, which can be queried using GraphQL ([`gatsby-source-filesystem`](/packages/gatsby-source-filesystem/)) -- Convert JSON files into a format you can query with GraphQL ([`gatsby-transformer-json`](/packages/gatsby-transformer-json/)) -- Optimize images ([`gatsby-plugin-sharp`](/packages/gatsby-plugin-sharp/)) -- Add data about optimized images to Gatsby’s data store ([`gatsby-transformer-sharp`](/packages/gatsby-transformer-sharp/)) +- JSON ファイルを Gatsby の内部データストアに読み込みます。このデータストアでは、GraphQL を使用してクエリーを実行できます。（[`gatsby-source-filesystem`](/packages/gatsby-source-filesystem/)） +- GraphQL を使用してクエリーを実行できるように、JSON ファイルのフォーマットを変換します。（[`gatsby-transformer-json`](/packages/gatsby-transformer-json/)） +- 画像を最適化します。（[`gatsby-plugin-sharp`](/packages/gatsby-plugin-sharp/)） +- 最適化された画像に関するデータを Gatsby のデータストアに追加します。（[`gatsby-transformer-sharp`](/packages/gatsby-transformer-sharp/)） -In addition to the plugins, we’ll use [`gatsby-image`](/packages/gatsby-image/) to display the optimized images with lazy loading. +以上のプラグインに加えて、[`gatsby-image`](/packages/gatsby-image/) を使用し、最適化された画像を遅延読み込みで表示します。 -Install these packages using the command line: +次のコマンドラインを使用し、これらのパッケージをインストールします。 ```shell npm install --save gatsby-source-filesystem gatsby-transformer-json gatsby-plugin-sharp gatsby-transformer-sharp gatsby-image ``` -Then add them to `gatsby-config.js`: +次に、これらを `gatsby-config.js` に追加します。 ```js:title=gatsby-config.js module.exports = { @@ -246,21 +246,21 @@ module.exports = { } ``` -To check that this worked, you can use the GraphQL Playground, which is available during development, by running: +これが機能したことを確認するために、GraphQL Playground で次のコマンドを実行してみましょう。 ```shell GATSBY_GRAPHQL_IDE=playground gatsby develop ``` -> **NOTE:** The `GATSBY_GRAPHQL_IDE=playground` part of this command is optional. Adding it enables the GraphQL Playground instead of GraphiQL, which is an older interface for exploring GraphQL. +> **ヒント:** このコマンドのうち、 `GATSBY_GRAPHQL_IDE=playground` 部分はオプションです。 このオプションを追加すると、GraphQL を探索するための古いインターフェースである GraphiQL の代わりに GraphQL Playground を有効にできます。 -You can explore the available data schema using the “Docs” tab at the right. +右側の [ドキュメント] タブを使えば、利用可能なデータスキーマを確認できます。 -One of the available options is `allProductsJson`, which contains “edges”, and those contain “nodes”. +利用可能なオプションの 1 つは `allProductsJson` で、これにはいくつかのノードを持つエッジが含まれます。 -The JSON transformer plugin has created one node for each product, and inside the node you can select the data you need for that product. +JSON ファイル変換プラグインは product ごとに 1 つのノードを作成します。ノード内ではその product に必要なデータを選択できます。 -You can write a query to select each product’s slug like this: +各 product のスラッグを選択するクエリーは以下のように記述できます。 ```graphql { @@ -274,20 +274,20 @@ You can write a query to select each product’s slug like this: } ``` -Test this query by entering it into the left-hand panel of the GraphQL Playground, then pressing the play button in the top center. +GraphQL Playground の左側のパネルにこのクエリーを入力して上部中央の実行ボタンを押し、テストしてみましょう。 -The results will appear in the panel between the query and the docs, and they’ll look like this: +次のような実行結果がクエリーとドキュメントの間のパネルに表示されるはずです。 ![GraphQL Playground](./images/why-gql-playground.png) -### Generate pages with GraphQL +### GraphQL でページを生成する -In `gatsby-node.js`, you can use the GraphQL query you just wrote to generate pages. +`gatsby-node.js` では、先ほど書いた GraphQL クエリーを 使用してページを生成できます。 ```js:title=gatsby-node.js exports.createPages = async ({ actions: { createPage }, graphql }) => { @@ -317,15 +317,15 @@ exports.createPages = async ({ actions: { createPage }, graphql }) => { } ``` -You need to use the `graphql` helper that’s available to the [`createPages` Node API](/docs/node-apis/#createPages) to execute the query. To make sure that the result of the query comes back before continuing, use [`async`/`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). +このクエリを実行するには、[`createPages` Node API](/docs/node-apis/#createPages) で利用できる `graphql` ヘルパーを使用する必要があります。続行する前にクエリーの結果が返されることを確認するには、[`async`/`await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) を使用してください。 -The results that come back are very similar to the contents of `data/products.json`, so you can loop through the results and create a page for each. +返される結果は `data/products.json` の内容にとても似ているため、その結果をループ処理して各ページを作成できます。 -However, note that you’re only passing the `slug` in `context` — you’ll use this in the template component to load more product data. +ただし、`context` には `slug` のみを渡すことに 気をつけてください。この `slug` をテンプレートコンポーネントで使用すれば、より多くの product データを読み込むことができます。 -As you’ve already seen, the `context` argument is made available to the template component in the `pageContext` prop. To make queries more powerful, Gatsby _also_ exposes everything in `context` as a GraphQL variable, which means you can write a query that says, in plain English, “Load data for the product with the slug passed in `context`.” +今まで見てきたように、引数 `context` は、 プロパティ `pageContext` のテンプレートコンポーネントで使用できるようになります。また、クエリーをより強力にするため、Gatsby は `context` のすべての 情報を GraphQL の変数として使用できるようにしています。つまり、「product と `context` に渡されたスラッグを一緒に読み込んで！」というクエリーを書くことができるのです。 -Here’s what that looks like in practice: +実際のクエリーは次のようになります。 ```jsx:title=src/templates/product-graphql.js import React from "react" @@ -369,19 +369,19 @@ const Product = ({ data }) => { export default Product ``` -A few notes about this file: +このファイルに関して、以下のことに気をつけてください。 -1. The result of the query is added to the template component as the `data` prop. -2. The image path was automatically converted by the Sharp transformer into a “child node” that includes optimized versions of the image. -3. The query uses a [GraphQL fragment](/packages/gatsby-image/#fragments) to query all the required data for optimized images. GraphQL fragments _do not work_ in the GraphQL Playground. -4. The `img` tag has been swapped out for a `gatsby-image` component named `Image`. Instead of a `src` attribute, it accepts an object with optimized image data. +1. クエリーの結果は、`data` プロパティとしてテンプレートコンポーネントに追加されます。 +2. 画像パスは、Sharp トランスフォーマーによって、最適化された画像を含む「子ノード」に自動的に変換されました。 +3. [GraphQL フラグメント](/packages/gatsby-image/#fragments) を使用して、最適化された画像を作成するために必要なすべてのデータを指定したクエリーを作成します。なお、GraphQL Playground では GraphQL フラグメントは動作しません。 +4. `img` タグは、`Image` という名前の `gatsby-image` コンポーネントと交換されました。 `src` 属性の代わりに、最適化された画像データを持つオブジェクトを受け入れます。 -Save this file, run `gatsby develop`, then open `http://localhost:8000/gql/purple-hat/`: +このファイルを保存し、`gatsby develop` コマンドを実行して、`localhost:8000/gql/purple-hat/` を開いてみましょう。 -![Lazy loaded image of an angry cat wearing the purple hat.](./images/why-gql-images.gif) +![紫色の帽子をかぶった猫の遅延読み込み画像](./images/why-gql-images.gif) -The image is now optimized and lazy loaded. +これで画像は最適化され、遅延読み込みされました。 -After the initial setup, loading data with GraphQL is fairly similar to directly loading JSON, but it provides extra benefits like automatically optimizing images and keeping the data loading in the same place where it’s used. +初期設定後、GraphQL を使用したデータの読み込みは、JSON ファイルからの直接読み込みとかなり似ています。しかし、画像を自動的に最適化し、使用される場所と同じ場所にデータを読み込めるなど、さらなる利点があります。 -GraphQL is certainly not required, but the benefits of adopting GraphQL are significant. GraphQL will simplify the process of building and optimizing your pages, so it’s considered a best practice for structuring and writing Gatsby applications. +GraphQL は確かに必須ではありません。しかし、GraphQL を使用することの利益は大きいです。 GraphQL は、ページの構築と最適化のプロセスを簡素化するため、Gatsby アプリケーションの構築と作成のベストプラクティスと言えるでしょう。 From 419e8f62c76b8a4b6451deac7d4fba1c855a34d0 Mon Sep 17 00:00:00 2001 From: shinobuhori <59085077+shinobuhori@users.noreply.github.com> Date: Sun, 16 Feb 2020 02:20:42 +0900 Subject: [PATCH 02/17] Update docs/docs/why-gatsby-uses-graphql.md Co-Authored-By: Jesse Katsumata --- docs/docs/why-gatsby-uses-graphql.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/why-gatsby-uses-graphql.md b/docs/docs/why-gatsby-uses-graphql.md index 74cdb1b86..1f428f216 100644 --- a/docs/docs/why-gatsby-uses-graphql.md +++ b/docs/docs/why-gatsby-uses-graphql.md @@ -2,7 +2,7 @@ title: Gatsby が GraphQL を使用する理由 --- -「なぜ Gatsby は GraphQL を使用するのですか？　 Gatsby は静的ファイルを生成するのですよね？」とよく質問されます。 +「なぜ Gatsby は GraphQL を使用するのですか？ Gatsby は静的ファイルを生成するのですよね？」とよく質問されます。 何らかのコンテキストが与えられなければ、 Gatsby にとって GraphQL は過剰に見えるかもしれません。このドキュメントでは、ページ作成時に発生する問題と、それらの問題を GraphQL を使用して解決する方法について説明します。 From aef7d6aaa0ebdb00ee3ff3177e638e08ee547122 Mon Sep 17 00:00:00 2001 From: shinobuhori <59085077+shinobuhori@users.noreply.github.com> Date: Sun, 16 Feb 2020 02:20:51 +0900 Subject: [PATCH 03/17] Update docs/docs/why-gatsby-uses-graphql.md Co-Authored-By: Jesse Katsumata --- docs/docs/why-gatsby-uses-graphql.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/why-gatsby-uses-graphql.md b/docs/docs/why-gatsby-uses-graphql.md index 1f428f216..27c1263c0 100644 --- a/docs/docs/why-gatsby-uses-graphql.md +++ b/docs/docs/why-gatsby-uses-graphql.md @@ -4,7 +4,7 @@ title: Gatsby が GraphQL を使用する理由 「なぜ Gatsby は GraphQL を使用するのですか？ Gatsby は静的ファイルを生成するのですよね？」とよく質問されます。 -何らかのコンテキストが与えられなければ、 Gatsby にとって GraphQL は過剰に見えるかもしれません。このドキュメントでは、ページ作成時に発生する問題と、それらの問題を GraphQL を使用して解決する方法について説明します。 +何らかのコンテキストが与えられなければ、Gatsby にとって GraphQL は過剰に見えるかもしれません。このドキュメントでは、ページ作成時に発生する問題と、それらの問題を GraphQL を使用して解決する方法について説明します。 ## データなしでページを作成する From 16c6ac36088d468008c74cc684898ce7f808571d Mon Sep 17 00:00:00 2001 From: shinobuhori <59085077+shinobuhori@users.noreply.github.com> Date: Sun, 16 Feb 2020 02:21:00 +0900 Subject: [PATCH 04/17] Update docs/docs/why-gatsby-uses-graphql.md Co-Authored-By: Jesse Katsumata --- docs/docs/why-gatsby-uses-graphql.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/why-gatsby-uses-graphql.md b/docs/docs/why-gatsby-uses-graphql.md index 27c1263c0..3237c4a32 100644 --- a/docs/docs/why-gatsby-uses-graphql.md +++ b/docs/docs/why-gatsby-uses-graphql.md @@ -45,7 +45,7 @@ exports.createPages = ({ actions: { createPage } }) => { } ``` -`gatsby develop` コマンドを実行すると、`localhost:8000/no-data/` では次のように表示されます。 +`gatsby develop` コマンドを実行すると、`http://localhost:8000/no-data/` では次のように表示されます。 ![１つ前のコードスニペットで生成されたページのスクリーンショット](./images/why-gql-no-data.png) From bbf6c354a625a50a4960bb24465caceb7f11bc52 Mon Sep 17 00:00:00 2001 From: shinobuhori <59085077+shinobuhori@users.noreply.github.com> Date: Sun, 16 Feb 2020 02:21:08 +0900 Subject: [PATCH 05/17] Update docs/docs/why-gatsby-uses-graphql.md Co-Authored-By: Jesse Katsumata --- docs/docs/why-gatsby-uses-graphql.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/why-gatsby-uses-graphql.md b/docs/docs/why-gatsby-uses-graphql.md index 3237c4a32..a0578a8d7 100644 --- a/docs/docs/why-gatsby-uses-graphql.md +++ b/docs/docs/why-gatsby-uses-graphql.md @@ -49,7 +49,7 @@ exports.createPages = ({ actions: { createPage } }) => { ![１つ前のコードスニペットで生成されたページのスクリーンショット](./images/why-gql-no-data.png) -もっともシンプルな場合は、 Gatsby でページを作成するために必要な手順はこれだけです。 しかし多くの場合は、ページにデータを渡し、テンプレートコンポーネントを再利用できるようにしたいはずです。 +もっともシンプルな場合は、 Gatsby でページを作成するために必要な手順はこれだけです。しかし多くの場合は、ページにデータを渡し、テンプレートコンポーネントを再利用できるようにしたいはずです。 ## ハードコードされたデータでページを作成する From 64b66123f2365bb12334ea6f0b16fd28406d77fd Mon Sep 17 00:00:00 2001 From: shinobuhori <59085077+shinobuhori@users.noreply.github.com> Date: Sun, 16 Feb 2020 02:21:16 +0900 Subject: [PATCH 06/17] Update docs/docs/why-gatsby-uses-graphql.md Co-Authored-By: Jesse Katsumata --- docs/docs/why-gatsby-uses-graphql.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/why-gatsby-uses-graphql.md b/docs/docs/why-gatsby-uses-graphql.md index a0578a8d7..b10a34e4c 100644 --- a/docs/docs/why-gatsby-uses-graphql.md +++ b/docs/docs/why-gatsby-uses-graphql.md @@ -79,7 +79,7 @@ exports.createPages = ({ actions: { createPage } }) => { > **ヒント：** `context` の中で使用できない予約語がいくつかあります。 それらは、`path` 、`matchPath` 、`component` 、`componentChunkName` 、`pluginCreator___NODE` 、そして `pluginCreatorId` です。 -Gatsby が作成したページには `pageContext` という プロパティが含まれており、その値は `context` となっています。そのため、作成されたページからは、コンポーネントの任意の値を参照できます。 +Gatsby が作成したページには `pageContext` というプロパティが含まれており、その値は `context` となっています。そのため、作成されたページからは、コンポーネントの任意の値を参照できます。 ```jsx:title=src/templates/with-context.js import React from "react" From 819f3c1495c53cddb9beae83b3dbff70838c97af Mon Sep 17 00:00:00 2001 From: shinobuhori <59085077+shinobuhori@users.noreply.github.com> Date: Sun, 16 Feb 2020 02:21:23 +0900 Subject: [PATCH 07/17] Update docs/docs/why-gatsby-uses-graphql.md Co-Authored-By: Jesse Katsumata --- docs/docs/why-gatsby-uses-graphql.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/why-gatsby-uses-graphql.md b/docs/docs/why-gatsby-uses-graphql.md index b10a34e4c..95a00b3a5 100644 --- a/docs/docs/why-gatsby-uses-graphql.md +++ b/docs/docs/why-gatsby-uses-graphql.md @@ -94,7 +94,7 @@ const WithContext = ({ pageContext }) => ( export default WithContext ``` -`gatsby develop` コマンドで開発サーバーを起動し、`localhost:8000/page-with-context/` にアクセスして、作成されたページを確認してみましょう。 +`gatsby develop` コマンドで開発サーバーを起動し、`http://localhost:8000/page-with-context/` にアクセスして、作成されたページを確認してみましょう。 ![ハードコードされたデータで作成されたページのスクリーンショット](./images/why-gql-with-context.png) From 06880ca7cacad8c9a10d377296df86bb27e6442b Mon Sep 17 00:00:00 2001 From: shinobuhori <59085077+shinobuhori@users.noreply.github.com> Date: Sun, 16 Feb 2020 02:21:31 +0900 Subject: [PATCH 08/17] Update docs/docs/why-gatsby-uses-graphql.md Co-Authored-By: Jesse Katsumata --- docs/docs/why-gatsby-uses-graphql.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/why-gatsby-uses-graphql.md b/docs/docs/why-gatsby-uses-graphql.md index 95a00b3a5..e55573a3b 100644 --- a/docs/docs/why-gatsby-uses-graphql.md +++ b/docs/docs/why-gatsby-uses-graphql.md @@ -213,7 +213,7 @@ GraphQL にデータを取り込むには、少し前もってセットアップ lessonTitle="Make Data Queryable in GraphQL With Gatsby" /> -product データと画像を GraphQL に読み込むには、以下の [Gatsby プラグイン](/plugins/) を追加し、いくつかの手順を踏む必要があります。 +product データと画像を GraphQL に読み込むには、以下の [Gatsby プラグイン](/plugins/)を追加し、いくつかの手順を踏む必要があります。 - JSON ファイルを Gatsby の内部データストアに読み込みます。このデータストアでは、GraphQL を使用してクエリーを実行できます。（[`gatsby-source-filesystem`](/packages/gatsby-source-filesystem/)） - GraphQL を使用してクエリーを実行できるように、JSON ファイルのフォーマットを変換します。（[`gatsby-transformer-json`](/packages/gatsby-transformer-json/)） From 22e5bc3b8663bca7480df14552c275150e657655 Mon Sep 17 00:00:00 2001 From: shinobuhori <59085077+shinobuhori@users.noreply.github.com> Date: Sun, 16 Feb 2020 02:21:39 +0900 Subject: [PATCH 09/17] Update docs/docs/why-gatsby-uses-graphql.md Co-Authored-By: Jesse Katsumata --- docs/docs/why-gatsby-uses-graphql.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/why-gatsby-uses-graphql.md b/docs/docs/why-gatsby-uses-graphql.md index e55573a3b..196fd30ee 100644 --- a/docs/docs/why-gatsby-uses-graphql.md +++ b/docs/docs/why-gatsby-uses-graphql.md @@ -287,7 +287,7 @@ GraphQL Playground の左側のパネルにこのクエリーを入力して上 lessonTitle="Create Pages in Gatsby Using GraphQL" /> -`gatsby-node.js` では、先ほど書いた GraphQL クエリーを 使用してページを生成できます。 +`gatsby-node.js` では、先ほど書いた GraphQL クエリーを使用してページを生成できます。 ```js:title=gatsby-node.js exports.createPages = async ({ actions: { createPage }, graphql }) => { From 94649ca80519be6baa94c0764611a2b9887c4042 Mon Sep 17 00:00:00 2001 From: shinobuhori <59085077+shinobuhori@users.noreply.github.com> Date: Sun, 16 Feb 2020 02:21:52 +0900 Subject: [PATCH 10/17] Update docs/docs/why-gatsby-uses-graphql.md Co-Authored-By: Jesse Katsumata --- docs/docs/why-gatsby-uses-graphql.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/why-gatsby-uses-graphql.md b/docs/docs/why-gatsby-uses-graphql.md index 196fd30ee..e9a61d644 100644 --- a/docs/docs/why-gatsby-uses-graphql.md +++ b/docs/docs/why-gatsby-uses-graphql.md @@ -98,7 +98,7 @@ export default WithContext ![ハードコードされたデータで作成されたページのスクリーンショット](./images/why-gql-with-context.png) -場合によっては、この方法で十分かもしれません。 しかし、ハードコードできないデータからページを作成したい場合も多々あります。 +場合によっては、この方法で十分かもしれません。しかし、ハードコードできないデータからページを作成したい場合も多々あります。 ## 画像を含む JSON ファイルからページを作成する From 83022496e65dae2a9f3d536f976c9e36372a18bd Mon Sep 17 00:00:00 2001 From: shinobuhori <59085077+shinobuhori@users.noreply.github.com> Date: Sun, 16 Feb 2020 02:22:01 +0900 Subject: [PATCH 11/17] Update docs/docs/why-gatsby-uses-graphql.md Co-Authored-By: Jesse Katsumata --- docs/docs/why-gatsby-uses-graphql.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/why-gatsby-uses-graphql.md b/docs/docs/why-gatsby-uses-graphql.md index e9a61d644..2307bfb1d 100644 --- a/docs/docs/why-gatsby-uses-graphql.md +++ b/docs/docs/why-gatsby-uses-graphql.md @@ -254,7 +254,7 @@ GATSBY_GRAPHQL_IDE=playground gatsby develop > **ヒント:** このコマンドのうち、 `GATSBY_GRAPHQL_IDE=playground` 部分はオプションです。 このオプションを追加すると、GraphQL を探索するための古いインターフェースである GraphiQL の代わりに GraphQL Playground を有効にできます。 -右側の [ドキュメント] タブを使えば、利用可能なデータスキーマを確認できます。 +右側の「ドキュメント」タブを使えば、利用可能なデータスキーマを確認できます。 利用可能なオプションの 1 つは `allProductsJson` で、これにはいくつかのノードを持つエッジが含まれます。 From ff59f444d3ed4b5255b3e254fe1d576f259f81e6 Mon Sep 17 00:00:00 2001 From: shinobuhori <59085077+shinobuhori@users.noreply.github.com> Date: Sun, 16 Feb 2020 02:22:10 +0900 Subject: [PATCH 12/17] Update docs/docs/why-gatsby-uses-graphql.md Co-Authored-By: Jesse Katsumata --- docs/docs/why-gatsby-uses-graphql.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/why-gatsby-uses-graphql.md b/docs/docs/why-gatsby-uses-graphql.md index 2307bfb1d..888013ee5 100644 --- a/docs/docs/why-gatsby-uses-graphql.md +++ b/docs/docs/why-gatsby-uses-graphql.md @@ -321,7 +321,7 @@ exports.createPages = async ({ actions: { createPage }, graphql }) => { 返される結果は `data/products.json` の内容にとても似ているため、その結果をループ処理して各ページを作成できます。 -ただし、`context` には `slug` のみを渡すことに 気をつけてください。この `slug` をテンプレートコンポーネントで使用すれば、より多くの product データを読み込むことができます。 +ただし、`context` には `slug` のみを渡すことに気をつけてください。この `slug` をテンプレートコンポーネントで使用すれば、より多くの product データを読み込むことができます。 今まで見てきたように、引数 `context` は、 プロパティ `pageContext` のテンプレートコンポーネントで使用できるようになります。また、クエリーをより強力にするため、Gatsby は `context` のすべての 情報を GraphQL の変数として使用できるようにしています。つまり、「product と `context` に渡されたスラッグを一緒に読み込んで！」というクエリーを書くことができるのです。 From b636c0f99371145db91547611931ef7adf6dffdc Mon Sep 17 00:00:00 2001 From: shinobuhori <59085077+shinobuhori@users.noreply.github.com> Date: Sun, 16 Feb 2020 02:22:16 +0900 Subject: [PATCH 13/17] Update docs/docs/why-gatsby-uses-graphql.md Co-Authored-By: Jesse Katsumata --- docs/docs/why-gatsby-uses-graphql.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/why-gatsby-uses-graphql.md b/docs/docs/why-gatsby-uses-graphql.md index 888013ee5..2103ae09d 100644 --- a/docs/docs/why-gatsby-uses-graphql.md +++ b/docs/docs/why-gatsby-uses-graphql.md @@ -323,7 +323,7 @@ exports.createPages = async ({ actions: { createPage }, graphql }) => { ただし、`context` には `slug` のみを渡すことに気をつけてください。この `slug` をテンプレートコンポーネントで使用すれば、より多くの product データを読み込むことができます。 -今まで見てきたように、引数 `context` は、 プロパティ `pageContext` のテンプレートコンポーネントで使用できるようになります。また、クエリーをより強力にするため、Gatsby は `context` のすべての 情報を GraphQL の変数として使用できるようにしています。つまり、「product と `context` に渡されたスラッグを一緒に読み込んで！」というクエリーを書くことができるのです。 +今まで見てきたように、引数 `context` は、プロパティ `pageContext` のテンプレートコンポーネントで使用できるようになります。また、クエリーをより強力にするため、Gatsby は `context` のすべての情報を GraphQL の変数として使用できるようにしています。つまり、「product と `context` に渡されたスラッグを一緒に読み込んで！」というクエリーを書くことができるのです。 実際のクエリーは次のようになります。 From 48b88c558ec288217fbab3440834e3ff6274ae62 Mon Sep 17 00:00:00 2001 From: shinobuhori <59085077+shinobuhori@users.noreply.github.com> Date: Sun, 16 Feb 2020 02:22:24 +0900 Subject: [PATCH 14/17] Update docs/docs/why-gatsby-uses-graphql.md Co-Authored-By: Jesse Katsumata --- docs/docs/why-gatsby-uses-graphql.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/why-gatsby-uses-graphql.md b/docs/docs/why-gatsby-uses-graphql.md index 2103ae09d..77e875c07 100644 --- a/docs/docs/why-gatsby-uses-graphql.md +++ b/docs/docs/why-gatsby-uses-graphql.md @@ -374,7 +374,7 @@ export default Product 1. クエリーの結果は、`data` プロパティとしてテンプレートコンポーネントに追加されます。 2. 画像パスは、Sharp トランスフォーマーによって、最適化された画像を含む「子ノード」に自動的に変換されました。 3. [GraphQL フラグメント](/packages/gatsby-image/#fragments) を使用して、最適化された画像を作成するために必要なすべてのデータを指定したクエリーを作成します。なお、GraphQL Playground では GraphQL フラグメントは動作しません。 -4. `img` タグは、`Image` という名前の `gatsby-image` コンポーネントと交換されました。 `src` 属性の代わりに、最適化された画像データを持つオブジェクトを受け入れます。 +4. `img` タグは、`Image` という名前の `gatsby-image` コンポーネントと交換されました。`src` 属性の代わりに、最適化された画像データを持つオブジェクトを受け入れます。 このファイルを保存し、`gatsby develop` コマンドを実行して、`localhost:8000/gql/purple-hat/` を開いてみましょう。 From b982bd61262a9f3e6c698e86373e5214a72ef037 Mon Sep 17 00:00:00 2001 From: shinobuhori <59085077+shinobuhori@users.noreply.github.com> Date: Sun, 16 Feb 2020 02:22:31 +0900 Subject: [PATCH 15/17] Update docs/docs/why-gatsby-uses-graphql.md Co-Authored-By: Jesse Katsumata --- docs/docs/why-gatsby-uses-graphql.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/why-gatsby-uses-graphql.md b/docs/docs/why-gatsby-uses-graphql.md index 77e875c07..8a9f2179b 100644 --- a/docs/docs/why-gatsby-uses-graphql.md +++ b/docs/docs/why-gatsby-uses-graphql.md @@ -376,7 +376,7 @@ export default Product 3. [GraphQL フラグメント](/packages/gatsby-image/#fragments) を使用して、最適化された画像を作成するために必要なすべてのデータを指定したクエリーを作成します。なお、GraphQL Playground では GraphQL フラグメントは動作しません。 4. `img` タグは、`Image` という名前の `gatsby-image` コンポーネントと交換されました。`src` 属性の代わりに、最適化された画像データを持つオブジェクトを受け入れます。 -このファイルを保存し、`gatsby develop` コマンドを実行して、`localhost:8000/gql/purple-hat/` を開いてみましょう。 +このファイルを保存し、`gatsby develop` コマンドを実行して、`http://localhost:8000/gql/purple-hat/` を開いてみましょう。 ![紫色の帽子をかぶった猫の遅延読み込み画像](./images/why-gql-images.gif) From f87fbec6dd1b036d72d8db3f9a3844e4636a31e3 Mon Sep 17 00:00:00 2001 From: shinobuhori <59085077+shinobuhori@users.noreply.github.com> Date: Sun, 16 Feb 2020 07:34:57 +0900 Subject: [PATCH 16/17] Update docs/docs/why-gatsby-uses-graphql.md Co-Authored-By: Jesse Katsumata --- docs/docs/why-gatsby-uses-graphql.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/why-gatsby-uses-graphql.md b/docs/docs/why-gatsby-uses-graphql.md index 8a9f2179b..bd9b7c5de 100644 --- a/docs/docs/why-gatsby-uses-graphql.md +++ b/docs/docs/why-gatsby-uses-graphql.md @@ -2,7 +2,7 @@ title: Gatsby が GraphQL を使用する理由 --- -「なぜ Gatsby は GraphQL を使用するのですか？ Gatsby は静的ファイルを生成するのですよね？」とよく質問されます。 +「なぜ Gatsby は GraphQL を使用するのですか？Gatsby は静的ファイルを生成するのですよね？」とよく質問されます。 何らかのコンテキストが与えられなければ、Gatsby にとって GraphQL は過剰に見えるかもしれません。このドキュメントでは、ページ作成時に発生する問題と、それらの問題を GraphQL を使用して解決する方法について説明します。 From ab402055c5914648c24ffc09ec7ed9976da732aa Mon Sep 17 00:00:00 2001 From: shinobuhori <59085077+shinobuhori@users.noreply.github.com> Date: Sun, 16 Feb 2020 13:30:11 +0900 Subject: [PATCH 17/17] Update docs/docs/why-gatsby-uses-graphql.md Co-Authored-By: Yasuaki Uechi --- docs/docs/why-gatsby-uses-graphql.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/why-gatsby-uses-graphql.md b/docs/docs/why-gatsby-uses-graphql.md index bd9b7c5de..9d1fbb59f 100644 --- a/docs/docs/why-gatsby-uses-graphql.md +++ b/docs/docs/why-gatsby-uses-graphql.md @@ -49,7 +49,7 @@ exports.createPages = ({ actions: { createPage } }) => { ![１つ前のコードスニペットで生成されたページのスクリーンショット](./images/why-gql-no-data.png) -もっともシンプルな場合は、 Gatsby でページを作成するために必要な手順はこれだけです。しかし多くの場合は、ページにデータを渡し、テンプレートコンポーネントを再利用できるようにしたいはずです。 +もっともシンプルな場合は、Gatsby でページを作成するために必要な手順はこれだけです。しかし多くの場合は、ページにデータを渡し、テンプレートコンポーネントを再利用できるようにしたいはずです。 ## ハードコードされたデータでページを作成する