javascript node と browser と worker での挙動を比較してみた

はじめに

今更感はありますが、まとめてみようと思いました。

グローバルスコープが保持しているオブジェクトの違い

node.js: Object
browser: window
worker : workerGrobalScope

node.jsは、シンプルにオブジェクトです。
browserは、開いているウインドウを意味するインスタンスになっています。
workerのグローバルスコープは意識することが無いと思います。

必要不可欠な記述の差

node.js: サーバーを記述するという書き方。

ライブラリの読み込み

const server = require("http").createServer()

何かが起こったら何かをするという考えでイベントハンドラーを記述する。

server.on("get", (req, res) => {
  res.writeHead(200, {'Content-Type' : 'text/html'});
  res.end("hello world");
})

サーバーなのでtcp udp のポート番号とIPアドレスの指定をして、
通信を待ち受ける。

server.listen(8080)

ここまでがnode.js上での主要な書き方です。

browser: ビルトインオブジェクトが多い

HTMLElementの扱いとイベント処理を記述することがメインです。最近では端末のデバイスにアクセスできる方向もあります。

エレメント

const myArt = document.createElement("article");
myArt.id = "today";
myArt.class = "main article";
myArt.appendChild(new Text("hello world"));
document.body.appendChild(myArt);

イベント処理

myArt.addEventListener("drop", ((e) => e.style.backgroundColor = "#880088"));

以上がbrowserでの主要な書き方です。

worker: browser側でインスタンスを作成

インスタンスからのメッセージを受け取れるように、addEventListenerを記述します。

//browserから、workerを作成。
const worker = new Worker('worker.js');
worker.addEventListener("message", (e) => alert(e.data));
worker.postMessage('Hello World!');

self.addEventListener('message', (e) => {
  console.log(e.data + "from View");
  self.postMessage(e.data + "from worker");
});

worker内では、基本的にすごく遅い計算結果やpromiseの結果を返却したりします。
serviceWorkerの場合は、利用方法が違うようです。

よくまとまっている記事がありましたので、　こちら　をどうぞ…

以上、javascriptの言語としての違いというより、実行環境の違いをまとめてみました。