2015)についても解説します。ゲームの盤面をつくる」では、9マスのマルバツゲーム盤面をつくり、クリックしたマス目に「X」を示しました。「X」と「O」が交互に出るようにし、並びから勝ちを決めます。9マスの値を盤面のコンポーネントにまとめる今回、「X」と「O」が交互につけられるようになり、勝ちもわかりますので、マルバツゲームとしてひとまずかたちにはなります(サンプル001)。01」のコード002「9マスのゲーム盤面をつくる」に手を加えてゆきましょう。refined勝ちを決めるには、9つのマス目の値をまとめて捉えていなければなりません。そのため、盤面のコンポーネント(Board)のstateに、配列(squares)を加えます。初期値は、以下のようにコンストラクタとして呼び出されるconstructor()メソッドで与えます。メソッド本体から、継承するスーパークラスのコンストラクタを呼び出すのがsuper()です。この後でなければ、this参照はできません。盤面のコンポーネント(Board)には、クリックのハンドラ(handleClick())も加えます。その本体で配列(squares)はArray.slice()メソッドにより複製してから値を書き替えて、setState()メソッドで上書きするかたちにしています。オブジェクトは複雑になると階層が深くなることもあり、じかに書き替えると影響が予想しにくくなるからです。Important」参照)。squares});}}それぞれのマス目に示す値も、クリックのハンドラも、盤面のコンポーネント(Board)がもちます。そこで、マス目の要素を返すメソッド(renderSquare())は、つぎのようにふたつの変数(valueとonClick)にそれぞれのJavaScriptコードを与えました。すると、マス目のコンポーネント(Square)は、propsプロパティから値を参照し、ハンドラのメソッド(handleClick())が呼び出せます。関数コンポーネントを使うマス目のコンポーネント(Square)はみずから値をもたなくなったので、もはやstateプロパティも要りません。このような場合、コンポーネントは返す要素を戻り値とした関数で定められます。Componentsについて」参照)。マス目のコンポーネントは、つぎのように書き替えればよいのです。}}これで9マスの値を盤面のコンポーネント(Board)がまとめて扱えるようになりました。01」コード002と変わりません。9つのマス目の値を配列に納めていますので、その要素を調べることにより勝ちが決められます。ここまでのJavaScriptの手直しは、以下のコード001にまとめました。XとOを交互につけるゲームの盤面はマス目9つで組み立てます。盤面はつぎのように新たなクラス(Board)で定めました。JSXの構文の中に波かっこ{}を使うと、JavaScriptの式が書けます。変数(プロパティ)を参照したり、関数(メソッド)が呼び出せるのです。render()メソッドは、const宣言した定数(status)の値を<div>要素のテキストとして差し込み、3コマから1行をつくる<div>要素の中からメソッド(renderSquare())を呼び出します。メソッドからマス目(Square)の要素をひとつ受け取って加えているのです。勝ちを調べる9マスの値の配列から勝ちの3つの並びがあるかどうか、つぎの関数(calculateWinner())でたしかめられます。勝ちの3つのマス目の組み合わせは、定数(lines)に配列で納めておきます。関数は引数(squares)に受け取った9つの値の配列から、勝ちのいずれかの組み合わせがあるかどうかfor文で順に調べるのです。勝ちがあったらその印(「X」か「O」)、なかったらnullが返されます。6で採り入れられました。null;}盤面のコンポーネント(Board)は、つぎのようにrender()メソッドで前掲関数(calculateWinner())から勝ちが見つかったら勝者を示します(図002)。これだけでは勝ちが決まっても、続けて印がつけられます。それだけでなく、すでに選ばれたマス目もクリックで印が変えられてしまうのです。そこで、クリックのハンドラ(handleClick())にコードを書き加え、勝ちが決まったあとや、すでに選ばれたマス目は盤面が変わらないようにしました。盤面のコンポーネント(Board)でクリックのハンドラ(handleClick())は、クリックから進めてよいかどうかを、つぎのような3行のif文で判定していました。コードは短いものの、クリックのたびに関数(calculateWinner())で勝ちの並びがあるかどうか調べるのは効率がよくありません。{return;}}}盤面のコンポーネント(Board)のstateプロパティに、つぎのように勝負がついたかどうかのフラグ(isFinished)を加えれば、その後の関数(calculateWinner())の呼び出しが避けられます。if文は3つに増えても、クリックのハンドラ(handleClick())は、勝負が終わればフラグの値だけ見てただちに処理を抜けます。配列(squares)の複製もしません。その分負荷は下がるはずです。{return;}}これでマルバツゲームとして、ひとまずかたちになりました。書きあがったスクリプトは、つぎのコード002にまとめます。