こんにちは、すぐるです！
sugulogをお読みいただきありがとうございます！！
このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準に書いています。
少しでもお役に立てれば幸いです。
今回は、WebWorkerを使用しバックグラウンドでも処理を実行させようということで
-
JavaScriptのWebWorker
について簡単に解説します！！
その為このブログを読むことで、WebWorkerについて理解できるのはもちろん、バックグラウンドで処理を実行できるようにもなります。
是非最後までご愛読ください。
今回は、
・WebWorker
・バックグラウンドでも処理を実行させてみよう
の順で解説していきます。
では早速、みていきましょう！！
・WebWorker
WebWorkerとはJavaScriptにおけるメインスレッドの処理とは別に分離して処理を実行するための機能のことです。
負荷の高い処理をメインスレッドで行うと処理終了まで他の操作を行うことができないなどの影響が出てきてしまします。
しかしメインスレッドとは別の場所での処理(バックグラウンド)を使用することでメインスレッドの裏側で処理を実行し、メインスレッド側で処理の終了を待つ必要がなくなります。
ただWebWorkerはDOM操作ができない、ページが開かれている時のみに実行される、サーバーにアップしているファイルのみでしかChromeではローカルで使用できないといった注意点があります。
・バックグラウンドでも処理を実行させてみよう
今回は簡単な計算をWebWorkerを使用しバックグラウンドで行いたいと思います。
まずはHTMLで計算式を表示させます。
そしてJavaScriptの記述です。
まずは各要素を取得しています。
WebWorkerを使用する際はnew Worker('バックグラウンドで処理させたいファイルへのパス')でWebWorkerのインスタンスを生成します。
そして計算ボタンが押された際にworker.postMessage(連携したいデータ)でバックグラウンド処理ファイルにデータを送信します。
複数のデータを連携する際は配列の形で引数を指定します。
今回はNumber()でinput要素から取得した値を数値型に変換し、配列の形で引数を指定しています。
またバックグラウンド処理ファイルから処理結果を受け取る際は、worker.onmessageでレスポンスを監視しeventのdataとして受け取ります。
次にバックグラウンド処理ファイル側の記述を見てみましょう。
worker.postMessage()で送られてきたデータをonmessageで監視しeventのdataとして受け取ります。
今回データは配列で送られてきたためdata[0]、data[1]のようにデータを取得しています。
その後はデータを計算しpostMessage()で計算結果を返却しています。
計算がしっかりと行われているのが確認できます。
以上、今回のブログでした。
WebWorkerについて理解でき、バックグラウンドで処理を実行できるようにもなりましたか？
今回は簡単な計算なためWebWorkerの恩恵をあまり感じませんが、バックグラウンド処理を身につけることで実装の幅が格段に広がります。
どんな形にも対応できるように自分の知識として蓄えていきましょう。
今回のToDo
WebWorkerを使用しバックグラウンドでも処理を実行させてみましょう(≧∀≦)/
最後に！！
今後も、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準にブログを書いていきます。
少しでも気になった方はお試しでもいいので1度読者登録お願いします！
最後までご愛読いただきありがとうございました！！