JavaScript技術は10年前とは比較にならないほど膨大で緻密になっています。それらはアンテナを張っていなければ見落としてしまいます。今回はそんな技術の一端を紹介します。
紹介する技術たち
- Web Worker + Service Worker
- SharedArrayBuffer + Atomics API
- manifest.json
- WebRTC
- WebSocket
- SIMD.js
- WebAssembly(wasm), asm.js
それぞれについて簡単に解説をしています。さらに深く知りたい方はおすすめ記事を参照ください。
1. Web Worker + Service Worker
Web Workerとは、メインスレッドと別のスレッドでJavaScriptを実行するための仕組みです。Service WorkerはWeb Workerの一種です。他に、Shared WorkerやAudio Workerなどがあります。off-the-main-threadという概念におけるキーワードです。
Service Workerは複数のウェブアプリケーション間やブラウザ、ネットワークとの間に立ち、プロキシサーバーとして動作します。、プッシュ通知やバックグラウンド同期が可能になります。
おすすめ記事:
Service Workerの基本とそれを使ってできること - Qiita
Service Workerを使ってオフライン閲覧、プッシュ通知、バックグラウンド同期をするコードが紹介されています。
off-the-main-thread の時代 - mizchi's blog
off-the-main-threadについて書かれています。
参考:
Web Workers API - Web API | MDN
2. SharedArrayBuffer + Atomics API
Web Worker間でメモリーを共用利用するための技術です。SharedArrayBufferが共用メモリー、Atomics APIが操作をする際に競合が起きないようにするAPIとなります。
おすすめ記事:
SharedArrayBufferとAtomics APIを用いてWorker間でデータを共有する
3. manifest.json
オフラインでもページを閲覧できるようになったり、Twitterカードの設定やAndroidのテーマカラーの設定が行えます。他にも画面向き固定やスプラッシュ画面の設定もできます。かなり色々なことを行えるので、調べてみてください。
おすすめ記事:
ウェブアプリ マニフェスト | Web | Google Developers
ウェブマニフェストでできることについて
4. WebRTC
Web Real-Time Communicationの略で、ブラウザ間リアルタイム通信のことです。異なる端末のブラウザ同士で通信が行えます。ビデオチャットやファイル共有などを行えます。
おすすめ記事:
WebRTCの基本とP2P通信が成立するまでを学ぶ - Qiita
5. WebSocket
双方向通信のための仕組みです。WebRTCにおいても利用されています。
HTTPのように、クライアントーサーバー間での通信を担当します。HTTPと異なり、レスポンスを返すたびにコネクションを再確立する必要がありません。そのため、リアルタイムに通信を行う際のオーバーヘッドがHTTPより小さいです。
おすすめ記事:
リアルタイムなwebアプリを実現する方法(ポーリング、Comet、Server Sent Events、WebSocket) - Qiita
リアルタイム通信を行う仕組み4つを比較しています。
6. SIMD.js
SIMD(single instruction multiple data: 一命令で複数データを扱う命令)を用いて並列計算するための仕組みです。ベクトル同士の足し算を思い浮かべると分かりやすいです。ベクトルは各成分ごとに独立して加算を行うので、成分ごとに同時に計算できます。コレが基本的なアイデアです。
ただ、すでにSIMD.jsはproposalから削除されています。現在はWebAssemblyのSIMD型という形で実装される流れになってるようです。
GitHub - tc39/ecmascript_simd: SIMD numeric type for EcmaScript
おすすめ記事:
SIMD.jsについて体系的にまとまっています。
7. WebAssembly(wasm), asm.js
まず、asm.jsについて説明します。asm.jsはJavaScriptを高速化しようとして生まれたJSサブセットです。事前に型を明確にして数値計算を高速化します。しかし、ファイルサイズ増大などの問題点がありました。
そこで、WebAssemblyが登場しました。その名の通り、アセンブリにコンパイルすることでファイルサイズを小さくすることができます。また、複数の言語(C、C++、Rust、Goなど)からコンパイルすることができます。
