Reactを初めて触ってみました(tutorialその⑧)
このページはReact公式ページのtutorialを体験したメモと初心者なりの解釈を記述したページになります。
前回では兄弟要素にはkeyを用いて対象要素の識別をし更新を行った場合にKeyを元に対象要素を更新したり、新たなKeyは追加で保存されたり削除されたKeyは削除されプロパティからも削除してくれることをReactがしてくれるんだと言うことがわかりました。
今回はボタンを履歴ボタンを押してその時の状態が再現されるところをやっていよいよtutorialの完成を目指します。
※WEB翻訳をそのまま載せているところもありますが自分で理解できるように記事にしています。
では前回に引き続き履歴の部分をやっていきましょう
移動リストについてはすでに各操作ごとに回数があり回数は一意ですのでIDとして利用できます。
その回数をGameのrenderでliの要素にkey属性を追加します。
const moves = history.map((step, move) => {
const desc = move ?
'Go to move #' + move :
'Go to game start';
return (
<li key={move}>
<button onClick={() => this.jumpTo(move)}>{desc}</button>
</li>
);
});
まだ、jumpTOのメソッドが未定義なので履歴のボタンが追加されていってもボタンを押すとエラーになってしまいますね。
Gameの状態に新しいKeyを追加して現在表示している回数（履歴）を表示します。
stepNumber: 0
をGameのコンストラクタに定義して初期化します。
class Game extends React.Component {
constructor(props) {
super(props);
this.state = {
history: [{
squares: Array(9).fill(null),
}],
stepNumber: 0,
xIsNext: true,
};
}
ではjumpToメソッドを追加していきましょう。
jumpTo(step) {
this.setState({
stepNumber: step,
xIsNext: (step % 2) === 0,
});
}
xIsNextを更新します。こ表示のPlayerを切り替えないといけませんからね。
異動する回数の奇数か偶数かで値を更新しています。
新しい履歴へのボタン選択が行われた時にstepNumberを更新しますが更新するには、gameのhandleClickの状態更新にstepNumber：history.lengthを追加します。
handleClickを更新してstepNumberを認識し現在のボードを読み込むとその時のボードに戻ってクリックを待ちゲームを続けることができます。
handleClick(i) {
const history = this.state.history.slice(0, this.state.stepNumber + 1);
const current = history[history.length - 1];
const squares = current.squares.slice();
if (calculateWinner(squares) || squares[i]) {
return;
}
squares[i] = this.state.xIsNext ? 'X' : 'O';
this.setState({
history: history.concat([{
squares: squares
}]),
stepNumber: history.length,
xIsNext: !this.state.xIsNext,
});
}
これで、ゲームのレンダリングを変更して履歴のそのステップから読み込むことができます！
render() {
const history = this.state.history;
const current = history[this.state.stepNumber];
const winner = calculateWinner(current.squares);
// the rest has not changed
ざっと翻訳と理解を踏まえて説明していたんですが自分でもわからない部分があって調べたことを載せておきます。
まずはmap、これはループさせる処理で
map((step, move) => {
}
mapは(callback関数)となりmap(()=>{})で即時関数の実行になります。
callback関数は３つの引数を取ることができて、
currentValue(現在の要素)
index(現在の配列におけるインデックス)
array(mapが実行されている配列)
だそうで、ですのでmoveは操作順として扱っているんですね。
次に、履歴で過去に戻った後に空いている四角形をクリックしたときです。
四角形をクリクする前に履歴の【go to move#N】をクリックしているのでsetNumberにクリックした履歴の番号が保持されます。今度は四角形をクリックするとhandleClickが実行されるのでここでいま保持しているstepNumberまでのhistoryをスライスして取得しいるので四角形をクリックしなければすべての履歴を見ていることができて四角形をクリックすればまたそこからのゲームになる挙動になります。
理解できました！！
ラッピング
これで目標のゲームはできました！
ゲームの勝敗や履歴の記憶と移動などできるようになりました。
基礎的な仕組みを理解していきました。
もし時間があったり新たなことをしたいのであれば次の改善もしてみてください。
- 移動履歴リストに各移動の位置を（col、row）形式で表示します。
- 移動リストで現在選択されている項目を太字にします。
- ボードを書き直してハードコーディングする代わりに2つのループを使って四角形を作ってください。
- トグルボタンを追加すると、移動を昇順または降順のいずれかで並べ替えることができます。
- 誰かが勝利したら、勝利の原因となった3つの正方形を強調表示します。
- 誰も勝利しなかった場合は、抽選の結果に関するメッセージを表示します。
このチュートリアルでは、要素、コンポーネント、小道具などいくつかのReactの概念について触れました。
これらの各トピックの詳細については、残りの
ドキュメントを参照してください。
ようやっとtutorialが終わりました。
まだなれない部分もあるのでこれから発展させて知識を膨らませていきたいと思います。
何かあればなたreactの記事を書いてみたいと思います。
コメント
コメントを投稿