今回は、そこそこ強い思考ルーチンを作ることに挑戦してみました。
出来たソースコードはこちらにあります。
https://github.com/mikehibm/reversi-react/tree/blog-4
動いているものはこんな感じになりました。
---
---
下のURLで実際に動かせますのでぜひ試して見て下さい。
https://reversi-d1kqojbar.now.sh/
CPUのレベルは１から３まであります。レベル１は１手先、レベル２は２手先、レベル３は３手先まで打てる可能性のある場所を全て調べて、最も有利になりそうな場所に打つようになっています。
思考ルーチンの内容は長くなるので省略しますが、とても面白いテーマです。興味のある方には、次の本を強くおすすめしておきます。これからリバーシを自分で作ってみようと思う人には本当に役に立つ情報が詰まっています。
---
---
今回は、上の本では「用いないほうが良い」と書かれている「得点テーブル」による評価を使ってしまいましたが、それに加えて「確定石」の数による評価を組み合わせて実装したところ、意外とまあまあ強い思考ルーチンになったような気がしています。
さて、このアプリケーションではコンピュータの思考ルーチンを Web Worker を使って別スレッドで実行するようになっています。と言うと簡単に聞こえますが、実際にはかなり試行錯誤と苦労の連続でした。
なぜ苦労したかと言うと、それなりに複雑な処理をWebWorkerで実行しようとするとやはり TypeScript を使いたいし、複数のWorker間で共通に使える関数はモジュール化して import 出来るようにしたかったからです。
① WebWorkerもTypeScriptで書く、かつimport文を使えるようにする
② Create React App で作成されたプロジェクトをejectせずに（Webpackの設定を変えずに）これを実現する
この①と②の目標を達成するためにいろいろと試した結果、前回の記事で使った「Workerの関数をtoString()で文字列化した上でBlobとして読み込んでからWorkerスレッドを生成する」という方法ではなく、シンプルな
const worker = new Worker('my-worker.js');
という形式で単にpublicフォルダに置いたJSファイルを指定して読み込む方法を使うことにしました。
その上で、WebWorker関連のTypeScriptファイルだけをアプリケーション本体とは切り離して独自にトランスパイルする方法を考えました。
ただ、共通部分をモジュール化して import/export を使うというのは、結局WebWorkerとの組み合わせではいい感じで正しく動かすための設定方法を見つけることが出来ませんでした。（tscでトランスパイルするのではなくwebpack/babelとworker-loaderプラグインなどを使えばなんとかなるのかも知れません。詳細は末尾の参考URL参照）
その代わりに、
importScripts('インポートされるJSファイル名')
という記法はWebWorkerの中で問題なく使えたので、これを利用することにしました。
プロジェクトのルートに tsconfig.json がありますが、それとは別に「tsconfig.worker.json」ファイルを作成しました。
---
---
"module": "none",
とすることでモジュールシステムを使わないようにしている点と、
"outDir": "public"
でトランスパイル後のJSファイルを直接publicフォルダに保存している点に注目です。
これで、
tsc -p tsconfig.worker.json
を実行すると
public/reversi.worker.js
public/players/cpu1.worker.js
public/players/cpu2.worker.js
public/players/cpu3.worker.js
という4つのJSファイルが出来るようになります。
cpu1〜3.worker.jsの先頭では、
importScripts('../reversi.worker.js');
とすることで共通部分である reversi.worker.js を読み込んでいます。
あとは、アプリ内でWorkerを生成する必要があるときに
new Worker('players/cpu1.worker.js');
のような感じで読み込めば良いということになります。
参考URL：
Workerを駆使するためのプロジェクト構成 with webpack - Qiita
https://qiita.com/_likr/items/d382dc120a942ba4c6fe
4パターンのWebWorker生成方法とインラインワーカーの技法 - Qiita
https://qiita.com/mohayonao/items/872166cf364e007cf83d
Two example projects which use WebWorker in TypeScript + Webpack environment.
https://github.com/Qwaz/webworker-with-typescript
React/TypeScriptでリバーシゲームを作る
(1) - ボードの描画と石の配置
https://blog.makotoishida.com/2018/10/reacttypescript.html
(2) - ゲームロジック
https://blog.makotoishida.com/2018/11/reacttypescript-2.html
https://blog.makotoishida.com/2019/01/reacttypescript-3-1.html
(4) - 思考ルーチンその2
https://blog.makotoishida.com/2019/03/reacttypescript-3-2.html
(5) - アニメーション
https://blog.makotoishida.com/2019/03/reacttypescript-5.html
.