思考ルーチンその1前回はリバーシのルールを実装して、人対人の対戦が出来るようになりました。今回は、一人でも遊べるようにコンピュータの思考ルーチンを実装します。動くものはこちらです。https://reversi-992nmioqt.now.sh/タイトル画面でレベル1〜3が選べるようになっています。(現段階ではどれを選んでも実際には難易度は同じです。結果が出るとその座標に石を配置します。現時点でのソースコードはこちらにあります。https://github.com/mikehibm/reversi-react/tree/blog-3さて、コンピュータとの対戦を実現するにあたって工夫する必要があるのは、「思考ルーチンを別スレッドで動かして、UIをブロックしないようにする」ことです。通常ブラウザ上で動くJavaScriptアプリケーションでは一つのスレッドしか使えないので、時間がかかってCPUパワーを消費する処理を行うとその間UIが固まったりカクカクした感じになったりして操作性が悪くなります。Workersを使う方法は、下の記事に書いたとおりです。Workerを使うにはこの記事で調べた、「WorkerのJSファイルをBlobとして読み込んでからWorkerスレッドを生成する」という方法を使うことにしました。基本的な仕組みを実装することに主眼を置いたので、思考ルーチンの内容は単に「配置可能な座標のなかからランダムに選ぶ」だけの動作になっています。この処理だと実際には一瞬で終わってしまうのでWorkerスレッドを使う意味は全くありません。Workerスレッドを使う意味があるような、もっとヘビーにCPUを使う思考ルーチンへの改良については、次回以降の記事で書くことにします。いう関数があり、そこに思考ルーチンの実態が入っているのが分かります。thinkWorkerという名前のWorkerスレッドを作成しています。execute()メソッドを呼んで思考ルーチンを起動しています。postMessage()を呼んだ後のイベントハンドリングを抽象化したものになっています。呼んでその座標を渡します。store内部で盤面の状態が適宜更新されてイベントが発行されるので、それを受けて画面の表示が自動的に更新されることになります。ここまででコンピュータとの対戦機能を実現するための基本的な仕組みを実装することが出来ました。