---
# System prepended metadata

title: WebAssembly

---

# WebAssembly

## WebAssemblyとは

ブラウザでプログラムを高速実行するための「ブラウザ上で動くバイナリコードの新しい仕様」であり、何らかの技術を表す用語ではない

## 技術的背景
・多彩なコンテンツの表示やアニメーションなど、重い処理が求められるようになった

・インターネットが普及したことでwebサイトのアクセス数が激増し、多くのリクエストを処理しなければならなくなった

・スマホなどのPCと比べてスペックの低い端末などでの閲覧が多い

## JavaScriptを速くする試み

[JustInTimeコンパイルの採用](#JustInTimeコンパイルの採用)

[asm.jsの登場](#asm.jsの登場)

[WebAssemblyの登場](#WebAssemblyの登場)

## JustInTimeコンパイルの採用
JITコンパイルの採用により従来の7倍ほど速くなったが、JavaScriptが動的型付け言語であるが故にJITコンパイルにも[欠点](#JustInTimeコンパイルの欠点)が存在した

### JustInTimeコンパイルの欠点
1. よく使うコードしかネイティブコードにならない

   →型情報の推定に統計処理が必要
   
2.  高速に動作するようになるまでにはリードタイムが必要

3.  型の推定には失敗することがある

    →あくまでも統計上の推論であるため失敗することがある
    
## asm.jsの登場
JavaScriptをある制約に従って書くことで、型を明確にして事前コンパイル(AOTコンパイル)できるようにする技術

静的型付けにより、プログラムの実行を行うより前にネイティブコードへとコンパイルするAhead of Timeコンパイルが可能となる。これによりネイティブコードを高速にブラウザで実行可能

### asm.jsの欠点
1. asm.jsの登場により事前コンパイルができることでトータルの実行速度は速くなったが、JavaScriptのファイルサイズが増える

2. ファイルサイズの増大による通信量の増加

3. ファイルサイズの増大によるパージング(構文解析)の時間増加

4. JavaScriptのサブセットなのでJavaScriptの制約から抜け出せない

# WebAssemblyの登場
ブラウザでプログラムを高速実行するための「ブラウザ上で動くバイナリコードの新しい仕様」

### なぜWebAssemblyが必要なのか
JavaScript( 旧 LiveScript )が登場した当初はHTMLに飾りつけをする程度だった

しかしAjaxを始めとしたJS界隈の発展やHTML5の登場、UnityやWebGL (Web Graphics Library)などの登場により、その役割は大きくなり、様々な処理に活用される中で、マシンパワーの劣るモバイル端末ではその遅さが目立つようになった

※HTML5は2021年に終了し、`HTML Living Standard`へ変更

### なぜWebAssemblyは速いのか

[CPUの活用](#CPUの活用)

[起動の高速化](#起動の高速化)

### CPUの活用
・asm.jsはJavaScriptとして処理できる形式で、モジュールとその関数本体を定義していたため、その能力はJava Scriptが表現できることに限定されていた

・一方でWebAssemblyは仮想的なハードウェアで動く低水準な命令の集まりとしてモジュールを定義されている
これによりJavaScriptの表現能力に制限されず、CPUの機能をより十全に利用すること出来る
### 起動の高速化
抽象構文木がバイナリ形式で与えられているおかげで、ネイティブコードを出力するために必要な処理の字句解析と構文解析の大半を省き、起動の高速化が可能となっている

## WebAssemblyを実現する主要言語
Rust

C/C++

Go

AssemblyScript

など

### WebAssemblyの用途

1. グラフィック

    画像ファイルの変換、レンダリングなど

2. 暗号

   膨大な計算量が必要となる暗号化・復号

3. モバイル端末などの非力なシステム

   消費電力やスペース、放熱の観点から高性能なCPUを採用しにくい計算速度の遅いモバイル端末
   
### WebAssemblyの効果
1. サーバの負荷を削減

   画像のサムネイル処理など、旧来ではサーバで行っていた処理をクライアントで行う

2. ネットワークトラフィックの削減

   大きなサイズの画像ファイルをクライアントで小さくしてからサーバに送るなど、通信する際にかかる負荷を少なくする
   
### 今回のリポジトリ
https://github.com/murata0531/rust-webasembly