diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index 0c5cadf3c..c25137bc9 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -1,57 +1,57 @@ --- -title: Creating Nested Layout Components +title: ネストしたレイアウトコンポーネントの作成 typora-copy-images-to: ./ disableTableOfContents: true --- -Welcome to part three! +パート 3 へようこそ！ -## What's in this tutorial? +## このチュートリアルの内容は？ -In this part, you'll learn about Gatsby plugins and creating "layout" components. +このパートでは、Gatsby プラグインと、「レイアウト」コンポーネントを作成する方法について学びます。 -Gatsby plugins are JavaScript packages that help add functionality to a Gatsby site. Gatsby is designed to be extensible, which means plugins are able to extend and modify just about everything Gatsby does. +Gatsby プラグインは、Gatsby サイトに機能を追加するための JavaScript パッケージです。Gatsby は機能を拡張できるように設計されています。つまり、プラグインは Gatsby のほぼすべての機能を拡張したり変更できます。 -Layout components are for sections of your site that you want to share across multiple pages. For example, sites will commonly have a layout component with a shared header and footer. Other common things to add to layouts are a sidebar and/or navigation menu. On this page for example, the header at the top is part of gatsbyjs.org's layout component. +レイアウトコンポーネントは、サイト内の複数ページで共通に使用する特定のセクションの事を指します。たとえば、サイトには通常、共有ヘッダーとフッターなどのレイアウトコンポーネントがあります。その他のレイアウトコンポーネントとして、一般的には、サイドバーやナビゲーションメニューがあります。例えば、このページの上部のヘッダーは、gatsbyjs.org のレイアウトコンポーネントの一部になります。 -Let's dive into part three. +それでは、パート 3 を詳しくみていきましょう。 -## Using plugins +## プラグインの使用 -You’re probably familiar with the idea of plugins. Many software systems support adding custom plugins to add new functionality or even modify the core workings of the software. Gatsby plugins work the same way. +もしかしたら、すでにプラグインの概念に馴染みがあるかもしれません。多くのソフトウェアシステムでは、カスタムプラグインを追加することで、新しい機能を追加することや、ソフトウェアのコア機能を変更できます。Gatsby プラグインも同様な働きをします。 -Community members (like you!) can contribute plugins (small amounts of JavaScript code) that others can then use when building Gatsby sites. +（あなたのような）コミュニティメンバーは、他の人が Gatsby サイトを構築するために使用するプラグイン（少量の JavaScript コード）を提供できます。 -> There are already hundreds of plugins! Explore the Gatsby [Plugin Library](/plugins/). +> すでに何百ものプラグインがあります！Gatsby [プラグインライブラリ](/plugins/)をご覧ください。 -Our goal with plugins is to make them straightforward to install and use. You will likely be using plugins in almost every Gatsby site you build. While working through the rest of the tutorial you’ll have many opportunities to practice installing and using plugins. +私たちは、プラグインを簡単にインストールして使用できるようにすることを目標にしています。これから構築するほとんどすべての Gatsby サイトでプラグインを使用することになります。このチュートリアルの残りの部分の作業を通じて、プラグインをインストールして使うための練習をたくさんできます。 -For an initial introduction to using plugins, we'll install and implement the Gatsby plugin for Typography.js. +プラグインを使い始める導入として、Typography.js の Gatsby プラグインをインストールして組み込んでみます。 -[Typography.js](https://kyleamathews.github.io/typography.js/) is a JavaScript library which generates global base styles for your site's typography. The library has a [corresponding Gatsby plugin](/packages/gatsby-plugin-typography/) to streamline using it in a Gatsby site. +[Typography.js](https://kyleamathews.github.io/typography.js/) は、全体の基本となるサイトのタイポグラフィのスタイルを生成するための JavaScript ライブラリーです。このライブラリーを Gatsby サイトで効率よく使用できるように[対応する Gatsby プラグイン](/packages/gatsby-plugin-typography/)が用意されています。 -### ✋ Create a new Gatsby site +### ✋ 新しい Gatsby サイトの作成 -As we mentioned in [part two](/tutorial/part-two/), at this point it's probably a good idea to close the terminal window(s) and project files from previous parts of the tutorial, to keep things clean on your desktop. Then open a new terminal window and run the following commands to create a new Gatsby site in a directory called `tutorial-part-three` and then move to this new directory: +[パート 2](/tutorial/part-two/) でも述べたように、この時点で、前のチュートリアルで使用したターミナルウィンドウとプロジェクトファイルを閉じて、デスクトップをクリアに保つことをお勧めします。次に、新しいターミナルウィンドウを開き、次のコマンドを実行して、`tutorial-part-three` というディレクトリーに新しい Gatsby サイトを作成し、この新しいディレクトリーに移動します。 ```shell gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world cd tutorial-part-three ``` -### ✋ Install and configure `gatsby-plugin-typography` +### ✋ `gatsby-plugin-typography` をインストールして設定する -There are two main steps to using a plugin: Installing and configuring. +プラグインを使用するまでに、インストールして、設定するという 2 つの主な手順を踏みます。 -1. Install the `gatsby-plugin-typography` NPM package. +1. `gatsby-plugin-typography` NPM パッケージをインストールします。 ```shell npm install --save gatsby-plugin-typography react-typography typography typography-theme-fairy-gates ``` -> Note: Typography.js requires a few additional packages, so those are included in the instructions. Additional requirements like this will be listed in the "install" instructions of each plugin. +> ヒント: Typography.js にはいくつかの追加パッケージが必要なため、それらの手順も含まれます。このように追加で必要なものは、それぞれのプラグインの「インストール」手順に記載されています。 -2. Edit the file `gatsby-config.js` at the root of your project to the following: +2. プロジェクトのルートにあるファイル `gatsby-config.js` を次のように編集します。 ```javascript:title=gatsby-config.js module.exports = { @@ -66,11 +66,11 @@ module.exports = { } ``` -The `gatsby-config.js` is another special file that Gatsby will automatically recognize. This is where you add plugins and other site configuration. +`gatsby-config.js` は、Gatsby が自動的に認識するもう 1 つの特別なファイルです。このファイルに、プラグインとその他のサイトに関する設定を追加します。 -> Check out the [doc on gatsby-config.js](/docs/gatsby-config/) to read more, if you wish. +> 必要に応じて、詳細は [gatsby-config.js のドキュメント](/docs/gatsby-config/)を参照してください。 -3. Typography.js needs a configuration file. Create a new directory called `utils` in the `src` directory. Then add a new file called `typography.js` to `utils` and copy the following into the file: +3. Typography.js の設定ファイルが必要になります。`src` ディレクトリーに `utils` という新しいディレクトリーを作成します。次に、`typography.js` という新しいファイルを `utils` に追加し、次の内容をファイルにコピーします。 ```javascript:title=src/utils/typography.js import Typography from "typography" @@ -82,20 +82,19 @@ export const { scale, rhythm, options } = typography export default typography ``` -4. Start the development server. +4. 開発サーバーを起動します。 ```shell gatsby develop ``` -Once you load the site, if you inspect the generated HTML using the Chrome developer tools, you’ll see that the typography plugin added a `