Web Workersの概要
HTML5の Web Workerを使う事により バックグラウンドでの作業が可能になります このレッスンではサンプルを通して Web Workerの概要について学びます 複雑な計算の様に幾つかの長いタスクを 実行する必要がある場合或いは 呼び出しに時間のかかるウェブサービスを 使う場合等に非常に便利です これらの重い処理は 通常ユーザーインターフェイスの操作を 阻害してしまう為 メインのスレッドでは行いたくないものです このサンプルではバックグラウンドスレッドで 動作するワーカーを使う事が出来ます メインのユーザーインターフェイスの レスポンスを保ったままバックグラウンドで 複数の作業を行う事が出来るのです 実際に試してみましょう この "ワーカーを開始" ボタンを クリックすると バックグラウンドスレッドにメッセージを ポストするWeb Workerが 作成されます クリックしてみましょう そしてそのバックグラウンドスレッドでは 5秒を費やした後 投稿されたメッセージを元にレスポンスも メインページにポストしました メインページから作成する事が出来る Web Workerの数に制限はありません 例えば呼び出しに10秒かかる ウェブサービスを5回呼び出したい場合 それらを同時に行う事が出来ます 5つのWeb Workerを作成すると それらの全ては バックグラウンドスレッドによって 同じタイミングで実行されます 実際に開始ボタンを複数回クリックして 試してみましょう 1回 2回 3回とクリックしました 現在3つのワーカーが作成され それぞれが同時に実行されています そして5秒後に それぞれのレスポンスが戻って来ました スレッド番号2番を見ると 15時48分13秒に開始し それが5秒後の 15時48分18秒に終了しています 同じ様にスレッド番号3番は 15時48分14秒に開始し 5秒後の 15時48分19秒に終了しています ここでも間は5秒間です この様に同時に実行する バックグラウンドスレッドの数に 制限はありません 又バックグラウンドスレッドが 実行されている間 メインのユーザーインターフェイスは 問題なく使う事が出来ます Web Workerを キャンセルする事も出来ます 例えばワーカーを起動した時 5秒が経過する前に "最後に開始したワーカーをキャンセル"ボタン をクリックすると そのワーカーをキャンセルし 動作を終了させます 試してみましょう "ワーカーを開始" ボタンをクリックし 5秒が経過する前にキャンセル この様にキャンセルを実行出来ました 実際にWeb Workerがどの様に 実装されているのかを見てみましょう このサンプルはウェブサーバーを通して 実行する必要がある為ここでは ローカルホストを通して実行されています 既にサンプルの "SimpleEcho.html"を エディターで開いています エディターに切り替えました サンプルファイルの中には "Java Script" ファイルも含まれています この"Java Script"は バックグラウンドの作業を実行するファイルです これがWeb Workerの実態とも言えます バックグラウンドスレッドでの作業を 実行するには この"Java Script" ファイルに その仕事を作成しその後メインページから それを実行する必要があるのです このレッスンではワーカーの実行や キャンセルの具体的な実装については 説明せず概要のみを解説していきます HTMLがブラウザー上でどの様に 見えるかをお見せする為 コードの一番下までスクロールします HTMLを見ると2つのボタンがあります 一つはワーカーを開始するボタン そしてもう一つはワーカーを キャンセルするボタンです テキストエリアはWeb Workerから 戻って来た全てのメッセージを 表示する為のものです メインのウェブページは読み込まれた時 "onLoad"関数が実行されます "onLoad"関数ではボタンに イベントリスナーを設定し メッセージの表示エリアを取得しています さてコードの先頭に戻ると 幾つかのグローバル変数を宣言しています 重要なのは17行目です 同時に実行されている複数の Web Workerを保持しておく為 ここで配列を作成しています "ワーカーを開始" ボタンを クリックする度に 新しいワーカーオブジェクトは この配列に保持されます そして21行目にある "startWorker" 関数が 実際にワーカーを開始する時に 呼び出される関数です 詳細を見てみましょう はじめにブラウザーがWeb Workerを サポートしているかどうかをテストします サポートしている場合 "Java Script" に "Worker"オブジェクトが 存在しています この"Worker" オブジェクトが 定義されていない場合つまり "undefined" の場合 それはブラウザーが"Web Worker"を サポートしていない事を意味します その場合マルチスレッドを実行する事は 出来ませんので何らかの代替手段を 用意する必要があります "Web Worker"をサポートしている場合 こちらのコードが実行される事になります まず新しい "Worker" オブジェクトを作成し バックグラウンドで実行するコードを含む "Java Script" ファイルの名前を指定します このサンプルには単なる "Java Script" ファイル名を入れています 実際にはドメイン名 "http://" 等が付いていても構いません その為"HTML"と"Java Script" は 必ずしも同じフォルダー内に 入っている必要はありません 実際にワーカーを動作させるには ワーカーで行う作業の実装 イベントリスナーの設定 或いはメッセージを ポストする仕組みの実装等が 必要になります このレッスンでは バックグラウンドでの作業が可能になる "Web Worker"の概要について 紹介しました
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。