tutorial***をやることになったのでその過程で学んだことを書いていきます。普通にやるだけではつまらないのでいくつか追加要素を加えてみました。tutorialが完成した前提で話を進めます。完成していない方は[公式サイト(英語)](https://reactjs.org/tutorial/tutorial.html)もしくは[解説サイト(日本語版)](https://mae.chab.in/archives/2943)を元に頑張ってください。以下、順に解説します。これは4つの中で最も簡単です。追加してみてください。今回は`:hover`というcssセレクタを使用しました。これはカーソルが乗った時にcssを当ててくれるものです。これによってカーソルが乗った部分が灰色になりました。これも4つの中で簡単な部類です。このtutorialではBoardクラス内でマス目を定義しているので、そこに変更を加えます。index.jsファイルのBoardクラスに移動してください。render()以下で*board-row*という名前のクラスでブロック9つが定義されています。`{this.renderSquare(0)}`から`{this.renderSquare(8)}`までありますが、これを`{this.renderSquare(0)}`から`{this.renderSquare(24)}`まで定義するようにします。することでcssも上手く当たり、マス目が5x5に変わります。マス目が5x5になったので勝利条件も変えていきます。BoardクラスからGameクラスへ移動してください。Array(25).fill(null)`とします。これにより、5x5マス分の変化(空欄or"X"or"O")が記録されるようになります。calculateWinner(squares)**の中身に手を加えます。ここでは勝利する際の並び方の候補を定義しています。12種類もれなく書いてあげることに注意してください。linesで定義した12種類を比較して、どちらかのプレイヤーが勝利した時点で勝者名を宣言するようにしています。これで3x3マスで動いていたアプリが5x5マスでも動くようになりました。黄色で表示することでどのラインが揃ったか分かりやすくなっています。これを実装するのは少々面倒です。calculateWinner(squares)*の中身に再び手を加えます。次に、Gameクラスのrender()以下にこの3行を追加してください。