diff --git a/content/tutorial/nav.yml b/content/tutorial/nav.yml
index 8d498ab14..0b824c6e8 100644
--- a/content/tutorial/nav.yml
+++ b/content/tutorial/nav.yml
@@ -1,54 +1,54 @@
- title: Tutorial
items:
- id: before-we-start-the-tutorial
- title: Before We Start the Tutorial
+ title: チュートリアルを始める前に
href: /tutorial/tutorial.html#before-we-start-the-tutorial
forceInternal: true
subitems:
- id: what-are-we-building
- title: What Are We Building?
+ title: これから作るもの
href: /tutorial/tutorial.html#what-are-we-building
forceInternal: true
- id: prerequisites
- title: Prerequisites
+ title: 前提知識
href: /tutorial/tutorial.html#prerequisites
forceInternal: true
- id: setup-for-the-tutorial
- title: Setup for the Tutorial
+ title: チュートリアルの準備
href: /tutorial/tutorial.html#setup-for-the-tutorial
forceInternal: true
subitems:
- id: setup-option-1-write-code-in-the-browser
- title: "Option 1: Write Code in the Browser"
+ title: "オプション 1: ブラウザでコードを書く"
href: /tutorial/tutorial.html#setup-option-1-write-code-in-the-browser
forceInternal: true
- id: setup-option-2-local-development-environment
- title: "Option 2: Local Development Environment"
+ title: "オプション 2: ローカル開発環境"
href: /tutorial/tutorial.html#setup-option-2-local-development-environment
forceInternal: true
- id: help-im-stuck
- title: Help, I'm Stuck!
+ title: 助けて、ハマった！
href: /tutorial/tutorial.html#help-im-stuck
forceInternal: true
- id: overview
- title: Overview
+ title: 概要
href: /tutorial/tutorial.html#overview
forceInternal: true
subitems:
- id: what-is-react
- title: What Is React?
+ title: React とは？
href: /tutorial/tutorial.html#what-is-react
forceInternal: true
- id: inspecting-the-starter-code
- title: Inspecting the Starter Code
+ title: スターターコードの中身を確認する
href: /tutorial/tutorial.html#inspecting-the-starter-code
forceInternal: true
- id: passing-data-through-props
- title: Passing Data Through Props
+ title: データを Props 経由で渡す
href: /tutorial/tutorial.html#passing-data-through-props
forceInternal: true
- id: making-an-interactive-component
- title: Making an Interactive Component
+ title: インタラクティブなコンポーネントを作る
href: /tutorial/tutorial.html#making-an-interactive-component
forceInternal: true
- id: developer-tools
@@ -56,32 +56,32 @@
href: /tutorial/tutorial.html#developer-tools
forceInternal: true
- id: completing-the-game
- title: Completing the Game
+ title: ゲームを完成させる
href: /tutorial/tutorial.html#completing-the-game
forceInternal: true
subitems:
- id: lifting-state-up
- title: Lifting State Up
+ title: State のリフトアップ
href: /tutorial/tutorial.html#lifting-state-up
forceInternal: true
- id: why-immutability-is-important
- title: Why Immutability Is Important
+ title: イミュータビリティは何故重要なのか
href: /tutorial/tutorial.html#why-immutability-is-important
forceInternal: true
- id: function-components
- title: Function Components
+ title: 関数コンポーネント
href: /tutorial/tutorial.html#function-components
forceInternal: true
- id: taking-turns
- title: Taking Turns
+ title: 手番の処理
href: /tutorial/tutorial.html#taking-turns
forceInternal: true
- id: declaring-a-winner
- title: Declaring a Winner
+ title: ゲーム勝者の判定
href: /tutorial/tutorial.html#declaring-a-winner
forceInternal: true
- id: adding-time-travel
- title: Adding Time Travel
+ title: タイムトラベル機能の追加
href: /tutorial/tutorial.html#adding-time-travel
forceInternal: true
subitems:
@@ -90,22 +90,22 @@
href: /tutorial/tutorial.html#storing-a-history-of-moves
forceInternal: true
- id: lifting-state-up-again
- title: Lifting State Up, Again
+ title: State のリフトアップ、再び
href: /tutorial/tutorial.html#lifting-state-up-again
forceInternal: true
- id: showing-the-past-moves
- title: Showing the Past Moves
+ title: 過去の着手の表示
href: /tutorial/tutorial.html#showing-the-past-moves
forceInternal: true
- id: picking-a-key
- title: Picking a Key
+ title: Key を選ぶ
href: /tutorial/tutorial.html#picking-a-key
forceInternal: true
- id: implementing-time-travel
- title: Implementing Time Travel
+ title: タイムトラベルの実装
href: /tutorial/tutorial.html#implementing-time-travel
forceInternal: true
- id: wrapping-up
- title: Wrapping Up
+ title: まとめ
href: /tutorial/tutorial.html#wrapping-up
forceInternal: true
diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index 9e1e58872..c827075eb 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -1,6 +1,6 @@
---
id: tutorial
-title: "Tutorial: Intro to React"
+title: "チュートリアル：React の導入"
layout: tutorial
sectionid: tutorial
permalink: tutorial/tutorial.html
@@ -12,79 +12,79 @@ redirect_from:
- "docs/tutorial-zh-CN.html"
---
-This tutorial doesn't assume any existing React knowledge.
+このチュートリアルを読むにあたって必要な React の事前知識はありません。
-## Before We Start the Tutorial {#before-we-start-the-tutorial}
+## チュートリアルを始める前に {#before-we-start-the-tutorial}
-We will build a small game during this tutorial. **You might be tempted to skip it because you're not building games -- but give it a chance.** The techniques you'll learn in the tutorial are fundamental to building any React apps, and mastering it will give you a deep understanding of React.
+このチュートリアルでは小さなゲームを作成します。**自分はゲームを作りたいのではないから、と飛ばしたくなるかもしれませんが、是非目を通してみてください。**このチュートリアルで学ぶ技法はどのような React のアプリにおいても基本的なものであり、マスターすることで React への深い理解が得られます。
->Tip
+>ヒント
>
->This tutorial is designed for people who prefer to **learn by doing**. If you prefer learning concepts from the ground up, check out our [step-by-step guide](/docs/hello-world.html). You might find this tutorial and the guide complementary to each other.
+>このチュートリアルは実際に手を動かして学びたい人向けに構成されています。コンセプトを順番に学んでいきたい人は[一段階ずつ学べるガイド](/docs/hello-world.html)を参照してください。このチュートリアルとガイドは互いに相補的なものです。
-The tutorial is divided into several sections:
+このチュートリアルは複数のセクションに分割されています。
-* [Setup for the Tutorial](#setup-for-the-tutorial) will give you **a starting point** to follow the tutorial.
-* [Overview](#overview) will teach you **the fundamentals** of React: components, props, and state.
-* [Completing the Game](#completing-the-game) will teach you **the most common techniques** in React development.
-* [Adding Time Travel](#adding-time-travel) will give you **a deeper insight** into the unique strengths of React.
+* [チュートリアルの準備](#setup-for-the-tutorial)：以下のチュートリアルを進めるにあたっての開始地点です。
+* [概要](#overview)：コンポーネントや props、state といった**基礎概念**について学びます。
+* [ゲームを完成させる](#completing-the-game)：React での開発における**非常によくある技法**について学びます。
+* [タイムトラベル機能の追加](#adding-time-travel)：React 独自の利点について**深い洞察**が得られます。
-You don't have to complete all of the sections at once to get the value out of this tutorial. Try to get as far as you can -- even if it's one or two sections.
+このチュートリアルから価値を得るために全セクションを一度に終わらせる必要はありません。セクション 1 つや 2 つ分でも構いませんので、できるところまで進めましょう。
-It's fine to copy and paste code as you're following along the tutorial, but we recommend to type it by hand. This will help you develop a muscle memory and a stronger understanding.
+チュートリアルを進めながらコードをコピー・ペーストしても構いませんが、手でタイプすることをお勧めします。そうすれば手が動きを覚えるとともに、理解も進むようになるでしょう。
-### What Are We Building? {#what-are-we-building}
+### これから作るもの {#what-are-we-building}
-In this tutorial, we'll show how to build an interactive tic-tac-toe game with React.
+このチュートリアルでは、インタラクティブな三目並べゲーム (tic-tac-toe) の作り方をお見せします。
-You can see what we'll be building here: **[Final Result](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. If the code doesn't make sense to you, or if you are unfamiliar with the code's syntax, don't worry! The goal of this tutorial is to help you understand React and its syntax.
+最終的な結果をここで確認することができます：**[最終結果](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**。まだコードが理解できなくても、あるいはよく知らない構文があっても、心配は要りません。このチュートリアルの目的は、React とその構文について学ぶことです。
-We recommend that you check out the tic-tac-toe game before continuing with the tutorial. One of the features that you'll notice is that there is a numbered list to the right of the game's board. This list gives you a history of all of the moves that have occurred in the game, and is updated as the game progresses.
+チュートリアルを進める前に三目並べゲームで遊んでみることをお勧めします。いくつか機能がありますが、ひとつには、盤面の右側に番号付きリストがあることに気づかれるでしょう。このリストにはゲーム内で起きたすべての着手 (move) のリストが表示され、ゲームが進むにつれて更新されていきます。
-You can close the tic-tac-toe game once you're familiar with it. We'll be starting from a simpler template in this tutorial. Our next step is to set you up so that you can start building the game.
+どういうものかわかったら三目並べゲームを閉じて構いません。もっと小さな雛形から始めましょう。次のステップはゲームの構築ができるようにするための環境のセットアップ作業です。
-### Prerequisites {#prerequisites}
+### 前提知識 {#prerequisites}
-We'll assume that you have some familiarity with HTML and JavaScript, but you should be able to follow along even if you're coming from a different programming language. We'll also assume that you're familiar with programming concepts like functions, objects, arrays, and to a lesser extent, classes.
+HTML と JavaScript に多少慣れていることを想定していますが、他のプログラミング言語を使ってきた人でも進めていくことはできるはずです。また、関数、オブジェクト、配列、あるいは（相対的には重要ではありませんが）クラスといったプログラミングにおける概念について、馴染みがあることを想定しています。
-If you need to review JavaScript, we recommend reading [this guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Note that we're also using some features from ES6 -- a recent version of JavaScript. In this tutorial, we're using [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use the [Babel REPL](babel://es5-syntax-example) to check what ES6 code compiles to.
+JavaScript を復習する必要がある場合は、[このガイド](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)を読むことをお勧めします。また ES6 という JavaScript の最近のバージョンからいくつかの機能を使用していることにも注意してください。このチュートリアルでは、[アロー関数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)、[クラス](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)、[`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) および [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) ステートメントを使用しています。[Babel REPL](babel://es5-syntax-example) を使って ES6 のコードがどのようにコンパイルされるのか確認することができます。
-## Setup for the Tutorial {#setup-for-the-tutorial}
+## チュートリアルの準備 {#setup-for-the-tutorial}
-There are two ways to complete this tutorial: you can either write the code in your browser, or you can set up a local development environment on your computer.
+このチュートリアルを最後まで進めるための方法が 2 種類あります。ブラウザでコードを書くか、マシン上にローカルな開発環境をセットアップするかのどちらかです。
-### Setup Option 1: Write Code in the Browser {#setup-option-1-write-code-in-the-browser}
+### オプション 1: ブラウザでコードを書く {#setup-option-1-write-code-in-the-browser}
-This is the quickest way to get started!
+始めるのに一番手っ取り早い方法です！
-First, open this **[Starter Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** in a new tab. The new tab should display an empty tic-tac-toe game board and React code. We will be editing the React code in this tutorial.
+まず、この**[スターターコード](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**を新しいタブで開いてください。空の三目並べの盤面と React のコードが表示されるはずです。このチュートリアルではこのコードを編集していくことになります。
-You can now skip the second setup option, and go to the [Overview](#overview) section to get an overview of React.
+次のオプションはスキップして、直接[概要](#overview)へと進んで React の全体像を学びましょう。
-### Setup Option 2: Local Development Environment {#setup-option-2-local-development-environment}
+### オプション 2: ローカル開発環境 {#setup-option-2-local-development-environment}
-This is completely optional and not required for this tutorial!
+これは完全にオプションであり、このチュートリアルを進めるのに必須ではありません！
-Optional: Instructions for following along locally using your preferred text editor
+オプション：好きなテキストエディタを使ってローカルでチュートリアルを進める方法
-This setup requires more work but allows you to complete the tutorial using an editor of your choice. Here are the steps to follow:
+このセットアップでは作業は増えますが、好きなテキストエディタを使ってチュートリアルを進めることができます。以下のステップに従ってください。
-1. Make sure you have a recent version of [Node.js](https://nodejs.org/en/) installed.
-2. Follow the [installation instructions for Create React App](/docs/create-a-new-react-app.html#create-react-app) to make a new project.
+1. 最新の [Node.js](https://nodejs.org/en/) がインストールされていることを確かめる。
+2. [Create React App のインストールガイド](/docs/create-a-new-react-app.html#create-react-app)に従って新しいプロジェクトを作成する。
```bash
npx create-react-app my-app
```
-3. Delete all files in the `src/` folder of the new project
+3. 新しく作ったプロジェクトの `src/` 内にあるファイルをすべて削除する
-> Note:
+> 補足:
>
->**Don't delete the entire `src` folder, just the original source files inside it.** We'll replace the default source files with examples for this project in the next step.
+> **`src` フォルダ自体をまるごと消すのではなく、中にあるソースファイルを削除してください。**この次のステップで、デフォルトのソースファイルをこのプロジェクト用の例に置き換えます。
```bash
cd my-app
@@ -100,11 +100,11 @@ del *
cd ..
```
-4. Add a file named `index.css` in the `src/` folder with [this CSS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0100).
+4. `src/` フォルダ内に `index.css` という名前のファイルを作り、[ここの CSS コード](https://codepen.io/gaearon/pen/oWWQNa?editors=0100)を記入する。
-5. Add a file named `index.js` in the `src/` folder with [this JS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010).
+5. `src/` フォルダ内に `index.js` という名前のファイルを作り、[ここの JS コード](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)を記入する。
-6. Add these three lines to the top of `index.js` in the `src/` folder:
+6. `src/` フォルダ内の `index.js` ファイルの先頭に以下の 3 行のコードを加える。
```js
import React from 'react';
@@ -112,25 +112,25 @@ import ReactDOM from 'react-dom';
import './index.css';
```
-Now if you run `npm start` in the project folder and open `http://localhost:3000` in the browser, you should see an empty tic-tac-toe field.
+これでプロジェクトフォルダ内で `npm start` を実行し、ブラウザで `http://localhost:3000` を開くと、空の三目並べの盤面が表示されるはずです。
-We recommend following [these instructions](https://babeljs.io/docs/editors/) to configure syntax highlighting for your editor.
+[ここにある指示](https://babeljs.io/docs/editors/)に従って、エディタ上でシンタックスハイライティングを設定することをお勧めします。
-### Help, I'm Stuck! {#help-im-stuck}
+### 助けて、ハマった！ {#help-im-stuck}
-If you get stuck, check out the [community support resources](/community/support.html). In particular, [Reactiflux Chat](https://discord.gg/0ZcbPKXt5bZjGY5n) is a great way to get help quickly. If you don't receive an answer, or if you remain stuck, please file an issue, and we'll help you out.
+もし問題にはまったら、[コミュニティーによるサポート情報](/community/support.html)をチェックしてみてください。特に [Reactiflux Chat](https://discord.gg/0ZcbPKXt5bZjGY5n) は迅速なヘルプが得られます。良い回答が得られなかった場合や問題が解決しない場合は、issue を作成して下さったら、私たちがお手伝いします。
-## Overview {#overview}
+## 概要 {#overview}
-Now that you're set up, let's get an overview of React!
+準備が完了したので、React の概要を学びましょう！
-### What Is React? {#what-is-react}
+### React とは？ {#what-is-react}
-React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called "components".
+React はユーザーインターフェイスを構築するための、宣言型で効率的で柔軟な JavaScript ライブラリです。複雑な UI を、「コンポーネント」と呼ばれる小さく独立した部品から組み立てることができます。
-React has a few different kinds of components, but we'll start with `React.Component` subclasses:
+React にはいくつか異なる種類のコンポーネントがあるのですが、ここでは `React.Component` のサブクラスから始めましょう：
```javascript
class ShoppingList extends React.Component {
@@ -151,11 +151,11 @@ class ShoppingList extends React.Component {
// Example usage:
```
-We'll get to the funny XML-like tags soon. We use components to tell React what we want to see on the screen. When our data changes, React will efficiently update and re-render our components.
+この妙な XML のようなタグについてはすぐ後で説明します。コンポーネントは、React に何を描画したいかを伝えます。データが変更されると、React はコンポーネントを効率よく更新して再レンダーします。
-Here, ShoppingList is a **React component class**, or **React component type**. A component takes in parameters, called `props` (short for "properties"), and returns a hierarchy of views to display via the `render` method.
+ここで `ShoppingList` は **React コンポーネントのクラス**、もしくは **React コンポーネントの型**です。コンポーネントは props（"properties" の略）と呼ばれるパラメータを受け取り、`render` メソッドを通じて、表示するビューの階層構造を返します。
-The `render` method returns a *description* of what you want to see on the screen. React takes the description and displays the result. In particular, `render` returns a **React element**, which is a lightweight description of what to render. Most React developers use a special syntax called "JSX" which makes these structures easier to write. The `` syntax is transformed at build time to `React.createElement('div')`. The example above is equivalent to:
+`render` メソッドが返すのははあなたが画面上に表示したいものの*説明書き*です。React はその説明書きを受け取って画面に描画します。具体的には、`render` は、描画すべきものの軽量な記述形式である **React 要素**というものを返します。たいていの React 開発者は、これらの構造を簡単に記述できる "JSX" と呼ばれる構文を使用しています。`` という構文は、ビルド時に `React.createElement('div')` に変換されます。上記の例は以下のコードと同等です：
```javascript
return React.createElement('div', {className: 'shopping-list'},
@@ -164,33 +164,33 @@ return React.createElement('div', {className: 'shopping-list'},
);
```
-[See full expanded version.](babel://tutorial-expanded-version)
+[全体バージョンを参照する。](babel://tutorial-expanded-version)
-If you're curious, `createElement()` is described in more detail in the [API reference](/docs/react-api.html#createelement), but we won't be using it in this tutorial. Instead, we will keep using JSX.
+興味があれば、`createElement()` は [API リファレンス](/docs/react-api.html#createelement)でより詳細に説明されていますが、このチュートリアルでは直接この関数を使用することはありません。代わりに JSX を使い続けます。
-JSX comes with the full power of JavaScript. You can put *any* JavaScript expressions within braces inside JSX. Each React element is a JavaScript object that you can store in a variable or pass around in your program.
+JSX では JavaScript のすべての能力を使うことができます。*どのような* JavaScript の式も JSX 内で中括弧に囲んで記入することができます。各 React 要素は、変数に格納したりプログラム内で受け渡ししたりできる、JavaScript のオブジェクトです。
-The `ShoppingList` component above only renders built-in DOM components like `` and ``. But you can compose and render custom React components too. For example, we can now refer to the whole shopping list by writing ``. Each React component is encapsulated and can operate independently; this allows you to build complex UIs from simple components.
+上記の `ShoppingList` コンポーネントは `` や `` といった組み込みの DOM コンポーネントのみをレンダーしていますが、自分で書いたカスタム React コンポーネントを組み合わせることも可能です。例えば、`` と書いてショッピングリスト全体を指し示すことができます。それぞれの React のコンポーネントはカプセル化されており独立して動作します。これにより単純なコンポーネントから複雑な UI を作成することができます。
-## Inspecting the Starter Code {#inspecting-the-starter-code}
+## スターターコードの中身を確認する {#inspecting-the-starter-code}
-If you're going to work on the tutorial **in your browser,** open this code in a new tab: **[Starter Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. If you're going to work on the tutorial **locally,** instead open `src/index.js` in your project folder (you have already touched this file during the [setup](#setup-option-2-local-development-environment)).
+**ブラウザで**チュートリアルを進めている場合、この**[スターターコード](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**を新しいタブで開いてください。**ローカルで**チュートリアルを進めている場合は、代わりにプロジェクトフォルダにある `src/index.js` を開いてください（[セットアップ](#setup-option-2-local-development-environment)時にこのファイルを既に触ったはずです）。
-This Starter Code is the base of what we're building. We've provided the CSS styling so that you only need to focus on learning React and programming the tic-tac-toe game.
+このスターターコードが我々が作ろうとしているもののベースになります。CSS によるスタイルは既に含まれていますので、React と三目並べのプログラミングに集中できるようになっています。
-By inspecting the code, you'll notice that we have three React components:
+コードを見てみると、3 つの React コンポーネントがあることが分かります。
-* Square
-* Board
+* Square（正方形のマス目）
+* Board（盤面）
* Game
-The Square component renders a single `