javascript web worker の基本

はしがき

プログラミングをしながら、ふいと気づきました。
「javascript は single thread だ、しかし、multi thread のように動いている」
「本当に thread が必要になったら、どうすればいい？」
とか...考えが浮き出した。

それで、javascript も multi thread ができるか？がきになって、検索しました。

javascript の multi thread っぽい single thread とは？

確かに、javascript は single thread です。javascript の main thread の event loop が single thread なので、single thread です。

が、非同期もあるので、multi thread のように動かせることです。

web worker

「非同期があるので、multi thread はいらない？」かもしれませんが、web worker は実行難しいことを background で実行するためのことです。

使い方

まず、基本的な A × B の calculator を作ります。

<!-- 省略 -->
<div>hello, world</div>
<input id="number1" class="number1" type="number">
<input id="number2" type="number">
<div class="result">3</div>
<!-- 省略 -->

ここから、<input> から入力すれば、<input> のことを掛け算する function を実行して、result に入力します。

// index.js
const first = document.querySelector('#number1')
const second = document.querySelector('#number2')

const result = document.querySelector('.result')

[first, second].forEach(input => {
  input.onchange = function() {
    result.textContent = first.value * second.value
  }
})

このような感覚です。うまくできました。

---

今回は掛け算なので、すぐできますが、もし、時間が結構かかるときがあります。
それのために、web worker をつかって、background から実行できるようにしましょう。

// index.js
const first = document.querySelector('#number1')
const second = document.querySelector('#number2')

const result = document.querySelector('.result')

if (window.Worker) {
  const myWorker = new Worker('worker.js') // file name

  [first, second].forEach(input => {
    input.onchange = function() {
      myWorker.postMessage([first.value, second.value])
      console.log('Message posted to worker')
    }
  })

  myWorker.onmessage = function(e) {
    result.textContent = e.data
    console.log('Message received from worker')
  }
} else {
  console.log('Your browser doesn\'t support web workers.')
}

// worker.js
onmessage = function(e) {
    const data = e.data
    this.setTimeout(() => {
        postMessage(data[0] * data[1])
        console.log('after 5 seconds')
    }, 5000)
}

今回もうまくできました。
5秒もかかることでしたが、worker を別の thread に分かれて、実行できました。