From ffa7c432569956571220f5f94797deddfa512364 Mon Sep 17 00:00:00 2001 From: Teruhisa Fukumoto Date: Tue, 10 Mar 2020 22:54:51 +0900 Subject: [PATCH 1/9] translate docs/docs/graphql-concepts.md into Japanese --- docs/docs/graphql-concepts.md | 182 ++++++++++++++++------------------ 1 file changed, 88 insertions(+), 94 deletions(-) diff --git a/docs/docs/graphql-concepts.md b/docs/docs/graphql-concepts.md index 400c54b7d..424958369 100644 --- a/docs/docs/graphql-concepts.md +++ b/docs/docs/graphql-concepts.md @@ -1,42 +1,36 @@ --- -title: GraphQL Concepts +タイトル: GraphQLのコンセプト --- -import LayerModel from "../../www/src/components/layer-model" +"../../www/src/components/layer-model"から、LayerModel をインポートします。 -There are many options for loading data into React components. One of the most -popular and powerful of these is a technology called -[GraphQL](http://graphql.org/). +React コンポーネントにデータをロードするためのオプションは、数多くあります。なかでももっとも人気があり、かつ強力な技術が[GraphQL](http://graphql.org/)です。 -GraphQL was invented at Facebook to help product engineers _pull_ needed data into -React components. +GraphQL は、開発者がより楽に React コンポーネントにデータを取り込む（_pull_)ために、Facebook で発明されました。 -GraphQL is a **q**uery **l**anguage (the _QL_ part of its name). If you're -familiar with SQL, it works in a very similar way. Using a special syntax, you describe -the data you want in your component and then that data is given -to you. +GraphQL はクエリー検索言語（GraphQL の QL は、Query Language の*QL*)です。 -Gatsby uses GraphQL to enable [page and StaticQuery -components](/docs/building-with-components/) to declare what data they and their -sub-components need. Then, Gatsby makes that data available in -the browser when needed by your components. +SQL に精通している開発者であれば、GraphQL を同じように扱うことができます。特別な構文を使用して、コンポーネントに必要なデータを記述すれば、そのデータが提供されます。 -Data from any number of sources is made queryable in one unified layer, a key part of the Gatsby building process: +Gatsby は GraphQL を使用して、[ページおよび StaticQuery コンポーネント](/docs/building-with-components/)で有効になったデータとそのサブコンポーネントに必要なデータを宣言します。 次に Gatsby は、コンポーネントにデータが必要となるタイミングで、ブラウザーで使用できます。 + +複数ソースからのデータは、Gatsby の構築プロセスの重要な部分である、統合レイヤーで検索可能になります。 -## Why is GraphQL so cool? +## GraphQL はなぜ良いのか -For a more in-depth look, read [why Gatsby uses GraphQL](/docs/why-gatsby-uses-graphql/). +詳細については、[Gatsby が GraphQL を使用する理由](/docs/why-gatsby-uses-graphql/)を参照してください。 -- Eliminate frontend data boilerplate — no need to worry about requesting & waiting for data. Just ask for the data you need with a GraphQL query and it'll show up when you need it -- Push frontend complexity into queries — many data transformations can be done at _build-time_ within your GraphQL queries -- It's the perfect data querying language for the often complex/nested data dependencies of modern applications -- Improve performance by removing data bloat — GraphQL enables you to select only the data you need, not whatever an API returns +- フロントエンドのデータボイラープレート — データの要求と待機を心配する必要はありません。 GraphQL クエリーで必要なデータを要求するだけで、必要なときに表示されます +- フロントエンドの複雑さをクエリーに投げる — GraphQL クエリー内の _build-time_ で多くのデータ変換を実行できます +- モダンなアプリケーションにありがちな、複雑でネストされたデータの依存関係に最適なデータクエリー言語です +- データの肥大化を除去してパフォーマンスを改善 — GraphQL では、API のレスポンス値ではなく、必要なデータのみを選択し取得できます -## What does a GraphQL query look like? +## GraphQL はどんな感じか -GraphQL lets you ask for the exact data you need. Queries look like JSON: +GraphQL では、必要なる正しいデータを要求できます。 +クエリーは JSON ライクです。 ```graphql { @@ -48,7 +42,7 @@ GraphQL lets you ask for the exact data you need. Queries look like JSON: } ``` -Which returns this: +このように返ってきます。 ```json { @@ -60,7 +54,7 @@ Which returns this: } ``` -A basic page component with a GraphQL query might look like this: +GraphQL クエリーを含む基本的なページコンポーネントは、次のようになります。 ```jsx import React from "react" @@ -84,67 +78,60 @@ export const query = graphql` ` ``` -The result of the query is automatically inserted into your React component -on the `data` prop. GraphQL and Gatsby let you ask for data and then -immediately start using it. +クエリーの結果は、 `data`プロパティの React コンポーネントに自動的に挿入されます。GraphQL と Gatsby を使用すると、データを要求すると即座に使用を開始できます。 -**Note:** To run GraphQL queries in non-page components you'll need to use [Gatsby's Static Query feature](/docs/static-query/). +**注:** ページ以外のコンポーネントで GraphQL クエリーを実行するには、[Gatsby の静的クエリー機能](/docs/static-query/)を使用する必要があります。 -### Understanding the parts of a query +### クエリーを理解する -The following diagram shows a GraphQL query, with each word highlighted in a color corresponding to its name on the legend: +図は、凡例の名前に、対応する色で強調された各単語を含む GraphQL クエリーを示しています。 ![GraphQL query diagram](./images/basic-query.png) -#### Query operation type +#### クエリーオペレーションタイプ + +図では、`Query`という単語を`Operation type`としてマーキングしています。Gatsby が扱う操作タイプは`Query`のみのため、必要に応じてクエリーから省略できます（上記の例のように）。 -The diagram marks the word `query` as the "Operation Type", for Gatsby's uses the only operation type you will deal with is `query`, this can be omitted from your queries if you prefer (like in the above example). +#### オペレーションネーム -#### Operation name +`SiteInformation`は`Operation Name`としてマークされます。これは、クエリーに自分で割り当てる一意の名前です。 -`SiteInformation` is marked as the "Operation Name", which is a unique name that you assign to a query yourself. This is similar to how you would name a function or a variable, and like a function this can be omitted if you would rather the query be anonymous. +関数や変数に名前を付ける方法と似ています。関数のように、クエリーを匿名にする場合は省略できます。 -#### Query fields +#### クエリーフィールド -The four words `site`, `id`, `siteMetadata`, and `title` are marked as "Fields". Any top-level fields -- like `site` in the diagram -- are sometimes referred to as **root level fields**, though the name doesn't signify functional significance as all fields in GraphQL queries behave the same. +4 つの単語`site`、`id`、`siteMetadata`、および`title`は"Fields"としてマークされます。 -## How to learn GraphQL +GraphQL クエリーのすべてのフィールドは同じように動作するため、名前は機能上の重要性を意味しませんが、トップレベルのフィールド（図の`site`など）は**ルートレベルのフィールド**と呼ばれることもあります。 -Your experience developing with Gatsby might be the first time you've seen GraphQL! We hope you love it as much -as we do and find it useful for all your projects. +## GraphQL の学び方 -When starting out with GraphQL, we recommend the following two tutorials: +GraphQL を初めて見たのは、Gatsby での開発経験です！　あなたがそれを愛することを願っています。すべてのプロジェクトに役立つと思います。 + +GraphQL を使用する場合、次の 2 つのチュートリアルをお勧めします。 - https://www.howtographql.com/ - http://graphql.org/learn/ -[The official Gatsby tutorial](/tutorial/part-four/) also includes an introduction to using GraphQL specifically with Gatsby. +[Gatsby 公式チュートリアル](/tutorial/part-four/)には、特に Gatsby で GraphQL を使用するための紹介も含まれています。 -## How do GraphQL and Gatsby work together? +## GraphQL と Gatsby はどう連携するか -One of the great things about GraphQL is how flexible it is. People use GraphQL -with [many different programming languages](http://graphql.org/code/) and for web and native apps. +GraphQL の優れた点の 1 つは、その柔軟性です。 GraphQL は、[多くの異なるプログラミング言語](http://graphql.org/code/)で、Web アプリとネイティブアプリに使用されます。 -Most people run GraphQL on a server to respond live to requests for -data from clients. You define a schema (a schema is a formal way of describing -the shape of your data) for your GraphQL server and then your GraphQL resolvers -retrieve data from databases and/or other APIs. +ほとんどの人は、サーバーで GraphQL を実行して、クライアントからのデータの要求にライブで応答します。GraphQL サーバーのスキーマ（スキーマはデータの形状を記述する正式な方法です）を定義し、GraphQL リゾルバーがデータベースや他の API からデータを取得します。 -Gatsby uses GraphQL at _build-time_ and _not_ for live -sites. This is unique, and it means you don't need to run additional services (e.g. a database -and Node.js service) to use GraphQL for production websites. +Gatsby は、ライブサイトの*build-time*および*not*で GraphQL を使用します。これはユニークであり、実際に動いている Web サイトで GraphQL を使用するためにサービス（データベースや Node.js など）を余計に実行する必要がないことを意味します。 -Gatsby is a great framework for building apps so it's possible and encouraged -to pair Gatsby's native build-time GraphQL with GraphQL queries running against -a live GraphQL server from the browser. +Gatsby はアプリを構築するための優れたフレームワークであるため、ブラウザーからライブの GraphQL サーバーに対して実行される Gatsby のネイティブビルド時に、GraphQL と GraphQL クエリーを組み合わせることが可能です。 -## Where does Gatsby's GraphQL schema come from? +## Gatsby の GraphQL スキーマはどこから来るのか -Most usages of GraphQL involve manually creating a GraphQL schema. +GraphQL のほとんどの使用法では、GraphQL スキーマを手動で作成します。 -Gatsby uses plugins which can fetch data from different sources. That data is used to automatically _infer_ a GraphQL schema. +Gatsby は、さまざまなソースからデータを取得できるプラグインを使用します。そのデータは、GraphQL スキーマを自動的に推測（_infer_)するために使用されます。 -If you give Gatsby data that looks like this: +次のような Gatsby データを指定した場合： ```json { @@ -152,25 +139,25 @@ If you give Gatsby data that looks like this: } ``` -Gatsby will create a schema that looks something like this: +Gatsby は、次のようなスキーマを作成します。 ``` title: String ``` -This makes it easy to pull data from anywhere and immediately start writing -GraphQL queries against your data. +これにより、どこからでも簡単にデータを要求し、データに対する GraphQL クエリーの作成をすぐに開始できます。 + +この _can_ は、いくつかのデータソースで定義できるため、混乱を引き起こします。スキーマの一部またはすべてにデータが追加されていない場合でも、スキーマのこれらの部分は Gatsby で再作成されない可能性があります。 -This _can_ cause confusion as some data sources allow you to define -a schema even when there's not any data added for parts or all of the schema. If parts of the data haven't been added, then those parts of the schema might not be recreated in Gatsby. +## 強力なデータ変換 -## Powerful data transformations +GraphQL は、Gatsby の別のユニークな機能を可能にします — クエリーへの引数でデータ変換を制御できます。 次に例を示します。 -GraphQL enables another unique feature of Gatsby — it lets you control data transformations with arguments to your queries. Some examples follow. +### 日付のフォーマット -### Formatting dates +多くの場合、"2018-01-05"のような日付を保存しますが、"2018 年 1 月 5 日"のような他の形式で日付を表示したいと考えています。 -People often store dates like "2018-01-05" but want to display the date in some other form like "January 5th, 2018". One way of doing this is to load a date-formatting JavaScript library into the browser. Or, with Gatsby's GraphQL layer, you can do the formatting at query-time like: +これを行う 1 つの方法は、日付形式の JavaScript ライブラリをブラウザーにロードすることです。または、Gatsby の GraphQL レイヤーを使用すると、クエリ時にフォーマットを次のように行うことができます。 ```graphql { @@ -178,11 +165,13 @@ People often store dates like "2018-01-05" but want to display the date in some } ``` -See the full list of formatting options by viewing our [GraphQL reference page](/docs/graphql-reference/#dates). +フォーマットオプションの完全なリストは、 [GraphQL reference page](/docs/graphql-reference/#dates)を表示してご覧ください。 -### Markdown +### マークダウン -Gatsby has _transformer_ plugins which can transform data from one form to another. A common example is markdown. If you install [`gatsby-transformer-remark`](/packages/gatsby-transformer-remark/), then in your queries, you can specify if you want the transformed HTML version instead of markdown: +Gatsby には、あるフォームから別のフォームにデータを変換できる _transformer_ プラグインがあります。 + +一般的な例はマークダウンです。 [`gatsby-transformer-remark`](/packages/gatsby-transformer-remark/)をインストールする場合、マークダウンの代わりに、変換された HTML バージョンを使用するかどうかをクエリで指定できます。 ```graphql markdownRemark { @@ -190,13 +179,15 @@ markdownRemark { } ``` -### Images +### 画像 + +Gatsby は、画像の処理を豊富にサポートしています。 -Gatsby has rich support for processing images. Responsive images are a big part of the modern web and typically involve creating 5+ sized thumbnails per photo. With Gatsby's [`gatsby-transformer-sharp`](/packages/gatsby-transformer-sharp/), you can _query_ your images for responsive versions. The query automatically creates all the needed responsive thumbnails and returns `src` and `srcSet` fields to add to your image element. +レスポンシブ画像は現代のウェブの大部分を占めており、通常、写真ごとに 5 つ以上のサイズのサムネイルを作成する必要があります。 Gatsby の[`gatsby-transformer-sharp`](/packages/gatsby-transformer-sharp/)を使用すると、レスポンシブバージョンの画像を*query*できます。 クエリは、必要なレスポンシブサムネイルをすべて自動的に作成し、 `src`および`srcSet`フィールドを返して、画像要素に追加します。 -Combined with a special Gatsby image component, [gatsby-image](/packages/gatsby-image/), you have a very powerful set of primitives for building sites with images. +特別な Gatsby 画像コンポーネント[gatsby-image](/packages/gatsby-image/)と組み合わせることで、画像を含むサイトを構築するための非常に強力なセットを使用できます。 -This is what a component using `gatsby-image` looks like: +以下は、 `gatsby-image`を使用するコンポーネントがどのように見えるかです： ```jsx import React from "react" @@ -225,20 +216,23 @@ export const query = graphql` ` ``` -See also the following blog posts: +こちらのブログもご覧ください。 - [Making Website Building Fun](/blog/2017-10-16-making-website-building-fun/) - [Image Optimization Made Easy with Gatsby.js](https://medium.com/@kyle.robert.gill/ridiculously-easy-image-optimization-with-gatsby-js-59d48e15db6e) -## Advanced +## 上級者向け + +### フラグメント -### Fragments +[querying images](#images)の上記の例では、 `... GatsbyImageSharpFixed`を使用したことに注意してください。 -Notice that in the above example for [querying images](#images), we used `...GatsbyImageSharpFixed`, which is a GraphQL Fragment, a reusable set of fields for query composition. You can read more about them [here](http://graphql.org/learn/queries/#fragments). +これは、GraphQL Fragment であり、クエリー作成用の再利用可能なフィールドのセットです。 +詳細については、[こちら](http://graphql.org/learn/queries/#fragments)をご覧ください。 -If you wish to define your own fragments for use in your application, you can use named exports to export them in any JavaScript file, and they will be automatically processed by Gatsby for use in your GraphQL queries. +アプリケーションで使用する独自のフラグメントを定義する場合は、名前付きのエクスポートを使用して、任意の JavaScript ファイルにエクスポートできます。それらは GraphQL クエリーで使用するために Gatsby によって自動的に処理されます。 -For example, if I put a fragment in a helper component, I can use that fragment in any other query: +たとえば、ヘルパーコンポーネントにフラグメントを配置すると、他のクエリーでそのフラグメントを使用できます。 ```jsx:title=src/components/PostItem.js export const markdownFrontmatterFragment = graphql` @@ -252,7 +246,7 @@ export const markdownFrontmatterFragment = graphql` ` ``` -They can then be used in any GraphQL query after that! +それらはその後、GraphQL クエリーで使用できます！ ```graphql query($path: String!) { @@ -262,7 +256,7 @@ query($path: String!) { } ``` -It’s good practice for your helper components to define and export a fragment for the data they need. For example, on your index page you might map over all of your posts to show them in a list. +ヘルパーコンポーネントは、必要なデータのフラグメントを定義してエクスポートすることをお勧めします。 たとえば、インデックスページで、すべての投稿をマップして一覧に表示できます。 ```jsx:title=src/pages/index.jsx import React from "react" @@ -302,7 +296,7 @@ export const query = graphql` ` ``` -If the index component becomes too large, you might want to refactor it into smaller components. +インデックスコンポーネントが大きくなりすぎた場合は、小さなコンポーネントにリファクタリングすることをお勧めします。 ```jsx:title=src/components/IndexPost.jsx import React from "react" @@ -326,7 +320,7 @@ export const query = graphql` ` ``` -Now, you can use the component together with the exported fragment in your index page. +これで、インデックスページでエクスポートされたフラグメントとともにコンポーネントを使用できます。 ```jsx:title=src/pages/index.jsx import React from "react" @@ -362,20 +356,20 @@ export const query = graphql` ` ``` -## Further reading +## 参考文献 -- [Why Gatsby Uses GraphQL](/docs/why-gatsby-uses-graphql/) -- [The Anatomy of a GraphQL Query](https://blog.apollographql.com/the-anatomy-of-a-graphql-query-6dffa9e9e747) +- [Gatsby が GraphQL を使う理由](/docs/why-gatsby-uses-graphql/) +- [GraphQL クエリーの構造](https://blog.apollographql.com/the-anatomy-of-a-graphql-query-6dffa9e9e747) -### Getting started with GraphQL +### GraphQL をはじめてみよう - http://graphql.org/learn/ - https://www.howtographql.com/ - https://reactjs.org/blog/2015/05/01/graphql-introduction.html - https://services.github.com/on-demand/graphql/ -### Advanced readings on GraphQL +### GraphQL をより理解するために -- [GraphQL specification](https://facebook.github.io/graphql/October2016/) -- [Interfaces and Unions](https://medium.com/the-graphqlhub/graphql-tour-interfaces-and-unions-7dd5be35de0d) -- [Relay Compiler (which Gatsby uses to process queries)](https://facebook.github.io/relay/docs/en/compiler-architecture.html) +- [GraphQL の仕様](https://facebook.github.io/graphql/October2016/) +- [インターフェースとユニオン](https://medium.com/the-graphqlhub/graphql-tour-interfaces-and-unions-7dd5be35de0d) +- [リレーコンパイラ(Gatsby がクエリーを処理するために)](https://facebook.github.io/relay/docs/en/compiler-architecture.html) From 603304e3859ffac8e7f61f9159701bd7aa6330a5 Mon Sep 17 00:00:00 2001 From: Teruhisa Fukumoto Date: Tue, 10 Mar 2020 23:19:37 +0900 Subject: [PATCH 2/9] do with orh rules --- docs/docs/graphql-concepts.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/docs/graphql-concepts.md b/docs/docs/graphql-concepts.md index 424958369..6d0d866ff 100644 --- a/docs/docs/graphql-concepts.md +++ b/docs/docs/graphql-concepts.md @@ -22,7 +22,7 @@ Gatsby は GraphQL を使用して、[ページおよび StaticQuery コンポ 詳細については、[Gatsby が GraphQL を使用する理由](/docs/why-gatsby-uses-graphql/)を参照してください。 -- フロントエンドのデータボイラープレート — データの要求と待機を心配する必要はありません。 GraphQL クエリーで必要なデータを要求するだけで、必要なときに表示されます +- フロントエンドのデータの雛形 — データの要求と待機を心配する必要はありません。 GraphQL クエリーで必要なデータを要求するだけで、必要なときに表示されます - フロントエンドの複雑さをクエリーに投げる — GraphQL クエリー内の _build-time_ で多くのデータ変換を実行できます - モダンなアプリケーションにありがちな、複雑でネストされたデータの依存関係に最適なデータクエリー言語です - データの肥大化を除去してパフォーマンスを改善 — GraphQL では、API のレスポンス値ではなく、必要なデータのみを選択し取得できます @@ -80,7 +80,7 @@ export const query = graphql` クエリーの結果は、 `data`プロパティの React コンポーネントに自動的に挿入されます。GraphQL と Gatsby を使用すると、データを要求すると即座に使用を開始できます。 -**注:** ページ以外のコンポーネントで GraphQL クエリーを実行するには、[Gatsby の静的クエリー機能](/docs/static-query/)を使用する必要があります。 +**注：** ページ以外のコボイラープレートンポーネントで GraphQL クエリーを実行するには、[Gatsby の静的クエリー機能](/docs/static-query/)を使用する必要があります。 ### クエリーを理解する @@ -90,19 +90,19 @@ export const query = graphql` #### クエリーオペレーションタイプ -図では、`Query`という単語を`Operation type`としてマーキングしています。Gatsby が扱う操作タイプは`Query`のみのため、必要に応じてクエリーから省略できます（上記の例のように）。 +図では、`Query`という単語を `Operation type` としてマーキングしています。Gatsby が扱う操作タイプは `Query` のみのため、必要に応じてクエリーから省略できます（上記の例のように）。 #### オペレーションネーム -`SiteInformation`は`Operation Name`としてマークされます。これは、クエリーに自分で割り当てる一意の名前です。 +`SiteInformation` は `Operation Name` としてマークされます。これは、クエリーに自分で割り当てる一意の名前です。 関数や変数に名前を付ける方法と似ています。関数のように、クエリーを匿名にする場合は省略できます。 #### クエリーフィールド -4 つの単語`site`、`id`、`siteMetadata`、および`title`は"Fields"としてマークされます。 +4 つの単語 `site` 、 `id` 、 `siteMetadata` 、および `title` は"Fields"としてマークされます。 -GraphQL クエリーのすべてのフィールドは同じように動作するため、名前は機能上の重要性を意味しませんが、トップレベルのフィールド（図の`site`など）は**ルートレベルのフィールド**と呼ばれることもあります。 +GraphQL クエリーのすべてのフィールドは同じように動作するため、名前は機能上の重要性を意味しませんが、トップレベルのフィールド（図の `site` など）は**ルートレベルのフィールド**と呼ばれることもあります。 ## GraphQL の学び方 @@ -121,7 +121,7 @@ GraphQL の優れた点の 1 つは、その柔軟性です。 GraphQL は、[ ほとんどの人は、サーバーで GraphQL を実行して、クライアントからのデータの要求にライブで応答します。GraphQL サーバーのスキーマ（スキーマはデータの形状を記述する正式な方法です）を定義し、GraphQL リゾルバーがデータベースや他の API からデータを取得します。 -Gatsby は、ライブサイトの*build-time*および*not*で GraphQL を使用します。これはユニークであり、実際に動いている Web サイトで GraphQL を使用するためにサービス（データベースや Node.js など）を余計に実行する必要がないことを意味します。 +Gatsby は、ライブサイトの*build-time*および*not*で GraphQL を使用します。これはユニークであり、実際に動いているウェブサイトで GraphQL を使用するためにサービス（データベースや Node.js など）を余計に実行する必要がないことを意味します。 Gatsby はアプリを構築するための優れたフレームワークであるため、ブラウザーからライブの GraphQL サーバーに対して実行される Gatsby のネイティブビルド時に、GraphQL と GraphQL クエリーを組み合わせることが可能です。 @@ -165,13 +165,13 @@ GraphQL は、Gatsby の別のユニークな機能を可能にします — ク } ``` -フォーマットオプションの完全なリストは、 [GraphQL reference page](/docs/graphql-reference/#dates)を表示してご覧ください。 +フォーマットオプションの一覧は、 [GraphQL reference page](/docs/graphql-reference/#dates)を表示してご覧ください。 -### マークダウン +### Markdown Gatsby には、あるフォームから別のフォームにデータを変換できる _transformer_ プラグインがあります。 -一般的な例はマークダウンです。 [`gatsby-transformer-remark`](/packages/gatsby-transformer-remark/)をインストールする場合、マークダウンの代わりに、変換された HTML バージョンを使用するかどうかをクエリで指定できます。 +一般的な例は Markdown です。 [`gatsby-transformer-remark`](/packages/gatsby-transformer-remark/)をインストールする場合、Markdown の代わりに、変換された HTML バージョンを使用するかどうかをクエリで指定できます。 ```graphql markdownRemark { @@ -183,7 +183,7 @@ markdownRemark { Gatsby は、画像の処理を豊富にサポートしています。 -レスポンシブ画像は現代のウェブの大部分を占めており、通常、写真ごとに 5 つ以上のサイズのサムネイルを作成する必要があります。 Gatsby の[`gatsby-transformer-sharp`](/packages/gatsby-transformer-sharp/)を使用すると、レスポンシブバージョンの画像を*query*できます。 クエリは、必要なレスポンシブサムネイルをすべて自動的に作成し、 `src`および`srcSet`フィールドを返して、画像要素に追加します。 +レスポンシブ画像は現代のウェブの大部分を占めており、通常、写真ごとに 5 つ以上のサイズのサムネイルを作成する必要があります。 Gatsby の[`gatsby-transformer-sharp`](/packages/gatsby-transformer-sharp/)を使用すると、レスポンシブバージョンの画像を*query*できます。 クエリは、必要なレスポンシブサムネイルをすべて自動的に作成し、 `src` および `srcSet` フィールドを返して、画像要素に追加します。 特別な Gatsby 画像コンポーネント[gatsby-image](/packages/gatsby-image/)と組み合わせることで、画像を含むサイトを構築するための非常に強力なセットを使用できます。 From 7fa27d2738212bff4f60842a0e431e0643608282 Mon Sep 17 00:00:00 2001 From: Teruhisa Fukumoto Date: Thu, 12 Mar 2020 22:54:36 +0900 Subject: [PATCH 3/9] Fix typo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit "ボイラーテンプレート" was fixed in an unnecessary place. --- docs/docs/graphql-concepts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/graphql-concepts.md b/docs/docs/graphql-concepts.md index 6d0d866ff..f651aaa01 100644 --- a/docs/docs/graphql-concepts.md +++ b/docs/docs/graphql-concepts.md @@ -80,7 +80,7 @@ export const query = graphql` クエリーの結果は、 `data`プロパティの React コンポーネントに自動的に挿入されます。GraphQL と Gatsby を使用すると、データを要求すると即座に使用を開始できます。 -**注：** ページ以外のコボイラープレートンポーネントで GraphQL クエリーを実行するには、[Gatsby の静的クエリー機能](/docs/static-query/)を使用する必要があります。 +**注：** ページ以外のコンポーネントで GraphQL クエリーを実行するには、[Gatsby の静的クエリー機能](/docs/static-query/)を使用する必要があります。 ### クエリーを理解する From e6a93eb7863b4a2827d3fd015a62e7ee76ff6c92 Mon Sep 17 00:00:00 2001 From: Yasuaki Uechi Date: Fri, 13 Mar 2020 16:04:18 +0900 Subject: [PATCH 4/9] Update docs/docs/graphql-concepts.md --- docs/docs/graphql-concepts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/graphql-concepts.md b/docs/docs/graphql-concepts.md index f651aaa01..e63fa1036 100644 --- a/docs/docs/graphql-concepts.md +++ b/docs/docs/graphql-concepts.md @@ -1,5 +1,5 @@ --- -タイトル: GraphQLのコンセプト +title: GraphQLのコンセプト --- "../../www/src/components/layer-model"から、LayerModel をインポートします。 From 529ad1c51a40acab95bd8324dbcc4a17f8b0e740 Mon Sep 17 00:00:00 2001 From: BSKY Date: Fri, 13 Mar 2020 16:10:04 +0900 Subject: [PATCH 5/9] Update docs/docs/graphql-concepts.md Co-Authored-By: Yasuaki Uechi --- docs/docs/graphql-concepts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/graphql-concepts.md b/docs/docs/graphql-concepts.md index e63fa1036..23a961cb0 100644 --- a/docs/docs/graphql-concepts.md +++ b/docs/docs/graphql-concepts.md @@ -4,7 +4,7 @@ title: GraphQLのコンセプト "../../www/src/components/layer-model"から、LayerModel をインポートします。 -React コンポーネントにデータをロードするためのオプションは、数多くあります。なかでももっとも人気があり、かつ強力な技術が[GraphQL](http://graphql.org/)です。 +React コンポーネントにデータをロードするためのオプションは、数多くあります。なかでももっとも人気があり、かつ強力な技術が [GraphQL](http://graphql.org/) です。 GraphQL は、開発者がより楽に React コンポーネントにデータを取り込む（_pull_)ために、Facebook で発明されました。 From 1cf5e6d99ea92e9579cbe977272a9bd6fe9f730a Mon Sep 17 00:00:00 2001 From: Teruhisa Fukumoto Date: Sat, 21 Mar 2020 00:37:17 +0900 Subject: [PATCH 6/9] delete unnexessary translation and align diff and ordinal text --- docs/docs/graphql-concepts.md | 79 ++++++++++++++++++----------------- 1 file changed, 41 insertions(+), 38 deletions(-) diff --git a/docs/docs/graphql-concepts.md b/docs/docs/graphql-concepts.md index 6d0d866ff..cd9d97572 100644 --- a/docs/docs/graphql-concepts.md +++ b/docs/docs/graphql-concepts.md @@ -2,17 +2,22 @@ タイトル: GraphQLのコンセプト --- -"../../www/src/components/layer-model"から、LayerModel をインポートします。 +React コンポーネントにデータをロードするためのオプションは、数多くあります。 +なかでももっとも人気があり、かつ強力な技術が、 +[GraphQL](http://graphql.org/)です。 -React コンポーネントにデータをロードするためのオプションは、数多くあります。なかでももっとも人気があり、かつ強力な技術が[GraphQL](http://graphql.org/)です。 +GraphQL は、Facebook で発明されました。 +開発者がより楽に React コンポーネントにデータを取り込む（_pull_)ためです。 -GraphQL は、開発者がより楽に React コンポーネントにデータを取り込む（_pull_)ために、Facebook で発明されました。 +GraphQL はクエリー検索言語です。 +（GraphQL の QL は、Query Language の*QL*) +SQL に精通している開発者であれば、GraphQL を同じように扱うことができます。 +特別な構文を使用して、コンポーネントに必要なデータを記述すれば、そのデータが提供されます。 -GraphQL はクエリー検索言語（GraphQL の QL は、Query Language の*QL*)です。 - -SQL に精通している開発者であれば、GraphQL を同じように扱うことができます。特別な構文を使用して、コンポーネントに必要なデータを記述すれば、そのデータが提供されます。 - -Gatsby は GraphQL を使用して、[ページおよび StaticQuery コンポーネント](/docs/building-with-components/)で有効になったデータとそのサブコンポーネントに必要なデータを宣言します。 次に Gatsby は、コンポーネントにデータが必要となるタイミングで、ブラウザーで使用できます。 +Gatsby は GraphQL を使用して、[ページおよび StaticQuery コンポーネント](/docs/building-with-components/)で有効になったデータを宣言します。 +そのサブコンポーネントに必要なデータも合わせて宣言します。 +次に Gatsby は、ブラウザーで使用できます。 +コンポーネントにデータが必要となるタイミングで、使用することが可能です。 複数ソースからのデータは、Gatsby の構築プロセスの重要な部分である、統合レイヤーで検索可能になります。 @@ -29,8 +34,7 @@ Gatsby は GraphQL を使用して、[ページおよび StaticQuery コンポ ## GraphQL はどんな感じか -GraphQL では、必要なる正しいデータを要求できます。 -クエリーは JSON ライクです。 +GraphQL では、必要なる正しいデータを要求できます。クエリーは JSON ライクです。 ```graphql { @@ -78,9 +82,11 @@ export const query = graphql` ` ``` -クエリーの結果は、 `data`プロパティの React コンポーネントに自動的に挿入されます。GraphQL と Gatsby を使用すると、データを要求すると即座に使用を開始できます。 +クエリーの結果は、 `data`プロパティの React コンポーネントに自動的に挿入されます。 + +GraphQL と Gatsby を使用すると、データを要求すると即座に使用を開始できます。 -**注：** ページ以外のコボイラープレートンポーネントで GraphQL クエリーを実行するには、[Gatsby の静的クエリー機能](/docs/static-query/)を使用する必要があります。 +**注：** ページ以外のコ雛形ンポーネントで GraphQL クエリーを実行するには、[Gatsby の静的クエリー機能](/docs/static-query/)を使用する必要があります。 ### クエリーを理解する @@ -94,19 +100,16 @@ export const query = graphql` #### オペレーションネーム -`SiteInformation` は `Operation Name` としてマークされます。これは、クエリーに自分で割り当てる一意の名前です。 - -関数や変数に名前を付ける方法と似ています。関数のように、クエリーを匿名にする場合は省略できます。 +`SiteInformation` は `Operation Name` としてマークされます。これは、クエリーに自分で割り当てる一意の名前です。関数や変数に名前を付ける方法と似ています。関数のように、クエリーを匿名にする場合は省略できます。 #### クエリーフィールド -4 つの単語 `site` 、 `id` 、 `siteMetadata` 、および `title` は"Fields"としてマークされます。 - -GraphQL クエリーのすべてのフィールドは同じように動作するため、名前は機能上の重要性を意味しませんが、トップレベルのフィールド（図の `site` など）は**ルートレベルのフィールド**と呼ばれることもあります。 +4 つの単語 `site` 、 `id` 、 `siteMetadata` 、および `title` は"Fields"としてマークされます。GraphQL クエリーのすべてのフィールドは同じように動作するため、名前は機能上の重要性を意味しませんが、トップレベルのフィールド（図の `site` など）は**ルートレベルのフィールド**と呼ばれることもあります。 ## GraphQL の学び方 -GraphQL を初めて見たのは、Gatsby での開発経験です！　あなたがそれを愛することを願っています。すべてのプロジェクトに役立つと思います。 +GraphQL を初めて見たのは、Gatsby での開発経験です！ +あなたがそれを愛することを願っています。すべてのプロジェクトに役立つと思います。 GraphQL を使用する場合、次の 2 つのチュートリアルをお勧めします。 @@ -117,13 +120,20 @@ GraphQL を使用する場合、次の 2 つのチュートリアルをお勧め ## GraphQL と Gatsby はどう連携するか -GraphQL の優れた点の 1 つは、その柔軟性です。 GraphQL は、[多くの異なるプログラミング言語](http://graphql.org/code/)で、Web アプリとネイティブアプリに使用されます。 +GraphQL の優れた点の 1 つは、その柔軟性です。 +GraphQL は、[多くの異なるプログラミング言語](http://graphql.org/code/)で、Web アプリとネイティブアプリに使用されます。 -ほとんどの人は、サーバーで GraphQL を実行して、クライアントからのデータの要求にライブで応答します。GraphQL サーバーのスキーマ（スキーマはデータの形状を記述する正式な方法です）を定義し、GraphQL リゾルバーがデータベースや他の API からデータを取得します。 +ほとんどの人は、サーバーで GraphQL を実行します。 -Gatsby は、ライブサイトの*build-time*および*not*で GraphQL を使用します。これはユニークであり、実際に動いているウェブサイトで GraphQL を使用するためにサービス（データベースや Node.js など）を余計に実行する必要がないことを意味します。 +そして、クライアントからのデータの要求にライブで応答します。 +GraphQL サーバーのスキーマ（スキーマはデータの形状を記述する正式な方法です）を定義し、GraphQL リゾルバーがデータベースや他の API からデータを取得します。 -Gatsby はアプリを構築するための優れたフレームワークであるため、ブラウザーからライブの GraphQL サーバーに対して実行される Gatsby のネイティブビルド時に、GraphQL と GraphQL クエリーを組み合わせることが可能です。 +Gatsby は、ライブサイトの*build-time*および*not*で GraphQL を使用します。 +これはユニークなことです。 +実際に動いているウェブサイトで GraphQL を使用するためにサービス（データベースや Node.js など）を余計に実行する必要がないことを意味します。 + +Gatsby はアプリを構築するための優れたフレームワークです。 +そのため、ブラウザーからライブの GraphQL サーバーに対して実行される Gatsby のネイティブビルド時に、GraphQL と GraphQL クエリーを組み合わせることが可能です。 ## Gatsby の GraphQL スキーマはどこから来るのか @@ -145,9 +155,11 @@ Gatsby は、次のようなスキーマを作成します。 title: String ``` -これにより、どこからでも簡単にデータを要求し、データに対する GraphQL クエリーの作成をすぐに開始できます。 +これにより、どこからでも簡単にデータを要求できます。 +また、データに対する GraphQL クエリーの作成をすぐに開始できます。 -この _can_ は、いくつかのデータソースで定義できるため、混乱を引き起こします。スキーマの一部またはすべてにデータが追加されていない場合でも、スキーマのこれらの部分は Gatsby で再作成されない可能性があります。 +この _can_ は、いくつかのデータソースで定義できるため、混乱を引き起こします。 +スキーマの一部またはすべてにデータが追加されていない場合でも、スキーマのこれらの部分は Gatsby で再作成されない可能性があります。 ## 強力なデータ変換 @@ -155,9 +167,7 @@ GraphQL は、Gatsby の別のユニークな機能を可能にします — ク ### 日付のフォーマット -多くの場合、"2018-01-05"のような日付を保存しますが、"2018 年 1 月 5 日"のような他の形式で日付を表示したいと考えています。 - -これを行う 1 つの方法は、日付形式の JavaScript ライブラリをブラウザーにロードすることです。または、Gatsby の GraphQL レイヤーを使用すると、クエリ時にフォーマットを次のように行うことができます。 +多くの場合、"2018-01-05"のような日付を保存しますが、"2018 年 1 月 5 日"のような他の形式で日付を表示したいと考えています。これを行う 1 つの方法は、日付形式の JavaScript ライブラリをブラウザーにロードすることです。または、Gatsby の GraphQL レイヤーを使用すると、クエリ時にフォーマットを次のように行うことができます。 ```graphql { @@ -169,9 +179,7 @@ GraphQL は、Gatsby の別のユニークな機能を可能にします — ク ### Markdown -Gatsby には、あるフォームから別のフォームにデータを変換できる _transformer_ プラグインがあります。 - -一般的な例は Markdown です。 [`gatsby-transformer-remark`](/packages/gatsby-transformer-remark/)をインストールする場合、Markdown の代わりに、変換された HTML バージョンを使用するかどうかをクエリで指定できます。 +Gatsby には、あるフォームから別のフォームにデータを変換できる _transformer_ プラグインがあります。一般的な例は Markdown です。 [`gatsby-transformer-remark`](/packages/gatsby-transformer-remark/)をインストールする場合、Markdown の代わりに、変換された HTML バージョンを使用するかどうかをクエリで指定できます。 ```graphql markdownRemark { @@ -181,9 +189,7 @@ markdownRemark { ### 画像 -Gatsby は、画像の処理を豊富にサポートしています。 - -レスポンシブ画像は現代のウェブの大部分を占めており、通常、写真ごとに 5 つ以上のサイズのサムネイルを作成する必要があります。 Gatsby の[`gatsby-transformer-sharp`](/packages/gatsby-transformer-sharp/)を使用すると、レスポンシブバージョンの画像を*query*できます。 クエリは、必要なレスポンシブサムネイルをすべて自動的に作成し、 `src` および `srcSet` フィールドを返して、画像要素に追加します。 +Gatsby は、画像の処理を豊富にサポートしています。レスポンシブ画像は現代のウェブの大部分を占めており、通常、写真ごとに 5 つ以上のサイズのサムネイルを作成する必要があります。 Gatsby の[`gatsby-transformer-sharp`](/packages/gatsby-transformer-sharp/)を使用すると、レスポンシブバージョンの画像を*query*できます。 クエリは、必要なレスポンシブサムネイルをすべて自動的に作成し、 `src` および `srcSet` フィールドを返して、画像要素に追加します。 特別な Gatsby 画像コンポーネント[gatsby-image](/packages/gatsby-image/)と組み合わせることで、画像を含むサイトを構築するための非常に強力なセットを使用できます。 @@ -225,10 +231,7 @@ export const query = graphql` ### フラグメント -[querying images](#images)の上記の例では、 `... GatsbyImageSharpFixed`を使用したことに注意してください。 - -これは、GraphQL Fragment であり、クエリー作成用の再利用可能なフィールドのセットです。 -詳細については、[こちら](http://graphql.org/learn/queries/#fragments)をご覧ください。 +[querying images](#images)の上記の例では、 `... GatsbyImageSharpFixed`を使用したことに注意してください。これは、GraphQL Fragment であり、クエリー作成用の再利用可能なフィールドのセットです。詳細については、[こちら](http://graphql.org/learn/queries/#fragments)をご覧ください。 アプリケーションで使用する独自のフラグメントを定義する場合は、名前付きのエクスポートを使用して、任意の JavaScript ファイルにエクスポートできます。それらは GraphQL クエリーで使用するために Gatsby によって自動的に処理されます。 From 5bef1eef5e824b8aee2513697e8252469ac33221 Mon Sep 17 00:00:00 2001 From: Teruhisa Fukumoto Date: Sat, 21 Mar 2020 20:35:01 +0900 Subject: [PATCH 7/9] add whitespace if switch multibyte char to singlebyte char --- docs/docs/graphql-concepts.md | 40 +++++++++++++++++------------------ 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/docs/docs/graphql-concepts.md b/docs/docs/graphql-concepts.md index cd9d97572..1061f4db9 100644 --- a/docs/docs/graphql-concepts.md +++ b/docs/docs/graphql-concepts.md @@ -4,20 +4,20 @@ React コンポーネントにデータをロードするためのオプションは、数多くあります。 なかでももっとも人気があり、かつ強力な技術が、 -[GraphQL](http://graphql.org/)です。 +[GraphQL](http://graphql.org/) です。 GraphQL は、Facebook で発明されました。 -開発者がより楽に React コンポーネントにデータを取り込む（_pull_)ためです。 +開発者がより楽に React コンポーネントにデータを取り込む（_pull_ )ためです。 GraphQL はクエリー検索言語です。 -（GraphQL の QL は、Query Language の*QL*) +（GraphQL の QL は、Query Language の*QL* ) SQL に精通している開発者であれば、GraphQL を同じように扱うことができます。 特別な構文を使用して、コンポーネントに必要なデータを記述すれば、そのデータが提供されます。 Gatsby は GraphQL を使用して、[ページおよび StaticQuery コンポーネント](/docs/building-with-components/)で有効になったデータを宣言します。 そのサブコンポーネントに必要なデータも合わせて宣言します。 次に Gatsby は、ブラウザーで使用できます。 -コンポーネントにデータが必要となるタイミングで、使用することが可能です。 +コンポーネントにデータが必要となるタイミングで使用可能です。 複数ソースからのデータは、Gatsby の構築プロセスの重要な部分である、統合レイヤーで検索可能になります。 @@ -25,7 +25,7 @@ Gatsby は GraphQL を使用して、[ページおよび StaticQuery コンポ ## GraphQL はなぜ良いのか -詳細については、[Gatsby が GraphQL を使用する理由](/docs/why-gatsby-uses-graphql/)を参照してください。 +詳細については、 [Gatsby が GraphQL を使用する理由](/docs/why-gatsby-uses-graphql/)を参照してください。 - フロントエンドのデータの雛形 — データの要求と待機を心配する必要はありません。 GraphQL クエリーで必要なデータを要求するだけで、必要なときに表示されます - フロントエンドの複雑さをクエリーに投げる — GraphQL クエリー内の _build-time_ で多くのデータ変換を実行できます @@ -82,11 +82,11 @@ export const query = graphql` ` ``` -クエリーの結果は、 `data`プロパティの React コンポーネントに自動的に挿入されます。 +クエリーの結果は、 `data` プロパティの React コンポーネントに自動的に挿入されます。 GraphQL と Gatsby を使用すると、データを要求すると即座に使用を開始できます。 -**注：** ページ以外のコ雛形ンポーネントで GraphQL クエリーを実行するには、[Gatsby の静的クエリー機能](/docs/static-query/)を使用する必要があります。 +**注：** ページ以外の雛形コンポーネントで GraphQL クエリーを実行するには、 [Gatsby の静的クエリー機能](/docs/static-query/)を使用する必要があります。 ### クエリーを理解する @@ -96,7 +96,7 @@ GraphQL と Gatsby を使用すると、データを要求すると即座に使 #### クエリーオペレーションタイプ -図では、`Query`という単語を `Operation type` としてマーキングしています。Gatsby が扱う操作タイプは `Query` のみのため、必要に応じてクエリーから省略できます（上記の例のように）。 +図では、`Query` という単語を `Operation type` としてマーキングしています。 Gatsby が扱う操作タイプは `Query` のみのため、必要に応じてクエリーから省略できます（上記の例のように）。 #### オペレーションネーム @@ -104,7 +104,7 @@ GraphQL と Gatsby を使用すると、データを要求すると即座に使 #### クエリーフィールド -4 つの単語 `site` 、 `id` 、 `siteMetadata` 、および `title` は"Fields"としてマークされます。GraphQL クエリーのすべてのフィールドは同じように動作するため、名前は機能上の重要性を意味しませんが、トップレベルのフィールド（図の `site` など）は**ルートレベルのフィールド**と呼ばれることもあります。 +4 つの単語 `site` 、 `id` 、 `siteMetadata` 、および `title` は "Fields" としてマークされます。 GraphQL クエリーのすべてのフィールドは同じように動作するため、名前は機能上の重要性を意味しませんが、トップレベルのフィールド（図の `site` など）は**ルートレベルのフィールド**と呼ばれることもあります。 ## GraphQL の学び方 @@ -128,7 +128,7 @@ GraphQL は、[多くの異なるプログラミング言語](http://graphql.org そして、クライアントからのデータの要求にライブで応答します。 GraphQL サーバーのスキーマ（スキーマはデータの形状を記述する正式な方法です）を定義し、GraphQL リゾルバーがデータベースや他の API からデータを取得します。 -Gatsby は、ライブサイトの*build-time*および*not*で GraphQL を使用します。 +Gatsby は、ライブサイトの _build-time_ および _not_ で GraphQL を使用します。 これはユニークなことです。 実際に動いているウェブサイトで GraphQL を使用するためにサービス（データベースや Node.js など）を余計に実行する必要がないことを意味します。 @@ -139,7 +139,7 @@ Gatsby はアプリを構築するための優れたフレームワークです GraphQL のほとんどの使用法では、GraphQL スキーマを手動で作成します。 -Gatsby は、さまざまなソースからデータを取得できるプラグインを使用します。そのデータは、GraphQL スキーマを自動的に推測（_infer_)するために使用されます。 +Gatsby は、さまざまなソースからデータを取得できるプラグインを使用します。そのデータは、GraphQL スキーマを自動的に推測（_infer_ )するために使用されます。 次のような Gatsby データを指定した場合： @@ -163,11 +163,11 @@ title: String ## 強力なデータ変換 -GraphQL は、Gatsby の別のユニークな機能を可能にします — クエリーへの引数でデータ変換を制御できます。 次に例を示します。 +GraphQL は、 Gatsby の別のユニークな機能を可能にします — クエリーへの引数でデータ変換を制御できます。 次に例を示します。 ### 日付のフォーマット -多くの場合、"2018-01-05"のような日付を保存しますが、"2018 年 1 月 5 日"のような他の形式で日付を表示したいと考えています。これを行う 1 つの方法は、日付形式の JavaScript ライブラリをブラウザーにロードすることです。または、Gatsby の GraphQL レイヤーを使用すると、クエリ時にフォーマットを次のように行うことができます。 +多くの場合、 "2018-01-05" のような日付を保存しますが、 "2018 年 1 月 5 日"のような他の形式で日付を表示したいと考えています。これを行う 1 つの方法は、日付形式の JavaScript ライブラリをブラウザーにロードすることです。または、Gatsby の GraphQL レイヤーを使用すると、クエリ時にフォーマットを次のように行うことができます。 ```graphql { @@ -175,11 +175,11 @@ GraphQL は、Gatsby の別のユニークな機能を可能にします — ク } ``` -フォーマットオプションの一覧は、 [GraphQL reference page](/docs/graphql-reference/#dates)を表示してご覧ください。 +フォーマットオプションの一覧は、 [GraphQL reference page](/docs/graphql-reference/#dates) を表示してご覧ください。 ### Markdown -Gatsby には、あるフォームから別のフォームにデータを変換できる _transformer_ プラグインがあります。一般的な例は Markdown です。 [`gatsby-transformer-remark`](/packages/gatsby-transformer-remark/)をインストールする場合、Markdown の代わりに、変換された HTML バージョンを使用するかどうかをクエリで指定できます。 +Gatsby には、あるフォームから別のフォームにデータを変換できる _transformer_ プラグインがあります。一般的な例は Markdown です。 [`gatsby-transformer-remark`](/packages/gatsby-transformer-remark/) をインストールする場合、Markdown の代わりに、変換された HTML バージョンを使用するかどうかをクエリで指定できます。 ```graphql markdownRemark { @@ -189,11 +189,11 @@ markdownRemark { ### 画像 -Gatsby は、画像の処理を豊富にサポートしています。レスポンシブ画像は現代のウェブの大部分を占めており、通常、写真ごとに 5 つ以上のサイズのサムネイルを作成する必要があります。 Gatsby の[`gatsby-transformer-sharp`](/packages/gatsby-transformer-sharp/)を使用すると、レスポンシブバージョンの画像を*query*できます。 クエリは、必要なレスポンシブサムネイルをすべて自動的に作成し、 `src` および `srcSet` フィールドを返して、画像要素に追加します。 +Gatsby は、画像の処理を豊富にサポートしています。レスポンシブ画像は現代のウェブの大部分を占めており、通常、写真ごとに 5 つ以上のサイズのサムネイルを作成する必要があります。 Gatsby の [`gatsby-transformer-sharp`](/packages/gatsby-transformer-sharp/) を使用すると、レスポンシブバージョンの画像を _query_ できます。 クエリは、必要なレスポンシブサムネイルをすべて自動的に作成し、 `src` および `srcSet` フィールドを返して、画像要素に追加します。 -特別な Gatsby 画像コンポーネント[gatsby-image](/packages/gatsby-image/)と組み合わせることで、画像を含むサイトを構築するための非常に強力なセットを使用できます。 +特別な Gatsby 画像コンポーネント [gatsby-image](/packages/gatsby-image/) と組み合わせることで、画像を含むサイトを構築するための非常に強力なセットを使用できます。 -以下は、 `gatsby-image`を使用するコンポーネントがどのように見えるかです： +以下は、 `gatsby-image` を使用するコンポーネントがどのように見えるかです： ```jsx import React from "react" @@ -231,7 +231,7 @@ export const query = graphql` ### フラグメント -[querying images](#images)の上記の例では、 `... GatsbyImageSharpFixed`を使用したことに注意してください。これは、GraphQL Fragment であり、クエリー作成用の再利用可能なフィールドのセットです。詳細については、[こちら](http://graphql.org/learn/queries/#fragments)をご覧ください。 +[querying images](#images) の上記の例では、 `... GatsbyImageSharpFixed` を使用したことに注意してください。これは、GraphQL Fragment であり、クエリー作成用の再利用可能なフィールドのセットです。詳細については、[こちら](http://graphql.org/learn/queries/#fragments)をご覧ください。 アプリケーションで使用する独自のフラグメントを定義する場合は、名前付きのエクスポートを使用して、任意の JavaScript ファイルにエクスポートできます。それらは GraphQL クエリーで使用するために Gatsby によって自動的に処理されます。 @@ -375,4 +375,4 @@ export const query = graphql` - [GraphQL の仕様](https://facebook.github.io/graphql/October2016/) - [インターフェースとユニオン](https://medium.com/the-graphqlhub/graphql-tour-interfaces-and-unions-7dd5be35de0d) -- [リレーコンパイラ(Gatsby がクエリーを処理するために)](https://facebook.github.io/relay/docs/en/compiler-architecture.html) +- [リレーコンパイラ (Gatsby がクエリーを処理するために)](https://facebook.github.io/relay/docs/en/compiler-architecture.html) From 3e986224e9abee422000d618cb5fe535020e9c47 Mon Sep 17 00:00:00 2001 From: Teruhisa Fukumoto Date: Sat, 18 Apr 2020 17:17:31 +0900 Subject: [PATCH 8/9] fix key name of metadata key value --- .idea/.gitignore | 2 ++ .idea/gatsby-ja.iml | 8 ++++++++ .idea/misc.xml | 6 ++++++ .idea/modules.xml | 8 ++++++++ .idea/vcs.xml | 6 ++++++ docs/docs/graphql-concepts.md | 2 +- 6 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/gatsby-ja.iml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 000000000..e7e9d11d4 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,2 @@ +# Default ignored files +/workspace.xml diff --git a/.idea/gatsby-ja.iml b/.idea/gatsby-ja.iml new file mode 100644 index 000000000..c956989b2 --- /dev/null +++ b/.idea/gatsby-ja.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 000000000..28a804d89 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 000000000..7af5fcfc5 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 000000000..94a25f7f4 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/docs/docs/graphql-concepts.md b/docs/docs/graphql-concepts.md index 1061f4db9..a7093147f 100644 --- a/docs/docs/graphql-concepts.md +++ b/docs/docs/graphql-concepts.md @@ -1,5 +1,5 @@ --- -タイトル: GraphQLのコンセプト +title: GraphQLのコンセプト --- React コンポーネントにデータをロードするためのオプションは、数多くあります。 From 998253a0ca82b787fefd7507c3e9c71b371a3a56 Mon Sep 17 00:00:00 2001 From: Yasuaki Uechi Date: Mon, 20 Apr 2020 11:53:53 +0900 Subject: [PATCH 9/9] chore: remove unnecessary items --- .idea/.gitignore | 2 -- .idea/gatsby-ja.iml | 8 -------- .idea/misc.xml | 6 ------ .idea/modules.xml | 8 -------- .idea/vcs.xml | 6 ------ 5 files changed, 30 deletions(-) delete mode 100644 .idea/.gitignore delete mode 100644 .idea/gatsby-ja.iml delete mode 100644 .idea/misc.xml delete mode 100644 .idea/modules.xml delete mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore deleted file mode 100644 index e7e9d11d4..000000000 --- a/.idea/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -# Default ignored files -/workspace.xml diff --git a/.idea/gatsby-ja.iml b/.idea/gatsby-ja.iml deleted file mode 100644 index c956989b2..000000000 --- a/.idea/gatsby-ja.iml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml deleted file mode 100644 index 28a804d89..000000000 --- a/.idea/misc.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml deleted file mode 100644 index 7af5fcfc5..000000000 --- a/.idea/modules.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml deleted file mode 100644 index 94a25f7f4..000000000 --- a/.idea/vcs.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file