Web Workerを使ってドラクエウォークのこころ情報を取得してみる

オウルです。

今回は、ハマっているドラクエウォークを題材にWeb Workerを使ってドラクエウォークのこころ情報を取得してみます。まぁ、この程度の処理であれば、わざわざWeb Workerを使用しなくともFetchだけで事足りますが、そこはWeb Workerを動かす!が目的ということで。

ローカル環境
WSL v1 Ubuntu18.04 LTS
App ASP.NET Core 3.1.302
DB MongoDB

MongoDBは次回使用する予定です。

Web Workerとは

Web Worker とは、ウェブアプリケーションにおけるスクリプトの処理をメインとは別のスレッドに移し、バックグラウンドでの実行を可能にする仕組みのことです。時間のかかる処理を別のスレッドに移すことが出来るため、 UI を担当するメインスレッドの処理を中断・遅延させずに実行できるという利点があります。

本記事はWeb Workerのサンプルを作って動作させることを主目的としているため、もっと詳しくWeb Workerを知りたいという方は、MDNのWeb Workerの概念と使い方を参照することをお勧めします。

Web Workerには、いくつかの種類がありますが、今回使用するのはDedicated Workerです。

Dedicated Workerは、Workerスレッド(メインスレッドとは別)で処理(スクリプト)を実行します。ドラクエウォークのこころ情報を取得するサンプルを作成する前に、少しDedicated Workerの制限について紹介します。

Dedicated Workerの制限

バックグラウンドのスレッドで処理を実行してくれる便利なDedicated Workerですが、何でもできるわけではありません。

特に知っておく必要があることは、WorkerからDOMを直接操作することは出来ないということです。

また、Workerは、windowとは別のグローバルなコンテキスト(DedicatedWorkerGlobalScope)で実行されるため、windowにデフォルトで用意されているメソッドやプロパティにアクセスするとエラー(使用できない)になるものもあります。その他詳細については、MDNのWeb Workers が使用できる関数とクラスを、参照ください。

ドラクエウォークのこころを取得

Web Workers が使用できる関数とクラスにあるように、使用できる関数とクラスには、制限があります。今回前提するブラウザはChromeです。そのため、こころ情報の取得にはFetchを使用することとします。

フロント

では、まず画面からです。シンプルに、キラーマシンかキングスラムを選択するとBar Chartsでこころ情報が表示される仕様にします。Bar Chartsの描画は、google chartsを使用します。

Index.cshtml

main.js

main.js内でDedicated Workerを生成、Workerへのメッセージ送信、Workerからのメッセージに応答の処理を定義しています。

Workerとメインスレッド間は、postMessage()を使用してメッセージを送信して、onmessageイベントハンドラーによってメッセージに応答します。ここでの注意は、メインページとWorker間で送られるメッセージは共有ではなく、コピーとなります。補足情報としてTransferable Object(Transferable インターフェイスを実装するオブジェクト)は、コピーではなく転送となります。Rustでいう所有権の移動に近いでしょうか(ムーブセマンティクス)。

Google Chartsを描画するのはECMAScript 2015で導入されたJavaScriptクラス(プロトタイプベース継承の糖衣構文)で定義しています。

worker.js

Workerはメッセージを受け取り、サーバから取得したこころ情報をメインスレッドに返しています。

サーバ

ここはハードコードとなっていますが、受け取ったIDから、こころ情報を取得してクライアントに返します。

MonsterController.cs

結果

キラーマシンのこころ

次回は、こころ情報をMongoDBから取得するように変更して、式木(Expression Trees)とMongoDB C#/.NET Driverの動的条件における実装のしやすさを検証します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA