入門」シリーズ最終回は、無駄な処理を省く断捨離です。引き分けたら終わりにする前回src/components/App.jsモジュールで、勝ちが決まったら、マス目をクリックしてもゲームの処理が先に進まないようにしました。引き分けの場合も同じです。指し手(stepNumber)が9に達したら、ゲームは終わりにすべきでしょう。繰り返すテンプレート要素はループ処理でつくるもうひとつ気になるのは、src/components/Board.jsモジュールのマス目(Square)を3つずつテンプレートに並べるコードです。for文の繰り返し処理にした方が、見た目はすっきりします。要素を並べて返す関数(renderRow())は新たに定めました。繰り返し処理で加えるテンプレート要素に、keyプロパティを加えることは忘れないでください。ゲームが終わったらconClickハンドラをなくすゲームの勝ちが決まるか、引き分けに終わったとき、src/components/App.jsモジュールのconClickハンドラのメソッド(handleClick())は処理を直ちに終えるようになりました。いえば、メソッドを呼び出すことそのものが無駄です。ゲームのけりがついたら、conClickハンドラを除いてしまいましょう。ユーザーのクリックを受けるconClickハンドラは、Boardコンポーネントに定めてありました。そこで、src/components/App.jsモジュールのテンプレートで、ゲーム終了のプロパティ(finished)を渡しておきます。className="game"><Boardfinished={this.state.finished}/></div>);}}そして、モジュールsrc/components/Board.jsで手を加えるのは、マス目(Square)のテンプレートをつくって返す関数(renderSquare())です。ゲーム終了のプロパティ(finished)値によりconClickハンドラを加えるかどうか切り分けます。props.onClick(i)}/>};ゲームの決着がつけば、onClickハンドラ自体が除かれます。無駄なメソッド呼び出しがなくなったということです。履歴をさかのぼれば、またクリックで手が勧められます。ゲームの動きそのものは変わりません(図001)。図001■マルバツゲームの動きは変わらない無駄をなくすように書き替えたモジュールふたつのスクリプトは、つぎのコード001にまとめたとおりです。サンプル001をCodeSandboxに公開しました。