diff --git a/docs/tutorial/part-one/index.md b/docs/tutorial/part-one/index.md index 81cb56006..6d90b4da1 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!" に変更して、ファイルを保存します。ウィンドウを横に並べている場合、ファイルを保存すると、コードとコンテンツの変更がブラウザーへほぼ即座に反映されることがわかります。 -> 💡 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 () =>
Hello world!
+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. +特にあなたが開発者であるならば、コンポーネントを使用して構築しはじめる際に、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 ``` -In the world of components, you instead create a `PrimaryButton` component with your button styles and use it throughout your site like: +コンポーネントの世界では、ボタンのスタイルの代わりに `PrimaryButton` コンポーネントを作成し、サイト全体で次のように使用します。 ```jsx Click me ``` -Components become the base building blocks of your site. Instead of being limited to the building blocks the browser provides, e.g. `