From e9fcd8fa9d6773c03eae7dd06ac0595b84bdc87c Mon Sep 17 00:00:00 2001 From: kakukakug Date: Wed, 15 Jan 2020 15:22:09 +0900 Subject: [PATCH 1/5] Japanese Translation tutorial/part-six first commit --- docs/tutorial/part-six/index.md | 100 +++++++++++--------------------- 1 file changed, 35 insertions(+), 65 deletions(-) diff --git a/docs/tutorial/part-six/index.md b/docs/tutorial/part-six/index.md index 76f74fcc6..7c60f4881 100644 --- a/docs/tutorial/part-six/index.md +++ b/docs/tutorial/part-six/index.md @@ -1,31 +1,24 @@ --- -title: Transformer plugins +title: トランスフォーマープラグイン typora-copy-images-to: ./ disableTableOfContents: true --- -> This tutorial is part of a series about Gatsby’s data layer. Make sure you’ve gone through [part 4](/tutorial/part-four/) and [part 5](/tutorial/part-five/) before continuing here. +> このチュートリアルは Gatsby のデータ層に関する解説の一部です。先に [part 4](/tutorial/part-four/) と [part 5](/tutorial/part-five/) の内容を完了してください。 -## What's in this tutorial? +## 概要 -The previous tutorial showed how source plugins bring data _into_ Gatsby’s data system. In this tutorial, you'll learn how transformer plugins _transform_ the raw content brought by source plugins. The combination of source plugins and transformer plugins can handle all data sourcing and data transformation you might need when building a Gatsby site. +前回はソースプラグインを使って Gatsby のデータシステムにデータを取り込む方法を説明しました。今回はソースプラグインで取得したデータをトランスフォーマープラグインを使って変換する方法を学びます。ソースプラグインとトランスフォーマープラグインの組み合わせによって、Gatsby でサイトを構築するために必要なすべてのデータ取得と変換を処理できます。 -## Transformer plugins +## トランスフォーマープラグイン -Often, the format of the data you get from source plugins isn't what you want to -use to build your website. The filesystem source plugin lets you query data -_about_ files but what if you want to query data _inside_ files? +多くの場合、ソースプラグインで取得したデータの形式は Web サイトの構築に使用されるものではありません。ファイルシステムソースプラグインを使用することでファイル情報に関するデータを取得できますが、ファイル内に入力されているデータの取得はできません。 -To make this possible, Gatsby supports transformer plugins which take raw -content from source plugins and _transform_ it into something more usable. +これを可能にするため、Gatsby はトランスフォーマープラグインを利用して、ソースプラグインで取得したデータをブログで表示する形式に変換します。 -For example, markdown files. Markdown is nice to write in but when you build a -page with it, you need the markdown to be HTML. +ここではマークダウンを例とします。マークダウンは簡潔に記述できますが Web ページとして表示する場合は HTML に変換する必要があります。 -Add a markdown file to your site at -`src/pages/sweet-pandas-eating-sweets.md` (This will become your first markdown -blog post) and learn how to _transform_ it to HTML using transformer plugins and -GraphQL. +`src/pages/sweet-pandas-eating-sweets.md`に以下のマークダウンファイルを追加して、トランスフォーマープラグインと GraphQL を使って HTML に変換する方法を学びましょう。 ```markdown:title=src/pages/sweet-pandas-eating-sweets.md --- @@ -40,19 +33,15 @@ Here's a video of a panda eating sweets. ``` -Once you save the file, look at `/my-files/` again—the new markdown file is in -the table. This is a very powerful feature of Gatsby. Like the earlier -`siteMetadata` example, source plugins can live-reload data. -`gatsby-source-filesystem` is always scanning for new files to be added and when -they are, re-runs your queries. +ファイルを保存して`/my-files/`を確認してください。表に新しいマークダウンファイルが追加されました。これは Gatsby の非常に便利な機能です。先程の`siteMetadata`の例のように、ソースプラグインはデータをライブリロードできます。`gatsby-source-filesystem`はファイルを常に監視して、ファイルが追加されるとクエリを再実行します。 -Add a transformer plugin that can transform markdown files: +マークダウンファイルを変換できるトランスフォーマープラグインを追加します。 ```shell npm install --save gatsby-transformer-remark ``` -Then add it to the `gatsby-config.js` like normal: +次にプラグインを`gatsby-config.js`に追加します。 ```javascript:title=gatsby-config.js module.exports = { @@ -79,31 +68,21 @@ module.exports = { } ``` -Restart the development server then refresh (or open again) GraphiQL and look -at the autocomplete: +サーバを再起動し GraphiQL を更新するか新しく開き、オートコンプリートを確認します。 ![markdown-autocomplete](markdown-autocomplete.png) -Select `allMarkdownRemark` again and run it as you did for `allFile`. You'll -see there the markdown file you recently added. Explore the fields that are -available on the `MarkdownRemark` node. +`allMarkdownRemark`を選択し、`allFile`のときと同様に実行します。先程追加したマークダウンファイルが表示されるはずです。`MarkdownRemark`ノードで使用可能なフィールドを探します。 ![markdown-query](markdown-query.png) -Ok! Hopefully, some basics are starting to fall into place. Source plugins bring -data _into_ Gatsby's data system and _transformer_ plugins transform raw content -brought by source plugins. This pattern can handle all data sourcing and -data transformation you might need when building a Gatsby site. +いくつかの基本的な設定が動作し始めています。ソースプラグインはデータを Gatsby のデータシステムに取り込み、トランスフォーマープラグインはソースプラグインが取得したデータを変換します。このパターンは Gatsby でサイトを構築するために必要なすべてのデータ取得と変換を処理できます。 -## Create a list of your site's markdown files in `src/pages/index.js` +## マークダウンファイルのリストを`src/pages/index.js`に作成する -Now you'll have to create a list of your markdown files on the front page. Like many -blogs, you want to end up with a list of links on the front page pointing to each -blog post. With GraphQL you can _query_ for the current list of markdown blog -posts so you won't need to maintain the list manually. +次に、フロントページにマークダウンファイルのリストを作成します。多くのブログのように、各投稿へのリンクがリストになってフロントページに表示されます。GraphQL を利用すればマークダウンの投稿のリストを取得できるため、手動でリストを管理する必要はありません。 -Like with the `src/pages/my-files.js` page, replace `src/pages/index.js` with -the following to add a GraphQL query with some initial HTML and styling. +`src/pages/index.js` を GraphQL クエリと HTML とスタイルを追加して次のように書き換えます。`src/pages/my-files.js`と同様です。 ```jsx:title=src/pages/index.js import React from "react" @@ -169,12 +148,11 @@ export const query = graphql` ` ``` -Now the frontpage should look like: +これでフロントページは次のようになります。 ![frontpage](frontpage.png) -But your one blog post looks a bit lonely. So let's add another one at -`src/pages/pandas-and-bananas.md` +しかし、投稿が 1 件のみではリストとは呼べません。`src/pages/pandas-and-bananas.md`にもう 1 件投稿を追加しましょう。 ```markdown:title=src/pages/pandas-and-bananas.md --- @@ -190,35 +168,27 @@ seem to really enjoy bananas! ![two-posts](two-posts.png) -Which looks great! Except… the order of the posts is wrong. +良い感じです！しかし、投稿の表示順が間違っています。 -But this is easy to fix. When querying a connection of some type, you can pass a -variety of arguments to the GraphQL query. You can `sort` and `filter` nodes, set how -many nodes to `skip`, and choose the `limit` of how many nodes to retrieve. With -this powerful set of operators, you can select any data you want—in the format you -need. +修正は簡単です。クエリでデータを取得する時、GraphQL クエリにさまざまな引数を渡すことができます。例えば、ノードの`sort`や`filter`、数を指定して`skip`、`limit`で数の制限などができます。この強力な演算子を利用して必要なデータを必要な形式で選択できます。 -In your index page's GraphQL query, change `allMarkdownRemark` to -`allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC })`. _Note: There are 3 underscores between `frontmatter` and `date`._ Save -this and the sort order should be fixed. +index ページの GraphQL クエリで`allMarkdownRemark`を`allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC })`に変更します。 +これを保存すればでソート順が修正されます。 +_注: frontmatter と date の間はアンダースコアが 3 つです。_ -Try opening GraphiQL and playing with different sort options. You can sort the -`allFile` connection along with other connections. +GraphiQL を開いていろいろな sort オプションを試してみましょう。`allFile`コネクションに加えて他のコネクションでも並び替えることができます。 -For more documentation on our query operators, explore our [GraphQL reference guide.](/docs/graphql-reference/) +クエリ演算子の詳細について知りたい場合は、[GraphQL reference guide.](/docs/graphql-reference/)をご確認ください。 -## Challenge +## やってみよう -Try creating a new page containing a blog post and see what happens to the list of blog posts on the homepage! +新しい投稿ページを作成して、フロントページの投稿リストがどう変わるか確認してみましょう。 -## What's coming next? +## 次は？ -This is great! You've just created a nice index page where you're querying your markdown -files and producing a list of blog post titles and excerpts. But you don't want to just see excerpts, you want actual pages for your markdown files. +よくできました！あなたはマークダウンファイルを取得し、投稿のタイトルと抜粋をリストにして表示する素敵な index ページを作成しました。しかし、抜粋の表示ではなくマークダウンファイルの内容を表示するページが必要です。 -You could continue to create pages by placing React components in `src/pages`. However, you'll -next learn how to _programmatically_ create pages from _data_. Gatsby is _not_ -limited to making pages from files like many static site generators. Gatsby lets -you use GraphQL to query your _data_ and _map_ the query results to _pages_—all at build -time. This is a really powerful idea. You'll be exploring its implications and -ways to use it in the next tutorial, where you'll learn how to [programmatically create pages from data](/tutorial/part-seven/). +React コンポーネントを `src/pages`に配置することで引き続きページを作成できます。次はデータからページを自動的に生成する方法を学びます。 +Gatsby は多くの静的サイトジェネレータと異なり、ファイルからページを作成することに限定されません。 +Gatsby はビルド時に GraphQL を使用してデータを取得し、すべてのクエリの結果をページにマッピングします。 +これはとても強力なアイデアです。次のチュートリアルではその意味と使い方を説明し、[データからプログラムによるページ作成](/tutorial/part-seven/)を学びます。 From e7d74f3b12aa0f42bff64c124c7c295380d3452b Mon Sep 17 00:00:00 2001 From: kakukakug Date: Wed, 15 Jan 2020 16:11:04 +0900 Subject: [PATCH 2/5] Japanese Translation tutorial/part-six complete --- docs/tutorial/part-six/index.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/tutorial/part-six/index.md b/docs/tutorial/part-six/index.md index 7c60f4881..04192d3ad 100644 --- a/docs/tutorial/part-six/index.md +++ b/docs/tutorial/part-six/index.md @@ -12,9 +12,9 @@ disableTableOfContents: true ## トランスフォーマープラグイン -多くの場合、ソースプラグインで取得したデータの形式は Web サイトの構築に使用されるものではありません。ファイルシステムソースプラグインを使用することでファイル情報に関するデータを取得できますが、ファイル内に入力されているデータの取得はできません。 +多くの場合、ソースプラグインで取得したデータの形式は Web サイトの構築に使用されるものではありません。ファイルシステムソースプラグインを使用することでファイル情報に関するデータを取得できますが、ファイル内に入力されているデータは取得できません。 -これを可能にするため、Gatsby はトランスフォーマープラグインを利用して、ソースプラグインで取得したデータをブログで表示する形式に変換します。 +Gatsby はこれを可能にするためトランスフォーマープラグインを利用して、ソースプラグインで取得したデータをブログで表示する形式に変換します。 ここではマークダウンを例とします。マークダウンは簡潔に記述できますが Web ページとして表示する場合は HTML に変換する必要があります。 @@ -33,7 +33,7 @@ Here's a video of a panda eating sweets. ``` -ファイルを保存して`/my-files/`を確認してください。表に新しいマークダウンファイルが追加されました。これは Gatsby の非常に便利な機能です。先程の`siteMetadata`の例のように、ソースプラグインはデータをライブリロードできます。`gatsby-source-filesystem`はファイルを常に監視して、ファイルが追加されるとクエリを再実行します。 +ファイルを保存して`/my-files/`を確認します。表に新しいマークダウンファイルが追加されました。これは Gatsby の非常に便利な機能です。先程の`siteMetadata`の例のように、ソースプラグインはデータをライブリロードできます。`gatsby-source-filesystem`はファイルを常に監視して、ファイルが追加されるとクエリを再実行します。 マークダウンファイルを変換できるトランスフォーマープラグインを追加します。 @@ -68,7 +68,7 @@ module.exports = { } ``` -サーバを再起動し GraphiQL を更新するか新しく開き、オートコンプリートを確認します。 +サーバーを再起動し GraphiQL を更新するか新しく開いて、オートコンプリートを確認します。 ![markdown-autocomplete](markdown-autocomplete.png) @@ -76,13 +76,13 @@ module.exports = { ![markdown-query](markdown-query.png) -いくつかの基本的な設定が動作し始めています。ソースプラグインはデータを Gatsby のデータシステムに取り込み、トランスフォーマープラグインはソースプラグインが取得したデータを変換します。このパターンは Gatsby でサイトを構築するために必要なすべてのデータ取得と変換を処理できます。 +いくつかの Gatsby の基本的な設定ができ始めています。ソースプラグインはデータを Gatsby のデータシステムに取り込み、トランスフォーマープラグインはソースプラグインが取得したデータを変換します。このパターンは Gatsby でサイトを構築するために必要なすべてのデータ取得と変換を処理できます。 ## マークダウンファイルのリストを`src/pages/index.js`に作成する -次に、フロントページにマークダウンファイルのリストを作成します。多くのブログのように、各投稿へのリンクがリストになってフロントページに表示されます。GraphQL を利用すればマークダウンの投稿のリストを取得できるため、手動でリストを管理する必要はありません。 +次に、フロントページにマークダウンファイルのリストを作成します。多くのブログのように、各投稿へのリンクをリストにしてフロントページに表示します。GraphQL を利用すればマークダウンの投稿のリストを取得できるため、手動でリストを管理する必要はありません。 -`src/pages/index.js` を GraphQL クエリと HTML とスタイルを追加して次のように書き換えます。`src/pages/my-files.js`と同様です。 +`src/pages/index.js` に GraphQL クエリと HTML とスタイルを追加して次のように書き換えます。`src/pages/my-files.js`と同様です。 ```jsx:title=src/pages/index.js import React from "react" @@ -170,10 +170,10 @@ seem to really enjoy bananas! 良い感じです！しかし、投稿の表示順が間違っています。 -修正は簡単です。クエリでデータを取得する時、GraphQL クエリにさまざまな引数を渡すことができます。例えば、ノードの`sort`や`filter`、数を指定して`skip`、`limit`で数の制限などができます。この強力な演算子を利用して必要なデータを必要な形式で選択できます。 +修正は簡単です。クエリでデータを取得する時、GraphQL クエリにさまざまな引数を渡すことができます。例えば、ノードの`sort`や`filter`、数を指定した`skip`、`limit`で数の制限などができます。この強力な演算子を利用して必要なデータを必要な形式で選択できます。 index ページの GraphQL クエリで`allMarkdownRemark`を`allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC })`に変更します。 -これを保存すればでソート順が修正されます。 +これを保存すればソート順が修正されます。 _注: frontmatter と date の間はアンダースコアが 3 つです。_ GraphiQL を開いていろいろな sort オプションを試してみましょう。`allFile`コネクションに加えて他のコネクションでも並び替えることができます。 @@ -189,6 +189,6 @@ GraphiQL を開いていろいろな sort オプションを試してみまし よくできました！あなたはマークダウンファイルを取得し、投稿のタイトルと抜粋をリストにして表示する素敵な index ページを作成しました。しかし、抜粋の表示ではなくマークダウンファイルの内容を表示するページが必要です。 React コンポーネントを `src/pages`に配置することで引き続きページを作成できます。次はデータからページを自動的に生成する方法を学びます。 -Gatsby は多くの静的サイトジェネレータと異なり、ファイルからページを作成することに限定されません。 +Gatsby は多くの静的サイトジェネレーターと異なり、ファイルからのページ作成に限定されません。 Gatsby はビルド時に GraphQL を使用してデータを取得し、すべてのクエリの結果をページにマッピングします。 これはとても強力なアイデアです。次のチュートリアルではその意味と使い方を説明し、[データからプログラムによるページ作成](/tutorial/part-seven/)を学びます。 From 13819ef6a80bb2ac81f8786564be5a58c508ce20 Mon Sep 17 00:00:00 2001 From: kakukakug Date: Wed, 15 Jan 2020 16:32:28 +0900 Subject: [PATCH 3/5] Japanese Translation tutorial/part-six self review --- docs/tutorial/part-six/index.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/tutorial/part-six/index.md b/docs/tutorial/part-six/index.md index 04192d3ad..00c28756f 100644 --- a/docs/tutorial/part-six/index.md +++ b/docs/tutorial/part-six/index.md @@ -8,17 +8,17 @@ disableTableOfContents: true ## 概要 -前回はソースプラグインを使って Gatsby のデータシステムにデータを取り込む方法を説明しました。今回はソースプラグインで取得したデータをトランスフォーマープラグインを使って変換する方法を学びます。ソースプラグインとトランスフォーマープラグインの組み合わせによって、Gatsby でサイトを構築するために必要なすべてのデータ取得と変換を処理できます。 +前回はソースプラグインを使って Gatsby のデータシステムにデータを取り込む方法を説明しました。今回はソースプラグインが取得したデータを、トランスフォーマープラグインで変換する方法を学びます。ソースプラグインとトランスフォーマープラグインの組み合わせによって、Gatsby でサイトを構築するために必要なすべてのデータ取得と変換を処理できます。 ## トランスフォーマープラグイン -多くの場合、ソースプラグインで取得したデータの形式は Web サイトの構築に使用されるものではありません。ファイルシステムソースプラグインを使用することでファイル情報に関するデータを取得できますが、ファイル内に入力されているデータは取得できません。 +多くの場合、ソースプラグインで取得したデータ形式は Web サイトの構築に使用されるものではありません。ファイルシステムソースプラグインを使用すればファイルのメタデータを取得できますが、ファイル内に入力されているデータは取得できません。 -Gatsby はこれを可能にするためトランスフォーマープラグインを利用して、ソースプラグインで取得したデータをブログで表示する形式に変換します。 +Gatsby はトランスフォーマープラグインを利用して、ソースプラグインで取得したデータをブログで表示する形式へ変換します。 -ここではマークダウンを例とします。マークダウンは簡潔に記述できますが Web ページとして表示する場合は HTML に変換する必要があります。 +ここではマークダウンを例とします。マークダウンは簡潔に記述できますが Web ページとして表示する場合は HTML へ変換する必要があります。 -`src/pages/sweet-pandas-eating-sweets.md`に以下のマークダウンファイルを追加して、トランスフォーマープラグインと GraphQL を使って HTML に変換する方法を学びましょう。 +`src/pages/sweet-pandas-eating-sweets.md`に以下のマークダウンファイルを追加して、トランスフォーマープラグインと GraphQL を使って HTML へ変換する方法を学びましょう。 ```markdown:title=src/pages/sweet-pandas-eating-sweets.md --- @@ -33,7 +33,7 @@ Here's a video of a panda eating sweets. ``` -ファイルを保存して`/my-files/`を確認します。表に新しいマークダウンファイルが追加されました。これは Gatsby の非常に便利な機能です。先程の`siteMetadata`の例のように、ソースプラグインはデータをライブリロードできます。`gatsby-source-filesystem`はファイルを常に監視して、ファイルが追加されるとクエリを再実行します。 +ファイルを保存して`/my-files/`を確認します。表に新しいマークダウンファイルが追加されています。これは Gatsby の非常に便利な機能です。先程の`siteMetadata`の例のように、ソースプラグインはデータをライブリロードします。`gatsby-source-filesystem`はファイルを常に監視して、ファイルが追加されるとクエリを再実行します。 マークダウンファイルを変換できるトランスフォーマープラグインを追加します。 @@ -68,19 +68,19 @@ module.exports = { } ``` -サーバーを再起動し GraphiQL を更新するか新しく開いて、オートコンプリートを確認します。 +サーバーを再起動し GraphiQL を新しく開いてオートコンプリートを確認します。 ![markdown-autocomplete](markdown-autocomplete.png) -`allMarkdownRemark`を選択し、`allFile`のときと同様に実行します。先程追加したマークダウンファイルが表示されるはずです。`MarkdownRemark`ノードで使用可能なフィールドを探します。 +`allMarkdownRemark`を選択し、`allFile`のときと同様にクエリを実行します。先程追加したマークダウンファイルが表示されるはずです。`MarkdownRemark`ノードで使用可能なフィールドを探します。 ![markdown-query](markdown-query.png) -いくつかの Gatsby の基本的な設定ができ始めています。ソースプラグインはデータを Gatsby のデータシステムに取り込み、トランスフォーマープラグインはソースプラグインが取得したデータを変換します。このパターンは Gatsby でサイトを構築するために必要なすべてのデータ取得と変換を処理できます。 +Gatsby の基本的な設定ができ始めています。ソースプラグインはデータを Gatsby のデータシステムに取り込み、トランスフォーマープラグインはソースプラグインが取得したデータを変換します。このパターンは Gatsby でサイトを構築するために必要なすべてのデータ取得と変換を処理できます。 ## マークダウンファイルのリストを`src/pages/index.js`に作成する -次に、フロントページにマークダウンファイルのリストを作成します。多くのブログのように、各投稿へのリンクをリストにしてフロントページに表示します。GraphQL を利用すればマークダウンの投稿のリストを取得できるため、手動でリストを管理する必要はありません。 +次に、フロントページにマークダウンファイルのリストを作成します。多くのブログのように、各投稿へのリンクをリストにしてフロントページに表示します。GraphQL を利用すればマークダウンの投稿を取得できるため、手動でリストを管理する必要はありません。 `src/pages/index.js` に GraphQL クエリと HTML とスタイルを追加して次のように書き換えます。`src/pages/my-files.js`と同様です。 @@ -176,7 +176,7 @@ index ページの GraphQL クエリで`allMarkdownRemark`を`allMarkdownRemark( これを保存すればソート順が修正されます。 _注: frontmatter と date の間はアンダースコアが 3 つです。_ -GraphiQL を開いていろいろな sort オプションを試してみましょう。`allFile`コネクションに加えて他のコネクションでも並び替えることができます。 +GraphiQL を開いていろいろな sort オプションを試しましょう。`allFile`コネクションに加えて他のコネクションでも並び替えることができます。 クエリ演算子の詳細について知りたい場合は、[GraphQL reference guide.](/docs/graphql-reference/)をご確認ください。 @@ -186,9 +186,9 @@ GraphiQL を開いていろいろな sort オプションを試してみまし ## 次は？ -よくできました！あなたはマークダウンファイルを取得し、投稿のタイトルと抜粋をリストにして表示する素敵な index ページを作成しました。しかし、抜粋の表示ではなくマークダウンファイルの内容を表示するページが必要です。 +よくできました！あなたはマークダウンファイルを取得し、投稿のタイトルと抜粋をリストにして表示する index ページを作成しました。しかし、抜粋ではなくマークダウンファイルの内容を表示するページが必要です。 -React コンポーネントを `src/pages`に配置することで引き続きページを作成できます。次はデータからページを自動的に生成する方法を学びます。 +React コンポーネントを `src/pages`に配置することで引き続きページを作成できます。次はプログラムによってデータからページを生成する方法を学びます。 Gatsby は多くの静的サイトジェネレーターと異なり、ファイルからのページ作成に限定されません。 -Gatsby はビルド時に GraphQL を使用してデータを取得し、すべてのクエリの結果をページにマッピングします。 +Gatsby はビルド時に GraphQL を使用してデータを取得し、クエリのすべての結果をページへマッピングします。 これはとても強力なアイデアです。次のチュートリアルではその意味と使い方を説明し、[データからプログラムによるページ作成](/tutorial/part-seven/)を学びます。 From 4d50c2c4008ef3892990cb87d313be145a2a5dae Mon Sep 17 00:00:00 2001 From: kakukakug Date: Wed, 15 Jan 2020 18:51:44 +0900 Subject: [PATCH 4/5] =?UTF-8?q?Japanese=20Translation=20tutorial/part-six?= =?UTF-8?q?=20#31=20=E3=83=9E=E3=83=BC=E3=82=AF=E3=83=80=E3=82=A6=E3=83=B3?= =?UTF-8?q?=20=E2=86=92=20=20Markdown?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 「マークダウン」をすべて「Markdown」変更 --- docs/tutorial/part-six/index.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/tutorial/part-six/index.md b/docs/tutorial/part-six/index.md index 00c28756f..82dce1f38 100644 --- a/docs/tutorial/part-six/index.md +++ b/docs/tutorial/part-six/index.md @@ -16,9 +16,9 @@ disableTableOfContents: true Gatsby はトランスフォーマープラグインを利用して、ソースプラグインで取得したデータをブログで表示する形式へ変換します。 -ここではマークダウンを例とします。マークダウンは簡潔に記述できますが Web ページとして表示する場合は HTML へ変換する必要があります。 +ここでは Markdown を例とします。Markdown は簡潔に記述できますが Web ページとして表示する場合は HTML へ変換する必要があります。 -`src/pages/sweet-pandas-eating-sweets.md`に以下のマークダウンファイルを追加して、トランスフォーマープラグインと GraphQL を使って HTML へ変換する方法を学びましょう。 +`src/pages/sweet-pandas-eating-sweets.md`に以下の Markdown ファイルを追加して、トランスフォーマープラグインと GraphQL を使って HTML へ変換する方法を学びましょう。 ```markdown:title=src/pages/sweet-pandas-eating-sweets.md --- @@ -33,9 +33,9 @@ Here's a video of a panda eating sweets. ``` -ファイルを保存して`/my-files/`を確認します。表に新しいマークダウンファイルが追加されています。これは Gatsby の非常に便利な機能です。先程の`siteMetadata`の例のように、ソースプラグインはデータをライブリロードします。`gatsby-source-filesystem`はファイルを常に監視して、ファイルが追加されるとクエリを再実行します。 +ファイルを保存して`/my-files/`を確認します。表に新しい Markdown が追加されています。これは Gatsby の非常に便利な機能です。先程の`siteMetadata`の例のように、ソースプラグインはデータをライブリロードします。`gatsby-source-filesystem`はファイルを常に監視して、ファイルが追加されるとクエリを再実行します。 -マークダウンファイルを変換できるトランスフォーマープラグインを追加します。 +Markdown を変換できるトランスフォーマープラグインを追加します。 ```shell npm install --save gatsby-transformer-remark @@ -72,15 +72,15 @@ module.exports = { ![markdown-autocomplete](markdown-autocomplete.png) -`allMarkdownRemark`を選択し、`allFile`のときと同様にクエリを実行します。先程追加したマークダウンファイルが表示されるはずです。`MarkdownRemark`ノードで使用可能なフィールドを探します。 +`allMarkdownRemark`を選択し、`allFile`のときと同様にクエリを実行します。先程追加した Markdown が表示されるはずです。`MarkdownRemark`ノードで使用可能なフィールドを探します。 ![markdown-query](markdown-query.png) Gatsby の基本的な設定ができ始めています。ソースプラグインはデータを Gatsby のデータシステムに取り込み、トランスフォーマープラグインはソースプラグインが取得したデータを変換します。このパターンは Gatsby でサイトを構築するために必要なすべてのデータ取得と変換を処理できます。 -## マークダウンファイルのリストを`src/pages/index.js`に作成する +## Markdown のリストを`src/pages/index.js`に作成する -次に、フロントページにマークダウンファイルのリストを作成します。多くのブログのように、各投稿へのリンクをリストにしてフロントページに表示します。GraphQL を利用すればマークダウンの投稿を取得できるため、手動でリストを管理する必要はありません。 +次に、フロントページに Markdown のリストを作成します。多くのブログのように、各投稿へのリンクをリストにしてフロントページに表示します。GraphQL を利用すれば Markdown の投稿を取得できるため、手動でリストを管理する必要はありません。 `src/pages/index.js` に GraphQL クエリと HTML とスタイルを追加して次のように書き換えます。`src/pages/my-files.js`と同様です。 @@ -186,7 +186,7 @@ GraphiQL を開いていろいろな sort オプションを試しましょう ## 次は？ -よくできました！あなたはマークダウンファイルを取得し、投稿のタイトルと抜粋をリストにして表示する index ページを作成しました。しかし、抜粋ではなくマークダウンファイルの内容を表示するページが必要です。 +よくできました！あなたは Markdown を取得し、投稿のタイトルと抜粋をリストにして表示する index ページを作成しました。しかし、抜粋ではなく Markdown の内容を表示するページが必要です。 React コンポーネントを `src/pages`に配置することで引き続きページを作成できます。次はプログラムによってデータからページを生成する方法を学びます。 Gatsby は多くの静的サイトジェネレーターと異なり、ファイルからのページ作成に限定されません。 From 6740c54250f38cd47d31f22b632c1bc4a4321066 Mon Sep 17 00:00:00 2001 From: kakukakug Date: Thu, 16 Jan 2020 14:41:52 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=E5=8E=9F=E6=96=87=E3=81=AB=E5=90=88?= =?UTF-8?q?=E3=82=8F=E3=81=9B=E3=81=A6=E5=BC=B7=E8=AA=BF=E8=A1=A8=E7=A4=BA?= =?UTF-8?q?=E3=82=92=E5=8F=8D=E6=98=A0=20=E6=96=9C=E4=BD=93=E3=81=A7?= =?UTF-8?q?=E3=81=AF=E3=81=AA=E3=81=8F=E5=A4=AA=E5=AD=97=E3=82=92=E4=BD=BF?= =?UTF-8?q?=E3=81=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit コードレビューへの対応、強調表示を原文に従い追加しました。 --- docs/tutorial/part-six/index.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/tutorial/part-six/index.md b/docs/tutorial/part-six/index.md index 82dce1f38..9df044300 100644 --- a/docs/tutorial/part-six/index.md +++ b/docs/tutorial/part-six/index.md @@ -8,17 +8,17 @@ disableTableOfContents: true ## 概要 -前回はソースプラグインを使って Gatsby のデータシステムにデータを取り込む方法を説明しました。今回はソースプラグインが取得したデータを、トランスフォーマープラグインで変換する方法を学びます。ソースプラグインとトランスフォーマープラグインの組み合わせによって、Gatsby でサイトを構築するために必要なすべてのデータ取得と変換を処理できます。 +前回はソースプラグインを使って Gatsby のデータシステムにデータを**取り込む**方法を説明しました。今回はソースプラグインが取得したデータを、トランスフォーマープラグインで**変換**する方法を学びます。ソースプラグインとトランスフォーマープラグインの組み合わせによって、Gatsby でサイトを構築するために必要なすべてのデータ取得と変換を処理できます。 ## トランスフォーマープラグイン -多くの場合、ソースプラグインで取得したデータ形式は Web サイトの構築に使用されるものではありません。ファイルシステムソースプラグインを使用すればファイルのメタデータを取得できますが、ファイル内に入力されているデータは取得できません。 +多くの場合、ソースプラグインで取得したデータ形式は Web サイトの構築に使用されるものではありません。ファイルシステムソースプラグインを使用すればファイルの**メタデータ**を取得できますが、ファイル内に**入力されているデータ**は取得できません。 -Gatsby はトランスフォーマープラグインを利用して、ソースプラグインで取得したデータをブログで表示する形式へ変換します。 +Gatsby はトランスフォーマープラグインを利用して、ソースプラグインで取得したデータをブログで表示する形式へ**変換**します。 ここでは Markdown を例とします。Markdown は簡潔に記述できますが Web ページとして表示する場合は HTML へ変換する必要があります。 -`src/pages/sweet-pandas-eating-sweets.md`に以下の Markdown ファイルを追加して、トランスフォーマープラグインと GraphQL を使って HTML へ変換する方法を学びましょう。 +`src/pages/sweet-pandas-eating-sweets.md`に以下の Markdown ファイルを追加して、トランスフォーマープラグインと GraphQL を使って HTML へ**変換**する方法を学びましょう。 ```markdown:title=src/pages/sweet-pandas-eating-sweets.md --- @@ -76,11 +76,11 @@ module.exports = { ![markdown-query](markdown-query.png) -Gatsby の基本的な設定ができ始めています。ソースプラグインはデータを Gatsby のデータシステムに取り込み、トランスフォーマープラグインはソースプラグインが取得したデータを変換します。このパターンは Gatsby でサイトを構築するために必要なすべてのデータ取得と変換を処理できます。 +Gatsby の基本的な設定ができ始めています。ソースプラグインはデータを Gatsby のデータシステムに**取り込み**、トランスフォーマープラグインはソースプラグインが取得したデータを**変換**します。このパターンは Gatsby でサイトを構築するために必要なすべてのデータ取得と変換を処理できます。 ## Markdown のリストを`src/pages/index.js`に作成する -次に、フロントページに Markdown のリストを作成します。多くのブログのように、各投稿へのリンクをリストにしてフロントページに表示します。GraphQL を利用すれば Markdown の投稿を取得できるため、手動でリストを管理する必要はありません。 +次に、フロントページに Markdown のリストを作成します。多くのブログのように、各投稿へのリンクをリストにしてフロントページに表示します。GraphQL を利用すれば Markdown の投稿を**取得**できるため、手動でリストを管理する必要はありません。 `src/pages/index.js` に GraphQL クエリと HTML とスタイルを追加して次のように書き換えます。`src/pages/my-files.js`と同様です。 @@ -188,7 +188,7 @@ GraphiQL を開いていろいろな sort オプションを試しましょう よくできました！あなたは Markdown を取得し、投稿のタイトルと抜粋をリストにして表示する index ページを作成しました。しかし、抜粋ではなく Markdown の内容を表示するページが必要です。 -React コンポーネントを `src/pages`に配置することで引き続きページを作成できます。次はプログラムによってデータからページを生成する方法を学びます。 -Gatsby は多くの静的サイトジェネレーターと異なり、ファイルからのページ作成に限定されません。 -Gatsby はビルド時に GraphQL を使用してデータを取得し、クエリのすべての結果をページへマッピングします。 +React コンポーネントを `src/pages`に配置することで引き続きページを作成できます。次は**プログラム**によって**データ**からページを生成する方法を学びます。 +Gatsby は多くの静的サイトジェネレーターと異なり、ファイルからのページ作成に**限定されません**。 +Gatsby はビルド時に GraphQL を使用してデータを取得し、クエリのすべての**結果**を**ページ**へ**マッピング**します。 これはとても強力なアイデアです。次のチュートリアルではその意味と使い方を説明し、[データからプログラムによるページ作成](/tutorial/part-seven/)を学びます。