チュートリアル：React の導入

このチュートリアルは React の事前知識ゼロでも読み進められます。

チュートリアルを始める前に

このチュートリアルでは小さなゲームを作成します。自分はゲームを作りたいのではないから、と飛ばしたくなるかもしれませんが、是非目を通してみてください。このチュートリアルで学ぶ技法はどのような React のアプリにおいても基本的なものであり、マスターすることで React への深い理解が得られます。

ヒント

このチュートリアルは実際に手を動かして学びたい人向けに構成されています。コンセプトを順番に学んでいきたい人は一段階ずつ学べるガイドを参照してください。このチュートリアルとガイドは互いに相補的なものです。

このチュートリアルは複数のセクションに分割されています。

• チュートリアルの準備：以下のチュートリアルを進めるにあたっての開始地点です。
• 概要：コンポーネントや props、state といった基礎概念について学びます。
• ゲームを完成させる：React での開発における非常によくある技法について学びます。
• タイムトラベル機能の追加：React 独自の利点について深い洞察が得られます。

このチュートリアルから価値を得るために全セクションを一度に終わらせる必要はありません。セクション 1 つや 2 つ分でも構いませんので、できるところまで進めましょう。

これから作るもの

このチュートリアルでは、インタラクティブな三目並べゲーム (tic-tac-toe) の作り方をお見せします。

最終的な結果をここで確認することができます：最終結果。まだコードが理解できなくても、あるいはよく知らない構文があっても、心配は要りません。このチュートリアルの目的は、React とその構文について学ぶお手伝いをすることです。

チュートリアルを進める前に三目並べゲームで遊んでみることをお勧めします。いくつか機能がありますが、ひとつには、盤面の右側に番号付きリストがあることに気づかれるでしょう。このリストにはゲーム内で起きたすべての着手 (move) のリストが表示され、ゲームが進むにつれて更新されていきます。

どんな物か分かったら三目並べゲームを閉じて構いません。もっと小さな雛形から始めましょう。次のステップはゲームの構築ができるようにするための環境のセットアップ作業です。

前提知識

HTML と JavaScript に多少慣れていることを想定していますが、他のプログラミング言語を使ってきた人でも進めていくことはできるはずです。また、関数、オブジェクト、配列、あるいは（相対的には重要ではありませんが）クラスといったプログラミングにおける概念について、馴染みがあることを想定しています。

JavaScript を復習する必要がある場合は、このガイドを読むことをお勧めします。また ES6 という JavaScript の最近のバージョンからいくつかの機能を使用していることにも注意してください。このチュートリアルでは、アロー関数、クラス、let および const ステートメントを使用しています。Babel REPL を使って ES6 のコードがどのようにコンパイルされるのか確認することができます。

チュートリアルの準備

このチュートリアルを最後まで進めるための方法が 2 種類あります。ブラウザでコードを書くか、マシン上にローカルな開発環境をセットアップするかのどちらかです。

オプション 1: ブラウザでコードを書く

始めるのに一番手っ取り早い方法です！

まず、このスターターコードを新しいタブで開いてください。空の三目並べの盤面と React のコードが表示されるはずです。このチュートリアルではこのコードを編集していくことになります。

次のオプションはスキップして、直接概要へと進んで React の全体像を学びましょう。

オプション 2: ローカル開発環境

これは完全にオプションであり、このチュートリアルを進めるのに必須ではありません！

npx create-react-app my-app

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

助けて、ハマった！

もし問題にはまったら、コミュニティーによるサポート情報をチェックしてみてください。特に Reactiflux Chat は迅速なヘルプが得られます。良い回答が得られなかった場合や問題が解決しない場合は、issue を作成して下さったら、私たちがお手伝いします。

概要

準備が完了したので、React の概要を学びましょう！

React とは？

React はユーザインターフェイスを構築するための、宣言型で効率的で柔軟な JavaScript ライブラリです。複雑な UI を、「コンポーネント」と呼ばれる小さく独立した部品から組み立てることができます。

React にはいくつか異なる種類のコンポーネントがあるのですが、ここでは React.Component のサブクラスから始めましょう：

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />

この妙な XML のようなタグについてはすぐ後で説明します。コンポーネントは、React に何を描画したいかを伝えます。データが変更されると、React はコンポーネントを効率よく更新して再レンダーします。

ここで ShoppingList は React コンポーネントクラス、もしくは React コンポーネント型です。コンポーネントは props（“properties” の略）と呼ばれるパラメータを受け取り、render メソッドを通じて、表示するビューの階層構造を返します。

render メソッドが返すのはあなたが画面上に表示したいものの説明書きです。React はその説明書きを受け取って画面に描画します。具体的には、render は、描画すべきものの軽量な記述形式である React 要素というものを返します。たいていの React 開発者は、これらの構造を簡単に記述できる “JSX” と呼ばれる構文を使用しています。<div /> という構文は、ビルド時に React.createElement('div') に変換されます。上記の例は以下のコードと同等です：

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

全体バージョンを参照する。

興味があれば、createElement() は API リファレンスでより詳細に説明されていますが、このチュートリアルでは直接この関数を使用することはありません。代わりに JSX を使い続けます。

JSX では JavaScript のすべての能力を使うことができます。どのような JavaScript の式も JSX 内で中括弧に囲んで記入することができます。各 React 要素は、変数に格納したりプログラム内で受け渡ししたりできる、JavaScript のオブジェクトです。

上記の ShoppingList コンポーネントは <div /> や <li /> といった組み込みの DOM コンポーネントのみをレンダーしていますが、自分で書いたカスタム React コンポーネントを組み合わせることも可能です。例えば、<ShoppingList /> と書いてショッピングリスト全体を指し示すことができます。それぞれの React のコンポーネントはカプセル化されており独立して動作します。これにより単純なコンポーネントから複雑な UI を作成することができます。

スターターコードの中身を確認する

ブラウザでチュートリアルを進めている場合、このスターターコードを新しいタブで開いてください。ローカルでチュートリアルを進めている場合は、代わりにプロジェクトフォルダにある src/index.js を開いてください（セットアップ時にこのファイルを既に触ったはずです）。

このスターターコードが我々が作ろうとしているもののベースになります。CSS によるスタイルは既に含まれていますので、React と三目並べのプログラミングに集中できるようになっています。

コードを見てみると、3 つの React コンポーネントがあることが分かります。

• Square（正方形のマス目）
• Board（盤面）
• Game

Square（マス目）コンポーネントは 1 つの <button> をレンダーし、Board（盤面）が 9 個のマス目をレンダーしています。Game コンポーネントは盤面と、後ほど埋めることになるプレースホルダーを描画しています。この時点ではインタラクティブなコンポーネントはありません。

データを Props 経由で渡す

では手始めに、Board コンポーネントから Square コンポーネントにデータを渡してみましょう。

チュートリアルを進めるにあたって、コードをコピー・ペーストしないで、手でタイプすることをお勧めします。そうすれば手が動きを覚えるとともに、理解も進むようになるでしょう。

Board の renderSquare メソッド内で、props として value という名前の値を Square に渡すようにコードを変更します：

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

そして Square の render メソッドで、渡された値を表示するように、{/* TODO */} を {this.props.value} に書き換えます。

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      </button>
    );
  }
}

変更前：