From d409f829f55ab64202d51bf9fd093db38f5a9199 Mon Sep 17 00:00:00 2001
From: Hirotaka Mizutani <hirotaka@mizutani.to>
Date: Wed, 15 Jan 2020 13:47:53 +0900
Subject: [PATCH 1/5] docs: translate tutorial/part-one/index

---
 docs/tutorial/part-one/index.md | 203 ++++++++++++++++----------------
 1 file changed, 101 insertions(+), 102 deletions(-)

diff --git a/docs/tutorial/part-one/index.md b/docs/tutorial/part-one/index.md
index 81cb56006..b5fc5599b 100644
--- a/docs/tutorial/part-one/index.md
+++ b/docs/tutorial/part-one/index.md
@@ -1,57 +1,57 @@
 ---
-title: Get to Know Gatsby Building Blocks
+title: Gatsbyの構成要素を理解する
 typora-copy-images-to: ./
 disableTableOfContents: true
 ---
 
-In the [**previous section**](/tutorial/part-zero/), you prepared your local development environment by installing the necessary software and creating your first Gatsby site using the [**“hello world” starter**](https://github.com/gatsbyjs/gatsby-starter-hello-world). Now, take a deeper dive into the code generated by that starter.
+[**前のセクション**](/tutorial/part-zero/)で、必要なソフトウェアをインストールしてローカル開発環境を準備し、[**"hello world"スターター**](https://github.com/gatsbyjs/gatsby-starter-hello-world)を使って、最初の Gatsby サイトを作成しました。次に、そのスターターが生成したコードをさらに深く掘り下げていきましょう。
 
-## Using Gatsby starters
+## Gatsby スターターの使用
 
-In [**tutorial part zero**](/tutorial/part-zero/), you created a new site based on the “hello world” starter using the following command:
+[**チュートリアル・パート 0**](/tutorial/part-zero/)で、次のコマンドを使用して"hello world""スターターに基づいて新しいサイトを作成しました。
 
 ```shell
 gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
 ```
 
-When creating a new Gatsby site, you can use the following command structure to create a new site based on any existing Gatsby starter:
+新しい Gatsby サイトを作成する場合、次のコマンド構成を使用して、すでにある Gatsby スターターに基づいて新しいサイトを作成できます。
 
 ```shell
 gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]
 ```
 
-If you omit a URL from the end, Gatsby will automatically generate a site for you based on the [**default starter**](https://github.com/gatsbyjs/gatsby-starter-default). For this section of the tutorial, stick with the “Hello World” site you already created in tutorial part zero. You can learn more about [modifying starters](/docs/modifying-a-starter) in the docs.
+末尾の URL_OF_STARTER_GITHUB_REPO（スターターの GitHub レポジトリ URL）を省略すると、Gatsby は[**デフォルトスターター**](https://github.com/gatsbyjs/gatsby-starter-default)に基づいてサイトを自動的に生成します。チュートリアルのこのセクションでは、チュートリアル・パート 0 ですでに作成した"Hello World"サイトを引き続き使用します。詳細については、[スターターの変更](/docs/modifying-a-starter)のドキュメントをご覧ください。
 
-### ✋ Open up the code
+### ✋ コードを開く
 
-In your code editor, open up the code generated for your “Hello World” site and take a look at the different directories and files contained in the ‘hello-world’ directory. It should look something like this:
+コードエディターで、"Hello World"サイト用に生成されたコードを開き、"hello-world"ディレクトリーに含まれるさまざまなディレクトリとファイルを確認します。次のようになっていることでしょう。
 
-![Hello World project in VS Code](01-hello-world-vscode.png)
+![VS Code上でのHello Worldプロジェクト](01-hello-world-vscode.png)
 
-_Note: Again, the editor shown here is Visual Studio Code. If you’re using a different editor, it will look a little different._
+_ヒント: 繰り返しますが、ここに示すエディターは Visual Studio Code です。別のエディターを使用している場合は、外観が少し異なります。_
 
-Let’s take a look at the code that powers the homepage.
+ホームページを動かしているコードを見ていきましょう。
 
-> 💡 If you stopped your development server after running `gatsby develop` in the previous section, start it up again now — time to make some changes to the hello-world site!
+> 💡 前のセクションで`gatsby develop`を実行した後、開発サーバを止めている場合はもう一度立ち上げてください。それでは、hello-word サイトに変更を加えていきましょう！
 
-## Familiarizing with Gatsby pages
+## Gatsby ページに慣れる
 
-Open up the `/src` directory in your code editor. Inside is a single directory: `/pages`.
+コードエディターで`/src`ディレクトリーを開きます。中に`/pages`というディレクトリーが 1 つあります。
 
-Open the file at `src/pages/index.js`. The code in this file creates a component that contains a single div and some text — appropriately, “Hello world!”
+`src/pages/index.js`ファイルを開きます。このファイルのコードは、ひとつの div といくつかのテキスト（"Hello world!"という文字列）を含んだコンポーネントを作成します。
 
-### ✋ Make changes to the “Hello World” homepage
+### ✋ "Hello World"ホームページに変更を加える
 
-1.  Change the “Hello World!” text to “Hello Gatsby!” and save the file. If your windows are side-by-side, you can see that your code and content changes are reflected almost instantly in the browser after you save the file.
+1. "Hello World!"という文字列を"Hello Gatsby!"に変更して、ファイルを保存します。ウィンドウを横に並べている場合、ファイルを保存すると、コードとコンテンツの変更がブラウザーへほぼ即座に反映されることがわかります。
 
 <video controls="controls" autoplay="true" loop="true">
   <source type="video/mp4" src="./02-demo-hot-reloading.mp4"></source>
-  <p>Sorry! Your browser doesn't support this video.</p>
+  <p>ごめんなさい！お使いのブラウザはこのビデオには対応していません。</p>
 </video>
 
-> 💡 Gatsby uses **hot reloading** to speed up your development process. Essentially, when you’re running a Gatsby development server, the Gatsby site files are being “watched” in the background — any time you save a file, your changes will be immediately reflected in the browser. You don’t need to hard refresh the page or restart the development server — your changes just appear.
+> 💡 Gatsby は**ホットリローディング**を使用して開発プロセスをスピードアップします。基本的に、Gatsby 開発サーバーを実行している場合、Gatsby サイトのファイルをバックグラウンドで「監視」しています。ファイルを保存すると、変更がすぐにブラウザへ反映されます。ページをハードリフレッシュしたり、開発サーバーを再起動したりする必要はありません。変更はすぐに表示されます。
 
-2.  Now you can make your changes a little more visible. Try replacing the code in `src/pages/index.js` with the code below and save again. You’ll see changes to the text — the text color will be purple and the font size will be larger.
+2. 変更した内容をもう少し見やすくすることができます。`src/pages/index.js`のコードを以下のコードに置き換えて、もう一度保存してください。変更されたテキストが表示されます。テキストの色が紫色になり、フォントサイズが大きくなります。
 
 ```jsx:title=src/pages/index.js
 import React from "react"
@@ -61,9 +61,9 @@ export default () => (
 )
 ```
 
-> 💡 We’ll be covering more about styling in Gatsby in [**part two**](/tutorial/part-two/) of the tutorial.
+> 💡 Gatsby のスタイルについてはこのチュートリアルの[**パート 2**](/tutorial/part-two/)で詳しく説明します。
 
-3.  Remove the font size styling, change the “Hello Gatsby!” text to a level-one header, and add a paragraph beneath the header.
+3. フォントサイズのスタイルを削除し、"Hello Gatsby!"テキストをレベル 1 のヘッダーに変更し、ヘッダーの下に段落を追加します。
 
 ```jsx:title=src/pages/index.js
 import React from "react"
@@ -78,9 +78,9 @@ export default () => (
 )
 ```
 
-![More changes with hot reloading](03-more-hot-reloading.png)
+![ホットリロードによるその他の変更](03-more-hot-reloading.png)
 
-4.  Add an image. (In this case, a random image from Unsplash).
+4. 画像を追加します。(ここでは、Unsplash の画像をランダムで表示します)。
 
 ```jsx:title=src/pages/index.js
 import React from "react"
@@ -95,21 +95,21 @@ export default () => (
 )
 ```
 
-![Add image](04-add-image.png)
+![画像を追加](04-add-image.png)
 
-### Wait… HTML in our JavaScript?
+### ちょっと待って… JavaScript に HTML？
 
-_If you’re familiar with React and JSX, feel free to skip this section._ If you haven’t worked with the React framework before, you may be wondering what HTML is doing in a JavaScript function. Or why we’re importing `react` on the first line but seemingly not using it anywhere. This hybrid “HTML-in-JS” is actually a syntax extension of JavaScript, for React, called JSX. You can follow along with this tutorial without prior experience with React, but if you’re curious, here’s a brief primer…
+\_React と JSX に精通している場合は、このセクションをスキップしてください。\_React フレームワークを使用したことがない場合、JavaScript 関数の中で HTML が何をしているのか疑問に思うかもしれません。また、最初の行で"react"をインポートしているのに、どこでも使用していないのはなぜでしょう。このハイブリッドな"HTML-in-JS"は、実際には JSX と呼ばれる React 用の JavaScript の構文拡張です。React を使用した経験がなくても、このチュートリアルを進めることはできますが、興味がある方のために、簡単な解説をしましょう。
 
-Consider the original contents of the `src/pages/index.js` file:
+`src/pages/index.js`ファイルの元の内容をみてみましょう。
 
 ```jsx:title=src/pages/index.js
 import React from "react"
 
-export default () => <div>Hello world!</div>
+export default () => Hello world!
 ```
 
-In pure JavaScript, it looks more like this:
+純粋な JavaScript では、次のようになります。
 
 ```javascript:title=src/pages/index.js
 import React from "react"
@@ -117,42 +117,42 @@ import React from "react"
 export default () => React.createElement("div", null, "Hello world!")
 ```
 
-Now you can spot the use of the `'react'` import! But wait. You’re writing JSX, not pure HTML and JavaScript. How does the browser read that? The short answer: It doesn’t. Gatsby sites come with tooling already set up to convert your source code into something that browsers can interpret.
+これで、 `'react'`のインポートが使われているのを見つけることができます！ちょっと待って。あなたは純粋な HTML や JavaScript ではなく、JSX を書いています。ブラウザーはそれをどのように読み込むのでしょうか？短い答えとしては、読み込みません。Gatsby サイトには、ソースコードをブラウザーが解釈できるものに変換するためのツールがすでに設定されているのです。
 
-## Building with components
+## コンポーネントを使用して構築
 
-The homepage you were just making edits to was created by defining a page component. What exactly is a “component”?
+編集をしたばかりのホームページは、ページコンポーネントを定義して作成しました。「コンポーネント」とは正確には何なのでしょうか？
 
-Broadly defined, a component is a building block for your site; It is a self-contained piece of code that describes a section of UI (user interface).
+大まかに定義すると、コンポーネントはサイトを構成する要素です。 UI（ユーザーインターフェイス）部分を記述する自己完結型なコードです。
 
-Gatsby is built on React. When we talk about using and defining **components**, we are really talking about **React components** — self-contained pieces of code (usually written with JSX) that can accept input and return React elements describing a section of UI.
+Gatsby は React 上に構築されています。本文書の中で**コンポーネント**という言葉を使用したり定義する場合、私たちは**React コンポーネント**のことを指します。React コンポーネントとは、入力を受け付けて、UI 部分を記述する React エレメントを返す自己完結型のコード（通常 JSX で記述）のことです。
 
-One of the big mental shifts you make when starting to build with components (if you are already a developer) is that now your CSS, HTML, and JavaScript are tightly coupled and often living even within the same file.
+コンポーネントを使用して構築しはじめるのに、大きな精神的変化（すでに開発者である場合）の 1 つは、CSS、HTML、および JavaScript が密結合（1 つのファイルになることも多い）されることです。
 
-While a seemingly simple change, this has profound implications for how you think about building websites.
+一見単純な変更ですが、これは Web サイトを構築する上での考え方に深い意味を持ちます。
 
-Take the example of creating a custom button. In the past, you would create a CSS class (perhaps `.primary-button`) with your custom styles and then use it whenever you want to apply those styles. For example:
+カスタムしたボタンを作成する例を見てみましょう。この前までは、CSS クラス（例えば`.primary-button`）を作成しスタイルをカスタムし、それらのスタイルを適用したいときにカスタムしたスタイルを使用していました。以下が例です。
 
 ```html
 <button class="primary-button">Click me</button>
 ```
 
-In the world of components, you instead create a `PrimaryButton` component with your button styles and use it throughout your site like:
+コンポーネントの世界では、ボタンのスタイルの代わりに`PrimaryButton`コンポーネントを作成し、サイト全体で次のように使用します。
 
 <!-- prettier-ignore -->
 ```jsx
 <PrimaryButton>Click me</PrimaryButton>
 ```
 
-Components become the base building blocks of your site. Instead of being limited to the building blocks the browser provides, e.g. `<button />`, you can easily create new building blocks that elegantly meet the needs of your projects.
+コンポーネントは、サイトの基本的な構成要素になります。ブラウザーが提供する制限されたブロック要素（例: `<button />`）に限定されず、プロジェクトのニーズをエレガントに満たす新しい構成要素を簡単に作成できます。
 
-### ✋ Using page components
+### ✋ ページコンポーネントの使用
 
-Any React component defined in `src/pages/*.js` will automatically become a page. Let’s see this in action.
+`src/pages/*.js`で定義した React コンポーネントは自動的にページになります。これを実際に見てみましょう。
 
-You already have a `src/pages/index.js` file that came with the “Hello World” starter. Let’s create an about page.
+すでに"Hello World"スターターに付属する`src/pages/index.js`ファイルがあります。about ページを作成しましょう。
 
-1.  Create a new file at `src/pages/about.js`, copy the following code into the new file, and save.
+1. `src/pages/about.js`に新しいファイルを作成し、次のコードを新しいファイルにコピーして保存します。
 
 ```jsx:title=src/pages/about.js
 import React from "react"
@@ -165,18 +165,18 @@ export default () => (
 )
 ```
 
-2.  Navigate to http://localhost:8000/about/.
+2. http://localhost:8000/about/ に移動します。
 
-![New about page](05-about-page.png)
+![新しい about ページ](05-about-page.png)
 
-Just by putting a React component in the `src/pages/about.js` file, you now have a page accessible at `/about`.
+React コンポーネントを'src/pages/about.js`ファイルに配置するだけで、`/about`でアクセス可能なページを作成します。
 
-### ✋ Using sub-components
+### ✋ サブコンポーネントの使用
 
-Let’s say the homepage and the about page both got quite large and you were rewriting a lot of things. You can use sub-components to break the UI into reusable pieces. Both of your pages have `<h1>` headers — create a component that will describe a `Header`.
+ホームページと about ページの両方が非常に大きくなってくると、多くのことを書き直す必要があります。サブコンポーネントを使用して、UI を再利用可能なパーツに分割できます。どちらのページにも`<h1>`があるので、それらを`Header`というコンポーネントとして作成しましょう。
 
-1.  Create a new directory at `src/components` and a file within that directory called `header.js`.
-2.  Add the following code to the new `src/components/header.js` file.
+1. `src/components`に新しいディレクトリーを作成し、そのディレクトリー内に`header.js`というファイルを作成します。
+2. 次のコードを新しい`src/components/header.js`ファイルに追加します。
 
 ```jsx:title=src/components/header.js
 import React from "react"
@@ -184,7 +184,7 @@ import React from "react"
 export default () => <h1>This is a header.</h1>
 ```
 
-3.  Modify the `about.js` file to import the `Header` component. Replace the `h1` markup with `<Header />`:
+3. `about.js`ファイルを変更して、`Header`コンポーネントをインポートします。`h1`のマークアップを `<Header />'に置き換えます。
 
 ```jsx:title=src/pages/about.js
 import React from "react"
@@ -198,11 +198,11 @@ export default () => (
 )
 ```
 
-![Adding Header component](06-header-component.png)
+![Header コンポーネントの追加](06-header-component.png)
 
-In the browser, the “About Gatsby” header text should now be replaced with “This is a header.” But you don’t want the “About” page to say “This is a header.” You want it to say, “About Gatsby”.
+ブラウザーでは、"About Gatsby"となっていたヘッダーテキストが"This is a header"に置き換えられます。ただし、"About"ページでは、"This is a header"と表示するのではなく、"About Gatsby"と表示したいことでしょう。
 
-4.  Head back to `src/components/header.js` and make the following change:
+4. `src/components/header.js` に戻り、次の変更を行います。
 
 ```jsx:title=src/components/header.js
 import React from "react"
@@ -210,7 +210,7 @@ import React from "react"
 export default props => <h1>{props.headerText}</h1> {/* highlight-line */}
 ```
 
-5.  Head back to `src/pages/about.js` and make the following change:
+5. `src/pages/about.js`に戻り、次の変更を行います。
 
 ```jsx:title=src/pages/about.js
 import React from "react"
@@ -224,37 +224,37 @@ export default () => (
 )
 ```
 
-![Passing data to header](07-pass-data-header.png)
+![Headerにデータを渡す](07-pass-data-header.png)
 
-You should now see your “About Gatsby” header text again!
+また、ヘッダーテキストに"About Gatsby"が表示されました！
 
-### What are “props”?
+### "props"とは何ですか？
 
-Earlier you defined React components as reusable pieces of code describing a UI. To make these reusable pieces dynamic you need to be able to supply them with different data. You do that with input called "props". Props are (appropriately enough) properties supplied to React components.
+先ほど、UI を描写する再利用可能なコードとして React コンポーネントを定義しました。これらの再利用可能な部品を動的にするには、それらに異なるデータを与えられるようにする必要があります。"props"と呼ばれる入力でそれを行います。Props は、React コンポーネントにプロパティを与えるためのものです。
 
-In `about.js` you passed a `headerText` prop with the value of `"About Gatsby"` to the imported `Header` sub-component:
+`about.js`では、インポートした`Header`サブコンポーネントに`"About Gatsby"`の値を持つ`headerText`属性を渡しました。
 
 ```jsx:title=src/pages/about.js
 <Header headerText="About Gatsby" />
 ```
 
-Over in `header.js`, the header component expects to receive the `headerText` prop (because you’ve written it to expect that). So you can access it like so:
+`header.js`で、Header コンポーネントは`headerText`属性を受け取ることを期待しています（それを期待するように記述しているので）。そのため、次のようにアクセスできます。
 
 ```jsx:title=src/components/header.js
 <h1>{props.headerText}</h1>
 ```
 
-> 💡 In JSX, you can embed any JavaScript expression by wrapping it with `{}`. This is how you can access the `headerText` property (or “prop!”) from the “props” object.
+> 💡 JSX では、`{}`で囲むことでどのような JavaScript の構文も埋めこむことができます。これにより"props"オブジェクトから`headerText`属性にアクセスすることができるようになります。
 
-If you had passed another prop to your `<Header />` component, like so...
+`<Header />`コンポーネントに別の属性を渡した場合、以下のようになります。
 
 ```jsx:title=src/pages/about.js
 <Header headerText="About Gatsby" arbitraryPhrase="is arbitrary" />
 ```
 
-...you would have been able to also access the `arbitraryPhrase` prop: `{props.arbitraryPhrase}`.
+`arbitraryPhrase` 属性には `{props.arbitraryPhrase}` でアクセスできます。
 
-6.  To emphasize how this makes your components reusable, add an extra `<Header />` component to the about page, add the following code to the `src/pages/about.js` file, and save.
+6. これまで述べてきたことにより、コンポーネントが再利用可能になることを強調するにため、追加の`<Header />`コンポーネントを about ページに追加し、次のコードを`src/pages/about.js`ファイルに追加して保存します。
 
 ```jsx:title=src/pages/about.js
 import React from "react"
@@ -269,23 +269,23 @@ export default () => (
 )
 ```
 
-![Duplicate header to show reusability](08-duplicate-header.png)
+![再利用性を示すために Header を複製](08-duplicate-header.png)
 
-And there you have it; A second header — without rewriting any code — by passing different data using props.
+props を使用して異なるデータを渡すことで、コードを一切書き換えることなく、2 番目のヘッダーを得ることができました。
 
-### Using layout components
+### レイアウトコンポーネントの使用
 
-Layout components are for sections of a site that you want to share across multiple pages. For example, Gatsby sites will commonly have a layout component with a shared header and footer. Other common things to add to layouts include a sidebar and/or a navigation menu.
+レイアウトコンポーネントは、サイト内で複数のページで共有するためのセクションです。たとえば、Gatsby サイトには通常、共有ヘッダーとフッターを持つレイアウトコンポーネントがあります。その他、一般的にレイアウトへ追加するものとして、サイドバーやナビゲーションメニューがあります。
 
-You’ll explore layout components in [**part three**](/tutorial/part-three/).
+[**パート 3**](/tutorial/part-three/)でレイアウトコンポーネントについて詳しく掘り下げます。
 
-## Linking between pages
+## ページ間のリンク
 
-You'll often want to link between pages — Let's look at routing in a Gatsby site.
+多くの場合、ページ間をリンクする必要があります。Gatsby サイトでのルーティングを見てみましょう。
 
-### ✋ Using the `<Link />` component
+### ✋ `<Link />`コンポーネントの使用
 
-1.  Open the index page component (`src/pages/index.js`), import the `<Link />` component from Gatsby, add a `<Link />` component above the header, and give it a `to` property with the value of `"/contact/"` for the pathname:
+1. インデックスページコンポーネント（`src/pages/index.js`)を開き、Gatsby の`<Link />`コンポーネントをインポートし、ヘッダーの上に追加し、パス名として`"/contact/"`の値を持つ`to`属性を指定します。
 
 ```jsx:title=src/pages/index.js
 import React from "react"
@@ -302,13 +302,13 @@ export default () => (
 )
 ```
 
-When you click the new "Contact" link on the homepage, you should see...
+ホームページで新しく追加した"Contact"リンクをクリックすると、次が表示されるはずです。
 
 ![Gatsby dev 404 page](09-dev-404.png)
 
-...the Gatsby development 404 page. Why? Because you're attempting to link to a page that doesn't exist yet.
+Gatsby development 404 page。どうして？まだ存在しないページにリンクしようとしているからです。
 
-2.  Now you'll have to create a page component for your new "Contact" page at `src/pages/contact.js` and have it link back to the homepage:
+2. ここで、新しく"Contact"ページ用に`src/pages/contact.js`としてページコンポーネントを作成し、ホームページにリンクする必要があります。
 
 ```jsx:title=src/pages/contact.js
 import React from "react"
@@ -324,65 +324,64 @@ export default () => (
 )
 ```
 
-After you save the file, you should see the contact page and be able to follow the link to the homepage.
+ファイルを保存すると、"Contact"ページを表示し、ホームページへのリンクをたどることができます。
 
 <video controls="controls" loop="true">
   <source type="video/mp4" src="./10-linking-between-pages.mp4"></source>
-  <p>Sorry! Your browser doesn't support this video.</p>
+  <p>ごめんなさい！あなたのブラウザはこのビデオをサポートしていません。</p>
 </video>
 
-The Gatsby `<Link />` component is for linking between pages within your site. For external links to pages not handled by your Gatsby site, use the regular HTML `<a>` tag.
+Gatsby の`<Link />`コンポーネントは、サイト内のページ間をリンクするためのものです。Gatsby サイトで処理しない外部へのリンクは、通常の HTML の`<a>`タグを使用します。
 
-## Deploying a Gatsby site
+## Gatsby サイトのデプロイ
 
-Gatsby.js is a _modern site generator_, which means there are no servers to setup or complicated databases to deploy. Instead, the Gatsby `build` command produces a directory of static HTML and JavaScript files which you can deploy to a static site hosting service.
+Gatsby は**モダンなサイトジェネレーター**です。つまり、デプロイするためにセットアップするサーバーや複雑なデータベースは必要ありません。代わりに、Gatsby の`build`コマンドで、静的なサイトホスティングサービスにデプロイできるように、静的な HTML および JavaScript ファイルのディレクトリーを生成します。
 
-Try using [Surge](http://surge.sh/) for deploying your first Gatsby website. Surge is one of many "static site hosts" which makes it possible to deploy Gatsby sites.
+Gatsby Web サイトをはじめてデプロイするのには、[Surge](http://surge.sh/)を試してみてください。Surge は、Gatsby サイトをデプロイするための数ある「静的サイトホスト」の 1 つです。
 
-If you haven't previously installed &amp; set up Surge, open a new terminal window and install their command-line tool:
+Surge を以前にインストールして設定していない場合は、新しいターミナルウィンドウを開き、コマンドラインツールをインストールします。
 
 ```shell
 npm install --global surge
 
-# Then create a (free) account with them
+# 次に、アカウント（無料）を作成します
 surge login
 ```
 
-Next, build your site by running the following command in the terminal at the root of your site (tip: make sure you're running this command at the root of your site, in this case in the hello-world folder, which you can do by opening a new tab in the same window you used to run `gatsby develop`):
+次に、ターミナルで次のコマンドをサイトのルート上で実行してサイトをビルドします（ヒント: このコマンドをサイトのルート、この場合は hello-world フォルダーで実行していることを確認してください。`gatsby development`を実行するために使用したのと同じウィンドウで新しいタブを開くことによって行うことができます）。
 
 ```shell
 gatsby build
 ```
 
-The build should take 15-30 seconds. Once the build is finished, it's interesting to take a look at the files that the `gatsby build` command just prepared to deploy.
+ビルドには 15〜30 秒かかります。ビルドが終了したら、`gatsby build`コマンドでデプロイするための準備ができたばかりのファイルを見てみるのもいいでしょう。
 
-Take a look at a list of the generated files by typing in the following terminal command into the root of your site, which will let you look at the `public` directory:
+サイトのルートに次のターミナルコマンドを入力して、生成されたファイルのリストを確認します。これにより、`public`ディレクトリーを確認できます。
 
 ```shell
 ls public
 ```
 
-Then finally deploy your site by publishing the generated files to surge.sh.
+最後に、生成したファイルを surge.sh に公開して、サイトをデプロイします。
 
 ```shell
 surge public/
 ```
 
-Once this finishes running, you should see in your terminal something like:
+実行が終了すると、ターミナルに次のように表示されます。
 
-![Screenshot of publishing Gatsby site with Surge](surge-deployment.png)
+![Surgeを使用してGatsbyサイトを公開したスクリーンショット](surge-deployment.png)
 
-Open the web address listed on the bottom line (`lowly-pain.surge.sh` in this
-case) and you'll see your newly published site! Great work!
+一番下の行にリストしている Web アドレス（この場合 `lowly-pain.surge.sh`)を開いて、新しく公開したサイトを見ることができます！すばらしい！
 
-## ➡️ What’s Next?
+## ➡️ 次は？
 
-In this section you:
+このセクションでは次の事を学びました。
 
-- Learned about Gatsby starters, and how to use them to create new projects
-- Learned about JSX syntax
-- Learned about components
-- Learned about Gatsby page components and sub-components
-- Learned about React “props” and reusing React components
+- Gatsby スターターと、それらを使用して新しいプロジェクトを作成する方法
+- JSX 構文について
+- コンポーネントについて
+- Gatsby ページのコンポーネントとサブコンポーネントについて
+- React の "props" と React コンポーネントの再利用について
 
-Now, move on to [**adding styles to your site**](/tutorial/part-two/)!
+それでは、[**サイトにスタイルを追加**](/tutorial/part-two/)へ進みましょう！

From 0e511aff1e73f66c818300cb6eb3adc9daaab529 Mon Sep 17 00:00:00 2001
From: Hirotaka Mizutani <hirotaka@mizutani.to>
Date: Wed, 15 Jan 2020 17:12:18 +0900
Subject: [PATCH 2/5] Update docs/tutorial/part-one/index.md

---
 docs/tutorial/part-one/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorial/part-one/index.md b/docs/tutorial/part-one/index.md
index b5fc5599b..9fce2e34a 100644
--- a/docs/tutorial/part-one/index.md
+++ b/docs/tutorial/part-one/index.md
@@ -99,7 +99,7 @@ export default () => (
 
 ### ちょっと待って… JavaScript に HTML？
 
-\_React と JSX に精通している場合は、このセクションをスキップしてください。\_React フレームワークを使用したことがない場合、JavaScript 関数の中で HTML が何をしているのか疑問に思うかもしれません。また、最初の行で"react"をインポートしているのに、どこでも使用していないのはなぜでしょう。このハイブリッドな"HTML-in-JS"は、実際には JSX と呼ばれる React 用の JavaScript の構文拡張です。React を使用した経験がなくても、このチュートリアルを進めることはできますが、興味がある方のために、簡単な解説をしましょう。
+_React と JSX に精通している場合は、このセクションをスキップしてください。_React フレームワークを使用したことがない場合、JavaScript 関数の中で HTML が何をしているのか疑問に思うかもしれません。また、最初の行で"react"をインポートしているのに、どこでも使用していないのはなぜでしょう。このハイブリッドな"HTML-in-JS"は、実際には JSX と呼ばれる React 用の JavaScript の構文拡張です。React を使用した経験がなくても、このチュートリアルを進めることはできますが、興味がある方のために、簡単な解説をしましょう。
 
 `src/pages/index.js`ファイルの元の内容をみてみましょう。
 

From 3e7335b36ffdeb00d296c9767cdeebe369c3b282 Mon Sep 17 00:00:00 2001
From: Hirotaka Mizutani <hirotaka@mizutani.to>
Date: Thu, 16 Jan 2020 10:47:38 +0900
Subject: [PATCH 3/5] Apply suggestions from code review

Co-Authored-By: Jesse Katsumata <niconico.clarinet@gmail.com>
Co-Authored-By: Yasuaki Uechi <y@uechi.io>
---
 docs/tutorial/part-one/index.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/tutorial/part-one/index.md b/docs/tutorial/part-one/index.md
index 9fce2e34a..66b031ce5 100644
--- a/docs/tutorial/part-one/index.md
+++ b/docs/tutorial/part-one/index.md
@@ -101,7 +101,7 @@ export default () => (
 
 _React と JSX に精通している場合は、このセクションをスキップしてください。_React フレームワークを使用したことがない場合、JavaScript 関数の中で HTML が何をしているのか疑問に思うかもしれません。また、最初の行で"react"をインポートしているのに、どこでも使用していないのはなぜでしょう。このハイブリッドな"HTML-in-JS"は、実際には JSX と呼ばれる React 用の JavaScript の構文拡張です。React を使用した経験がなくても、このチュートリアルを進めることはできますが、興味がある方のために、簡単な解説をしましょう。
 
-`src/pages/index.js`ファイルの元の内容をみてみましょう。
+`src/pages/index.js` ファイルの元の内容をみてみましょう。
 
 ```jsx:title=src/pages/index.js
 import React from "react"
@@ -127,7 +127,7 @@ export default () => React.createElement("div", null, "Hello world!")
 
 Gatsby は React 上に構築されています。本文書の中で**コンポーネント**という言葉を使用したり定義する場合、私たちは**React コンポーネント**のことを指します。React コンポーネントとは、入力を受け付けて、UI 部分を記述する React エレメントを返す自己完結型のコード（通常 JSX で記述）のことです。
 
-コンポーネントを使用して構築しはじめるのに、大きな精神的変化（すでに開発者である場合）の 1 つは、CSS、HTML、および JavaScript が密結合（1 つのファイルになることも多い）されることです。
+特にあなたが開発者であるならば、コンポーネントを使用して構築しはじめる際に、CSS、HTML、JavaScript が密結合（時には1つのファイルにさえ）されることに大きな心理的変化を経験するでしょう。
 
 一見単純な変更ですが、これは Web サイトを構築する上での考え方に深い意味を持ちます。
 
@@ -337,9 +337,9 @@ Gatsby の`<Link />`コンポーネントは、サイト内のページ間をリ
 
 Gatsby は**モダンなサイトジェネレーター**です。つまり、デプロイするためにセットアップするサーバーや複雑なデータベースは必要ありません。代わりに、Gatsby の`build`コマンドで、静的なサイトホスティングサービスにデプロイできるように、静的な HTML および JavaScript ファイルのディレクトリーを生成します。
 
-Gatsby Web サイトをはじめてデプロイするのには、[Surge](http://surge.sh/)を試してみてください。Surge は、Gatsby サイトをデプロイするための数ある「静的サイトホスト」の 1 つです。
+もし Gatsby でつくった Web サイトをはじめてデプロイするなら、[Surge](http://surge.sh/)を試してみてください。Surge は、Gatsby サイトをデプロイするための数ある「静的サイトホスティングサービス」の 1 つです。
 
-Surge を以前にインストールして設定していない場合は、新しいターミナルウィンドウを開き、コマンドラインツールをインストールします。
+以前 Surge をセットアップしたことがない場合は、新しいターミナルウィンドウを開いてコマンドラインツールをインストールします。
 
 ```shell
 npm install --global surge
@@ -348,7 +348,7 @@ npm install --global surge
 surge login
 ```
 
-次に、ターミナルで次のコマンドをサイトのルート上で実行してサイトをビルドします（ヒント: このコマンドをサイトのルート、この場合は hello-world フォルダーで実行していることを確認してください。`gatsby development`を実行するために使用したのと同じウィンドウで新しいタブを開くことによって行うことができます）。
+次に、ターミナルで次のコマンドをサイトのルート上で実行してサイトをビルドします（ヒント: このコマンドをサイトのルート、この場合は hello-world フォルダーで実行していることを確認してください。`gatsby develop`を実行するために使用したのと同じウィンドウで新しいタブを開くことによって行うことができます）。
 
 ```shell
 gatsby build

From 31371ec5365f940ff51ae174379f8e7fd90485bd Mon Sep 17 00:00:00 2001
From: Hirotaka Mizutani <hirotaka@mizutani.to>
Date: Thu, 16 Jan 2020 10:54:02 +0900
Subject: [PATCH 4/5] Update docs/tutorial/part-one/index.md

---
 docs/tutorial/part-one/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorial/part-one/index.md b/docs/tutorial/part-one/index.md
index 66b031ce5..f33764448 100644
--- a/docs/tutorial/part-one/index.md
+++ b/docs/tutorial/part-one/index.md
@@ -22,7 +22,7 @@ gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]
 
 末尾の URL_OF_STARTER_GITHUB_REPO（スターターの GitHub レポジトリ URL）を省略すると、Gatsby は[**デフォルトスターター**](https://github.com/gatsbyjs/gatsby-starter-default)に基づいてサイトを自動的に生成します。チュートリアルのこのセクションでは、チュートリアル・パート 0 ですでに作成した"Hello World"サイトを引き続き使用します。詳細については、[スターターの変更](/docs/modifying-a-starter)のドキュメントをご覧ください。
 
-### ✋ コードを開く
+### ✋ コードを読む
 
 コードエディターで、"Hello World"サイト用に生成されたコードを開き、"hello-world"ディレクトリーに含まれるさまざまなディレクトリとファイルを確認します。次のようになっていることでしょう。
 

From 077069066367059dcfd07ac9f98df90e3e44ce79 Mon Sep 17 00:00:00 2001
From: Hirotaka Mizutani <hirotaka@mizutani.to>
Date: Fri, 17 Jan 2020 12:26:12 +0900
Subject: [PATCH 5/5] Apply suggestions from code review

Co-Authored-By: Jesse Katsumata <niconico.clarinet@gmail.com>
---
 docs/tutorial/part-one/index.md | 88 ++++++++++++++++-----------------
 1 file changed, 44 insertions(+), 44 deletions(-)

diff --git a/docs/tutorial/part-one/index.md b/docs/tutorial/part-one/index.md
index f33764448..6d90b4da1 100644
--- a/docs/tutorial/part-one/index.md
+++ b/docs/tutorial/part-one/index.md
@@ -24,25 +24,25 @@ gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]
 
 ### ✋ コードを読む
 
-コードエディターで、"Hello World"サイト用に生成されたコードを開き、"hello-world"ディレクトリーに含まれるさまざまなディレクトリとファイルを確認します。次のようになっていることでしょう。
+コードエディターで、"Hello World" サイト用に生成されたコードを開き、"hello-world" ディレクトリーに含まれるさまざまなディレクトリとファイルを確認します。次のようになっていることでしょう。
 
-![VS Code上でのHello Worldプロジェクト](01-hello-world-vscode.png)
+![VS Code 上での Hello World プロジェクト](01-hello-world-vscode.png)
 
 _ヒント: 繰り返しますが、ここに示すエディターは Visual Studio Code です。別のエディターを使用している場合は、外観が少し異なります。_
 
 ホームページを動かしているコードを見ていきましょう。
 
-> 💡 前のセクションで`gatsby develop`を実行した後、開発サーバを止めている場合はもう一度立ち上げてください。それでは、hello-word サイトに変更を加えていきましょう！
+> 💡 前のセクションで `gatsby develop` を実行した後、開発サーバを止めている場合はもう一度立ち上げてください。それでは、hello-word サイトに変更を加えていきましょう！
 
 ## Gatsby ページに慣れる
 
-コードエディターで`/src`ディレクトリーを開きます。中に`/pages`というディレクトリーが 1 つあります。
+コードエディターで `/src` ディレクトリーを開きます。中に `/pages` というディレクトリーが 1 つあります。
 
-`src/pages/index.js`ファイルを開きます。このファイルのコードは、ひとつの div といくつかのテキスト（"Hello world!"という文字列）を含んだコンポーネントを作成します。
+`src/pages/index.js` ファイルを開きます。このファイルのコードは、ひとつの div といくつかのテキスト（"Hello world!" という文字列）を含んだコンポーネントを作成します。
 
-### ✋ "Hello World"ホームページに変更を加える
+### ✋ "Hello World" ホームページに変更を加える
 
-1. "Hello World!"という文字列を"Hello Gatsby!"に変更して、ファイルを保存します。ウィンドウを横に並べている場合、ファイルを保存すると、コードとコンテンツの変更がブラウザーへほぼ即座に反映されることがわかります。
+1. "Hello World!" という文字列を "Hello Gatsby!" に変更して、ファイルを保存します。ウィンドウを横に並べている場合、ファイルを保存すると、コードとコンテンツの変更がブラウザーへほぼ即座に反映されることがわかります。
 
 <video controls="controls" autoplay="true" loop="true">
   <source type="video/mp4" src="./02-demo-hot-reloading.mp4"></source>
@@ -51,7 +51,7 @@ _ヒント: 繰り返しますが、ここに示すエディターは Visual Stu
 
 > 💡 Gatsby は**ホットリローディング**を使用して開発プロセスをスピードアップします。基本的に、Gatsby 開発サーバーを実行している場合、Gatsby サイトのファイルをバックグラウンドで「監視」しています。ファイルを保存すると、変更がすぐにブラウザへ反映されます。ページをハードリフレッシュしたり、開発サーバーを再起動したりする必要はありません。変更はすぐに表示されます。
 
-2. 変更した内容をもう少し見やすくすることができます。`src/pages/index.js`のコードを以下のコードに置き換えて、もう一度保存してください。変更されたテキストが表示されます。テキストの色が紫色になり、フォントサイズが大きくなります。
+2. 変更した内容をもう少し見やすくすることができます。`src/pages/index.js` のコードを以下のコードに置き換えて、もう一度保存してください。変更されたテキストが表示されます。テキストの色が紫色になり、フォントサイズが大きくなります。
 
 ```jsx:title=src/pages/index.js
 import React from "react"
@@ -61,9 +61,9 @@ export default () => (
 )
 ```
 
-> 💡 Gatsby のスタイルについてはこのチュートリアルの[**パート 2**](/tutorial/part-two/)で詳しく説明します。
+> 💡 Gatsby のスタイルについてはこのチュートリアルの[**パート 2**](/tutorial/part-two/) で詳しく説明します。
 
-3. フォントサイズのスタイルを削除し、"Hello Gatsby!"テキストをレベル 1 のヘッダーに変更し、ヘッダーの下に段落を追加します。
+3. フォントサイズのスタイルを削除し、"Hello Gatsby!" テキストをレベル 1 のヘッダーに変更し、ヘッダーの下に段落を追加します。
 
 ```jsx:title=src/pages/index.js
 import React from "react"
@@ -99,7 +99,7 @@ export default () => (
 
 ### ちょっと待って… JavaScript に HTML？
 
-_React と JSX に精通している場合は、このセクションをスキップしてください。_React フレームワークを使用したことがない場合、JavaScript 関数の中で HTML が何をしているのか疑問に思うかもしれません。また、最初の行で"react"をインポートしているのに、どこでも使用していないのはなぜでしょう。このハイブリッドな"HTML-in-JS"は、実際には JSX と呼ばれる React 用の JavaScript の構文拡張です。React を使用した経験がなくても、このチュートリアルを進めることはできますが、興味がある方のために、簡単な解説をしましょう。
+_React と JSX に精通している場合は、このセクションをスキップしてください。_React フレームワークを使用したことがない場合、JavaScript 関数の中で HTML が何をしているのか疑問に思うかもしれません。また、最初の行で "react" をインポートしているのに、どこでも使用していないのはなぜでしょう。このハイブリッドな "HTML-in-JS" は、実際には JSX と呼ばれる React 用の JavaScript の構文拡張です。React を使用した経験がなくても、このチュートリアルを進めることはできますが、興味がある方のために、簡単な解説をしましょう。
 
 `src/pages/index.js` ファイルの元の内容をみてみましょう。
 
@@ -117,7 +117,7 @@ import React from "react"
 export default () => React.createElement("div", null, "Hello world!")
 ```
 
-これで、 `'react'`のインポートが使われているのを見つけることができます！ちょっと待って。あなたは純粋な HTML や JavaScript ではなく、JSX を書いています。ブラウザーはそれをどのように読み込むのでしょうか？短い答えとしては、読み込みません。Gatsby サイトには、ソースコードをブラウザーが解釈できるものに変換するためのツールがすでに設定されているのです。
+これで、 `'react'` のインポートが使われているのを見つけることができます！でも、ちょっと待って。あなたは純粋な HTML や JavaScript ではなく、JSX を書いています。ブラウザーはそれをどのように読み込むのでしょうか？短い答えとしては、読み込みません。Gatsby サイトには、ソースコードをブラウザーが解釈できるものに変換するためのツールがすでに設定されているのです。
 
 ## コンポーネントを使用して構築
 
@@ -125,7 +125,7 @@ export default () => React.createElement("div", null, "Hello world!")
 
 大まかに定義すると、コンポーネントはサイトを構成する要素です。 UI（ユーザーインターフェイス）部分を記述する自己完結型なコードです。
 
-Gatsby は React 上に構築されています。本文書の中で**コンポーネント**という言葉を使用したり定義する場合、私たちは**React コンポーネント**のことを指します。React コンポーネントとは、入力を受け付けて、UI 部分を記述する React エレメントを返す自己完結型のコード（通常 JSX で記述）のことです。
+Gatsby は React 上に構築されています。本文書の中で**コンポーネント**という言葉を使用したり定義する場合、私たちは **React コンポーネント**のことを指します。React コンポーネントとは、入力を受け付けて、UI 部分を記述する React エレメントを返す自己完結型のコード（通常 JSX で記述）のことです。
 
 特にあなたが開発者であるならば、コンポーネントを使用して構築しはじめる際に、CSS、HTML、JavaScript が密結合（時には1つのファイルにさえ）されることに大きな心理的変化を経験するでしょう。
 
@@ -137,7 +137,7 @@ Gatsby は React 上に構築されています。本文書の中で**コンポ
 <button class="primary-button">Click me</button>
 ```
 
-コンポーネントの世界では、ボタンのスタイルの代わりに`PrimaryButton`コンポーネントを作成し、サイト全体で次のように使用します。
+コンポーネントの世界では、ボタンのスタイルの代わりに `PrimaryButton` コンポーネントを作成し、サイト全体で次のように使用します。
 
 <!-- prettier-ignore -->
 ```jsx
@@ -148,11 +148,11 @@ Gatsby は React 上に構築されています。本文書の中で**コンポ
 
 ### ✋ ページコンポーネントの使用
 
-`src/pages/*.js`で定義した React コンポーネントは自動的にページになります。これを実際に見てみましょう。
+`src/pages/*.js` で定義した React コンポーネントは自動的にページになります。これを実際に見てみましょう。
 
-すでに"Hello World"スターターに付属する`src/pages/index.js`ファイルがあります。about ページを作成しましょう。
+すでに "Hello World" スターターに付属する `src/pages/index.js` ファイルがあります。about ページを作成しましょう。
 
-1. `src/pages/about.js`に新しいファイルを作成し、次のコードを新しいファイルにコピーして保存します。
+1. `src/pages/about.js` に新しいファイルを作成し、次のコードを新しいファイルにコピーして保存します。
 
 ```jsx:title=src/pages/about.js
 import React from "react"
@@ -169,14 +169,14 @@ export default () => (
 
 ![新しい about ページ](05-about-page.png)
 
-React コンポーネントを'src/pages/about.js`ファイルに配置するだけで、`/about`でアクセス可能なページを作成します。
+React コンポーネントを 'src/pages/about.js` ファイルに配置するだけで、`/about` でアクセス可能なページを作成します。
 
 ### ✋ サブコンポーネントの使用
 
-ホームページと about ページの両方が非常に大きくなってくると、多くのことを書き直す必要があります。サブコンポーネントを使用して、UI を再利用可能なパーツに分割できます。どちらのページにも`<h1>`があるので、それらを`Header`というコンポーネントとして作成しましょう。
+ホームページと about ページの両方が非常に大きくなってくると、多くのことを書き直す必要があります。サブコンポーネントを使用して、UI を再利用可能なパーツに分割できます。どちらのページにも `<h1>` があるので、それらを `Header` というコンポーネントとして作成しましょう。
 
-1. `src/components`に新しいディレクトリーを作成し、そのディレクトリー内に`header.js`というファイルを作成します。
-2. 次のコードを新しい`src/components/header.js`ファイルに追加します。
+1. `src/components` に新しいディレクトリーを作成し、そのディレクトリー内に `header.js` というファイルを作成します。
+2. 次のコードを新しい `src/components/header.js` ファイルに追加します。
 
 ```jsx:title=src/components/header.js
 import React from "react"
@@ -184,7 +184,7 @@ import React from "react"
 export default () => <h1>This is a header.</h1>
 ```
 
-3. `about.js`ファイルを変更して、`Header`コンポーネントをインポートします。`h1`のマークアップを `<Header />'に置き換えます。
+3. `about.js` ファイルを変更して、`Header` コンポーネントをインポートします。`h1` のマークアップを `<Header />' に置き換えます。
 
 ```jsx:title=src/pages/about.js
 import React from "react"
@@ -200,7 +200,7 @@ export default () => (
 
 ![Header コンポーネントの追加](06-header-component.png)
 
-ブラウザーでは、"About Gatsby"となっていたヘッダーテキストが"This is a header"に置き換えられます。ただし、"About"ページでは、"This is a header"と表示するのではなく、"About Gatsby"と表示したいことでしょう。
+ブラウザーでは、"About Gatsby" となっていたヘッダーテキストが "This is a header" に置き換えられます。ただし、"About" ページでは、"This is a header" と表示するのではなく、"About Gatsby" と表示したいことでしょう。
 
 4. `src/components/header.js` に戻り、次の変更を行います。
 
@@ -210,7 +210,7 @@ import React from "react"
 export default props => <h1>{props.headerText}</h1> {/* highlight-line */}
 ```
 
-5. `src/pages/about.js`に戻り、次の変更を行います。
+5. `src/pages/about.js` に戻り、次の変更を行います。
 
 ```jsx:title=src/pages/about.js
 import React from "react"
@@ -224,29 +224,29 @@ export default () => (
 )
 ```
 
-![Headerにデータを渡す](07-pass-data-header.png)
+![Header にデータを渡す](07-pass-data-header.png)
 
-また、ヘッダーテキストに"About Gatsby"が表示されました！
+また、ヘッダーテキストに "About Gatsby" が表示されました！
 
-### "props"とは何ですか？
+### "props" とは何ですか？
 
-先ほど、UI を描写する再利用可能なコードとして React コンポーネントを定義しました。これらの再利用可能な部品を動的にするには、それらに異なるデータを与えられるようにする必要があります。"props"と呼ばれる入力でそれを行います。Props は、React コンポーネントにプロパティを与えるためのものです。
+先ほど、UI を描写する再利用可能なコードとして React コンポーネントを定義しました。これらの再利用可能な部品を動的にするには、それらに異なるデータを与えられるようにする必要があります。"props" と呼ばれる入力でそれを行います。Props は、React コンポーネントにプロパティを与えるためのものです。
 
-`about.js`では、インポートした`Header`サブコンポーネントに`"About Gatsby"`の値を持つ`headerText`属性を渡しました。
+`about.js` では、インポートした `Header` サブコンポーネントに `"About Gatsby"` の値を持つ `headerText` 属性を渡しました。
 
 ```jsx:title=src/pages/about.js
 <Header headerText="About Gatsby" />
 ```
 
-`header.js`で、Header コンポーネントは`headerText`属性を受け取ることを期待しています（それを期待するように記述しているので）。そのため、次のようにアクセスできます。
+`header.js` で、Header コンポーネントは `headerText` 属性を受け取ることを期待しています（それを期待するように記述しているので）。そのため、次のようにアクセスできます。
 
 ```jsx:title=src/components/header.js
 <h1>{props.headerText}</h1>
 ```
 
-> 💡 JSX では、`{}`で囲むことでどのような JavaScript の構文も埋めこむことができます。これにより"props"オブジェクトから`headerText`属性にアクセスすることができるようになります。
+> 💡 JSX では、`{}`で囲むことでどのような JavaScript の構文も埋めこむことができます。これにより "props" オブジェクトから `headerText` 属性にアクセスすることができるようになります。
 
-`<Header />`コンポーネントに別の属性を渡した場合、以下のようになります。
+`<Header />` コンポーネントに別の属性を渡した場合、以下のようになります。
 
 ```jsx:title=src/pages/about.js
 <Header headerText="About Gatsby" arbitraryPhrase="is arbitrary" />
@@ -254,7 +254,7 @@ export default () => (
 
 `arbitraryPhrase` 属性には `{props.arbitraryPhrase}` でアクセスできます。
 
-6. これまで述べてきたことにより、コンポーネントが再利用可能になることを強調するにため、追加の`<Header />`コンポーネントを about ページに追加し、次のコードを`src/pages/about.js`ファイルに追加して保存します。
+6. これまで述べてきたことにより、コンポーネントが再利用可能になることを強調するにため、追加の`<Header />` コンポーネントを about ページに追加し、次のコードを `src/pages/about.js` ファイルに追加して保存します。
 
 ```jsx:title=src/pages/about.js
 import React from "react"
@@ -277,15 +277,15 @@ props を使用して異なるデータを渡すことで、コードを一切
 
 レイアウトコンポーネントは、サイト内で複数のページで共有するためのセクションです。たとえば、Gatsby サイトには通常、共有ヘッダーとフッターを持つレイアウトコンポーネントがあります。その他、一般的にレイアウトへ追加するものとして、サイドバーやナビゲーションメニューがあります。
 
-[**パート 3**](/tutorial/part-three/)でレイアウトコンポーネントについて詳しく掘り下げます。
+[**パート 3**](/tutorial/part-three/) でレイアウトコンポーネントについて詳しく掘り下げます。
 
 ## ページ間のリンク
 
 多くの場合、ページ間をリンクする必要があります。Gatsby サイトでのルーティングを見てみましょう。
 
-### ✋ `<Link />`コンポーネントの使用
+### ✋ `<Link />` コンポーネントの使用
 
-1. インデックスページコンポーネント（`src/pages/index.js`)を開き、Gatsby の`<Link />`コンポーネントをインポートし、ヘッダーの上に追加し、パス名として`"/contact/"`の値を持つ`to`属性を指定します。
+1. インデックスページコンポーネント（`src/pages/index.js`)を開き、Gatsby の `<Link />` コンポーネントをインポートし、ヘッダーの上に追加し、パス名として `"/contact/"` の値を持つ `to` 属性を指定します。
 
 ```jsx:title=src/pages/index.js
 import React from "react"
@@ -302,13 +302,13 @@ export default () => (
 )
 ```
 
-ホームページで新しく追加した"Contact"リンクをクリックすると、次が表示されるはずです。
+ホームページで新しく追加した "Contact" リンクをクリックすると、次が表示されるはずです。
 
 ![Gatsby dev 404 page](09-dev-404.png)
 
 Gatsby development 404 page。どうして？まだ存在しないページにリンクしようとしているからです。
 
-2. ここで、新しく"Contact"ページ用に`src/pages/contact.js`としてページコンポーネントを作成し、ホームページにリンクする必要があります。
+2. ここで、新しく "Contact" ページ用に `src/pages/contact.js` としてページコンポーネントを作成し、ホームページにリンクする必要があります。
 
 ```jsx:title=src/pages/contact.js
 import React from "react"
@@ -324,20 +324,20 @@ export default () => (
 )
 ```
 
-ファイルを保存すると、"Contact"ページを表示し、ホームページへのリンクをたどることができます。
+ファイルを保存すると、"Contact" ページを表示し、ホームページへのリンクをたどることができます。
 
 <video controls="controls" loop="true">
   <source type="video/mp4" src="./10-linking-between-pages.mp4"></source>
   <p>ごめんなさい！あなたのブラウザはこのビデオをサポートしていません。</p>
 </video>
 
-Gatsby の`<Link />`コンポーネントは、サイト内のページ間をリンクするためのものです。Gatsby サイトで処理しない外部へのリンクは、通常の HTML の`<a>`タグを使用します。
+Gatsby の `<Link />` コンポーネントは、サイト内のページ間をリンクするためのものです。Gatsby  サイトで処理しない外部へのリンクは、通常の HTML の `<a>` タグを使用します。
 
 ## Gatsby サイトのデプロイ
 
 Gatsby は**モダンなサイトジェネレーター**です。つまり、デプロイするためにセットアップするサーバーや複雑なデータベースは必要ありません。代わりに、Gatsby の`build`コマンドで、静的なサイトホスティングサービスにデプロイできるように、静的な HTML および JavaScript ファイルのディレクトリーを生成します。
 
-もし Gatsby でつくった Web サイトをはじめてデプロイするなら、[Surge](http://surge.sh/)を試してみてください。Surge は、Gatsby サイトをデプロイするための数ある「静的サイトホスティングサービス」の 1 つです。
+もし Gatsby でつくった Web サイトをはじめてデプロイするなら、[Surge](http://surge.sh/) を試してみてください。Surge は、Gatsby サイトをデプロイするための数ある「静的サイトホスティングサービス」の 1 つです。
 
 以前 Surge をセットアップしたことがない場合は、新しいターミナルウィンドウを開いてコマンドラインツールをインストールします。
 
@@ -348,13 +348,13 @@ npm install --global surge
 surge login
 ```
 
-次に、ターミナルで次のコマンドをサイトのルート上で実行してサイトをビルドします（ヒント: このコマンドをサイトのルート、この場合は hello-world フォルダーで実行していることを確認してください。`gatsby develop`を実行するために使用したのと同じウィンドウで新しいタブを開くことによって行うことができます）。
+次に、ターミナルで次のコマンドをサイトのルート上で実行してサイトをビルドします（ヒント: このコマンドをサイトのルート、この場合は hello-world フォルダーで実行していることを確認してください。`gatsby develop` を実行するために使用したのと同じウィンドウで新しいタブを開くことによって行うことができます）。
 
 ```shell
 gatsby build
 ```
 
-ビルドには 15〜30 秒かかります。ビルドが終了したら、`gatsby build`コマンドでデプロイするための準備ができたばかりのファイルを見てみるのもいいでしょう。
+ビルドには 15〜30 秒かかります。ビルドが終了したら、`gatsby build` コマンドでデプロイするための準備ができたばかりのファイルを見てみるのもいいでしょう。
 
 サイトのルートに次のターミナルコマンドを入力して、生成されたファイルのリストを確認します。これにより、`public`ディレクトリーを確認できます。
 
@@ -370,7 +370,7 @@ surge public/
 
 実行が終了すると、ターミナルに次のように表示されます。
 
-![Surgeを使用してGatsbyサイトを公開したスクリーンショット](surge-deployment.png)
+![Surge を使用して Gatsby サイトを公開したスクリーンショット](surge-deployment.png)
 
 一番下の行にリストしている Web アドレス（この場合 `lowly-pain.surge.sh`)を開いて、新しく公開したサイトを見ることができます！すばらしい！