初心者のための WebAssembly – パート 1: WASM の概要

Web アプリをネイティブのようなパフォーマンスで実行することを考えたことはありますか?そうする場合は、WebAssembly (WASM とも呼ばれる) という興味深いオプションがあります。

現在の Web テクノロジーは、機能豊富なアプローチに重点を置いています。 JavaScript を例に考えてみましょう。 JavaScript を使用すると、DOM を操作したり、美しいグラフを描画したり、ブラウザ上でゲームを実行したりすることもできます。ただし、ブラウザーでの JavaScript コードの実行は、パフォーマンス重視のタスクの実行には比較的時間がかかります。

この記事では、WebAssembly について詳しく見ていきます。始めましょう。

WebAssemblyとは何ですか?

WebAssembly は 、最新の Web ブラウザ上で動作する新しい低レベル言語です。ネイティブに近いパフォーマンスで実行できるコンパクトなバイナリ形式を提供します。

WebAssembly の設計選択は、ハードウェアと直接通信できるため、ネイティブ パフォーマンスを提供する Rust、C++、C などのプログラミング言語のパフォーマンスと一致します。

WebAssembly は、C、C++、および Rust で記述されたソース コードを低レベル言語に変換し、これらのプログラミング言語の効果的なコンパイル ターゲットとして機能します。これにより、Web アプリが Web 上でネイティブに近い速度で実行できるようになる道が開かれます。

全体像を理解するには、JavaScript から始める必要があります。

JavaScript は Web の言語です。これは、最新のすべての Web アプリケーションに遍在的に存在します。ただし、JavaScript は動的に型付けされる言語であるため、処理が遅くなります。実行時に型チェックが行われ、コードは V8 インタープリターによって動的にマシンコードに変換されます。その後のみ、マシンコードが実行されます。

V8 に WebAssembly が組み込まれたことで、Web 上で高パフォーマンスのアプリを開発および実行できるようになります。これにより、開発者はコードベースの特定の部分を C、C++、または Rust で作成できるようになります。

ただし、すべてのアプリ コードを WebAssembly で記述する必要があるという意味ではありません。必要なのは、JavaScript 経由で WebAssembly API と関数を呼び出す Web アプリを作成することだけです。 JavaScript フレームワークは WebAssembly を利用して、すぐに使える優れた機能を提供しながら開発者のパフォーマンスを向上させることができます。

WebAssembly の使用例としては、ブラウザ上で強力なビデオ処理ツールである FFmpeg を実行することが挙げられます。以前は、WebAssembly に対してコンパイラ ツールチェーンである Emscripten を 使用して FFmpeg を実行できませんでした。

ただし、最近では、ffmpeg.wasm を使用してブラウザで FFmpeg を実行することが完全に可能になりました。この JavaScript/WebAssembly ポートを使用すると、ブラウザ内でビデオを直接スライス、ダイス、隠蔽することができます。

WebAssembly の機能

WebAssembly の機能はシンプルで簡単です。高速でポータブル、そして効率的です。デフォルトでは、WebAssembly は基盤となるハードウェアを利用してネイティブのような実行速度を提供します。また、JavaScript がブラウザ上で実行されるのと同じように、サンドボックス環境で実行されることを考慮すると、安全性も高くなります。

WebAssembly は低レベルのアセンブリ言語ですが、人間が読めるテキスト形式でデバッグ可能なインターフェイスを提供します。したがって、WASM コードをデバッグしたい場合は、テキスト エディターでコードを開いて、他のプログラミング言語と同様にデバッグできます。

最後に、ブラウザーは、コンパイルを開始するために WebAssembly コード全体がダウンロードされるのを待ちません。たとえば、ブラウザは WASM コードを受信するとすぐにコンパイルを開始します。したがって、500 KB の WebAssembly ペイロードの場合、ブラウザは受信した最初のバイトからコンパイルを開始します。

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

WebAssembly は Web エコシステム内で適切に機能します。したがって、WebAssembly を使用することを選択した場合は、何も置き換える必要はありません。 WebAssembly は JavaScript と連携して、パフォーマンス ベースの Web アプリを作成できるようにします。

Web アプリで作業する場合、JavaScript コード内で WASM 関数を呼び出すことができます。実際のシナリオでは、WebAssembly は CPU を大量に使用するタスクにのみ使用する必要があります。

さらに、WebAssembly は、Document Object Model (DOM) オブジェクトにアクセスしたり、操作したりすることはできません。だからこそ、Web アプリの開発には JavaScript が依然として必要なのです。

WebAssembly の制限事項

WebAssembly にはいくつかの制限があります。これらの制限には次のものが含まれます。

• WASM は DOM と対話できないため、UI やフロントエンドの操作を行うことができません。これを解決するには、JavaScript を使用する必要があります。
• WASM はメモリ管理ツールを提供しません。これは、ガベージ コレクターが提供されていないことを意味します。
• WebAssembly には、特に Web ブラウザーに関して、いくつかのセキュリティ上の懸念があります。現在、WASM コードを検証するツールはありません。したがって、誰かが悪意のあるコードを挿入した場合、それをチェックする方法はありません。
• WASM はプログラマー向けに人間が判読できるテキスト形式を提供しますが、それでも分析とデバッグが難しい場合があります。

WASM ロードマップとコミュニティ サポート

WebAssembly は新しく、まだ成長中です。現在、Edge、Chrome、Firefox、WebKit を含む 4 つの主要なブラウザがサポートしています。したがって、Web 用に作成している場合、すべてのブラウザが WASM をサポートしているわけではないため、これは 「まだ」 理想的な選択ではありません。

WASM は Web 標準に従います。 W3C WebAssembly Working Group および Community Group は、 WASM をより主流にするために主要なブラウザ ベンダーと協力しています。

詳細については、 Roadm a p ページをご覧ください。

最後の言葉

WebAssembly は、開発者に高パフォーマンスの Web アプリを作成するために必要なツールを提供します。より高速な出力を実現するための特殊なコード実行を提供します。しかし、それはまだ幼児期にあります。 WASM がコミュニティ全体のサポートを得るにはまだ時間が必要です。現時点では、WASM をサポートしている主要なブラウザは 4 つだけです。

次に、Web アセンブリ パート 2: 目標、重要な概念、使用例を見てください。