今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
ワーカーの実装
このレッスンでは HTML5 の Web Workers を使って 実際にワーカーをどのように 実装すればよいのかについて学びます 画面はサンプルを ブラウザで開いているところです 「ワーカーを開始」 ボタンをクリックすると バックグラウンド スレッドに メッセージをポストするワーカーが 作成されます そしてそのバックグラウンド スレッドでは ５秒を費やした後 投稿されたメッセージを基にしたレスポンスが メインページに戻ってきます 実際にどのような実装になっているのかを 確認しましょう エディタでこの HTML を開いています Web Workers は ワーカーが始まって 終わるまでの間に 2 つのイベントを持っています 一つはバックグラウンド スレッドの 作業が完了して データが返ってきた時の message イベントです HTML の中に JavaScript で記述されています そしてもう一つは 何かが上手くいかなかった時の error イベントです こちらもこの行に定義されています ワーカーを作成したら 次のステップは この 2 つのイベントを処理することです ここでは message イベントを使って バックグラウンドで作業したワーカーから 返ってくるデータを処理しています そして返ってきたデータは onMessage 関数を呼び出し その関数の中で処理されます error イベントが発生すると onError 関数が実行されます このように作成した ワーカーオブジェクトに対し イベントを制御しています 続いてワーカーをキャンセルしたい時のために あらかじめ作っておいた allWorkers という配列にそのワーカーを 格納します そしてワーカーによってデータを ポストするための準備を行います ワーカーオブジェクトに対して postMessage 関数を実行します postMessage 関数は ポストしたいメッセージ 任意のデータを単一のパラメータとして 受け取ります このサンプルの場合 データは 単純な文字列で hi from worker という文字列に続いて 0 1 といった数字が続きます 「ワーカーを開始」ボタンをクリックすると 毎回 この数字がカウントアップされるため 複数のワーカーを作成すると 各ワーカーごとに異なるメッセージ…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。