# React　1.チュートリアル（Tic Tac Toeゲーム作成）学習日：10/21,22
## 1.Reactとは
Reactとは、ユーザーインターフェースを構築するための、宣言型で効率的で柔軟なJavaScriptライブラリである。複雑なUIを「コンポーネント」という小さな独立した部品から組み立てられる。

Reactコンポーネントはrenderメソッドを持ち、そのreturnの中に、描画したい構造をHTML形式で記述できる。テンプレートがHTML形式に非常に近く、これまでcreateElementで行っていたHTML記述作業がぐっと楽になる。

class idolList extends React.Component{
    render(){
        return(
            <div schoolName="StarLight">
                <h1>スターライト学園</h1>
                <ul>
                    <li>星宮いちご</li>
                    <li>霧矢あおい</li>
                    <li>紫吹蘭</li>
                </ul>
            </div>
        );
    }
}

## 2. インタラクティブなコンポーネントを作る
### props経由でデータを渡す＜Square要素＞
propsは任意の入力のことである。propsを引数で受け取ったら、画面上に表示するべきものを記述するreact要素を返す。
### onClickでアラートを表示する
ボタンタグにonClickを追加し、alert機能のfunctionを加える。
アロー関数構文で記述する。
### stateでクリックを覚えさせる
＜Squareメソッド内＞
* コンストラクタにthis.stateを設定する。
* renderメソッド内のonClick内でthis.setStateを呼び出す。

## 3. ゲームを完成させる
### Stateのリフトアップ
ゲームをするためには、ゲーム状態を保持する必要がある。BoardからSquareに問い合わせるのは、コードが分かりにくく壊れやすい。
そこで、ゲーム名の状態を各Squareの代わりにBoardコンポーネントで保持する。Squareにpropsを渡して伝えられる。
但し複数の子要素（コンポーネント）互いにやり取りさせたい場合は、親コンポーネントで共有のstateを宣言する必要がある。
**stateを親コンポーネントにリフトアップ**することはよくある。
＜実習＞
* 初期stateに9個のnullが9個のマス目に対応するコンストラクタを準備する。
* Squareのvalueをthis.state.squares[i]に書き換える。
* onClickメソッドが呼ばれると、() => this.handleClick(i)が呼ばれるよう、renderSquareメソッドを書き換える。
* Square の render メソッド内の this.state.value を this.props.value に書き換える。
* Square の render メソッド内の this.setState() を this.props.onClick() に書き換える。
* Square はもはやゲーム状態を管理しなくなったので、Square の constructor を削除する。
* handleClickを定義し、適合する形に整える。

この時処理はBoard（onClick(i)→this.handleClick(i)）の中で完結しているため、SquareはBoardに制御されたコンポーネントということになる。
### Sliceとイミュータビリティ
配列に記述する際は、.slice()でSquareをコピーし、その上で記述するようにする。なぜなら、書き換え（ミューテート）を直接行わないことで、巻き戻し機能等の複雑な機能の実現や、変更の検出が容易になる、pure componentを構築しやすくなる等のメリットがある。これをイミュータビリティという。
### 関数コンポーネント
関数コンポーネントは、render()以外にメソッドを持たないコンポーネントをよりシンプルに書くための方法である。React.Componentを継承するクラスを定義する代わりに、propsを入力として受け取り表示すべき内容を返す関数を定義する。
### OとXを切り替える
xIsNext :trueをコンストラクタに設定し、handleClickごとにxIsNextが反転するように変更する。表示部分はtrue=X, false=Oと表示される。
### ゲームの終了
判定配列をタテ・ヨコ・ナナメ3×3＝9個取り出し、全てが一致するものがあれば各判定配列で全て同じものがあれば終了し、勝者を判断する。nullの場合、ゲームは続行される。

## 4. タイムトラベル機能の追加
### Stateのリフトアップ
イミュータビリティのおかげで、過去をさかのぼることができる。
quaresの過去の配列全てをhistoryという名前の別の配列に保存する。
Gameコンポーネントにhistoryを作成し、BoardコンポーネントがsquaresとonClickプロパティを受け取れるようにする。
### 過去の着手の表示
mapメソッドで、過去の履歴にジャンプするためのボタンの一覧を表示できる。
コンポーネントに正しくkeyを指定し、判別できるようにする。
### タイムトラベルの実装
jumpToメソッドで、手番数を表すstepNumberを更新できるようにする。
また、ここでxIsNextを偶数・奇数で判断して切り替える。
stepNumberをthis.setStateの引数に加えてStepNumberを更新し、
さらにhistoryの読み取り先にstepNumberの値を参照して読み取るように変更する。

###### tags: `React`