WebAssembly の概要

WebAssembly (WASM) – 詳しい説明: パート 1

この投稿は、WebAssembly を探求するシリーズの始まりです。 以下のシリーズの他の部分へのリンクを見つけてください。

WebAssembly (WASM) は、Web ブラウザー内でさまざまなプログラミング言語を使用して構築されたアプリケーションを実行するように設計された、アセンブリに似た低レベル言語です。 そのクロスプラットフォームの性質と低レベルの設計により、ネイティブに近い速度が実現し、これまで JavaScript だけでは不可能だった Web 機能が解放されます。 計算負荷の高いタスクを処理できる、より高速な Web アプリを望んでいたなら、WASM がその解決策です。この概要では、WASM のコア機能、その起源、およびその使用を開始する方法について説明します。

WebAssembly とは何ですか?

WebAssembly は、Web ブラウザー向けに特別に設計された低レベルのコンパイル ターゲットです。 これは直接実行するための言語ではありません。代わりに、他の言語がににコンパイルするアセンブリのような構造を定義します。この「コンパイルターゲット」の側面が重要です。

次の C コード例を考えてみましょう:

<code class="language-c">int a = 1;
int b = 2;
int c = a + b;</code>

C コンパイラはこれをアセンブリ命令 (またはマシンコード) に変換します。

<code class="language-assembly">mov eax, 1    ; Load 1 into register EAX
mov ebx, 2    ; Load 2 into register EBX
add eax, ebx  ; Add EAX and EBX, result in EAX</code>

これにより、バイナリ表現が生成されます。

<code>00000000000000000000000000000011</code>

(注: 正確なバイナリ出力は CPU アーキテクチャによって異なります。これは簡略化された図です。)

C コードはアセンブリに変換され、その後バイナリに変換され、コンピューターで直接実行可能になります。 WebAssembly はこのプロセスを変更します。 標準アセンブリの代わりに、コンパイラは以下を生成する場合があります:

<code>$a int
$b int
$c int

set $a 1
set $b 2
set $c = add $a $b</code>

(これは説明のみを目的とした仮想の構文であり、実際の WASM 構文ではありません。)

すべてのブラウザがこの構文を理解できれば、Web 開発に革命が起こるでしょう。 C、Rust、Go などの言語のコンパイラーはこの出力を生成し、オペレーティング システムやブラウザーに関係なく、任意の言語で書かれたプログラムをブラウザーで実行できるようにします。

W3C で定義された WebAssembly 仕様により、ブラウザによる WASM の一貫した処理が保証されます。 主要なブラウザはすでに WebAssembly をネイティブにサポートしています。

WebAssembly 表現

WebAssembly には 2 つの主要な形式があります:

• WAT (WebAssembly Text): デバッグとコード理解のためのテキスト形式。
• WASM (WebAssembly Module): ブラウザ実行用のバイナリ形式。

これらの形式は互換性があります。 WAT は WASM に変換でき、その逆も可能です。 どちらへのコンパイルも可能です。

基本的な WebAssembly 構文 (WAT)

WAT を使用した例をもう一度見てみましょう:

1. 3 つの 32 ビット整数変数を宣言します:

<code class="language-c">int a = 1;
int b = 2;
int c = a + b;</code>

2. 値の割り当て:

<code class="language-assembly">mov eax, 1    ; Load 1 into register EAX
mov ebx, 2    ; Load 2 into register EBX
add eax, ebx  ; Add EAX and EBX, result in EAX</code>

3. 結果を追加して保存します:

<code>00000000000000000000000000000011</code>

WebAssembly はスタック マシンを利用します。 get_local は値をスタックにプッシュし、i32.add は上位 2 つのスタック要素を追加し、set_local は結果を保存します。 WASM バイナリに相当するものは次のとおりです:

<code>$a int
$b int
$c int

set $a 1
set $b 2
set $c = add $a $b</code>

これは複雑に思えるかもしれませんが、WASM はコンパイルのターゲットであり、主要なプログラミング言語ではないことに注意してください。 通常は、高水準言語でコードを作成し、WASM にコンパイルします。

WebAssembly は JavaScript を置き換えますか?

いいえ。 WASM は、JavaScript を置き換えるのではなく、JavaScript を補完するように設計されています。 JavaScript は DOM 操作と基本的な Web 操作に優れていますが、WASM は計算負荷の高いタスクをネイティブに近いパフォーマンスで処理します。 この相乗効果により、効率的なタスクの分散が可能になります。

WebAssembly の使用例

WASM のパフォーマンスは次の用途に最適です。

1. 画像とビデオの処理
2. ゲーム (3D を含む)
3. 音楽アプリケーション
4. 暗号
5. 視覚化ツール
6. シミュレーターとエミュレーター

既存の WASM アプリケーションの例には、Figma、Amazon Prime Video、Google Earth などがあります。

ブラウザを超えた WebAssembly

当初はブラウザーに焦点を当てていましたが、WASM の機能は WASI (WebAssembly System Interface) を通じて Web を超えて拡張されています。 WASI は標準 API を提供し、単一のバイナリからクロスプラットフォーム アプリケーションを作成できるようにし、プラットフォーム固有のビルドの必要性を排除します。

WebAssembly 前

以前のいくつかのプロジェクトでは、ブラウザーで他の言語を実行しようとしましたが、標準化の欠如、セキュリティの脆弱性、またはパフォーマンスの問題 (ActiveX、Java アプレット、Flash、NaCl、asm.js、Dart) による制限に直面することがよくありました。 WebAssembly は、標準化、移植性、セキュリティ、パフォーマンス、拡張性を通じてこれらの欠点に対処します。

結論

この概要では、WebAssembly の高レベルの概要を説明します。以降の投稿では、特定のトピックをさらに深く掘り下げ、実践的な WebAssembly プロジェクトを探求します。

以上がWebAssembly の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。