初心者のための WebAssembly – パート 2: 目標、主要な概念、および使用例

公開: 2022-12-07

WASM の主要な概念と使用例について疑問に思ったことはありますか? そうでない場合は、私たちがカバーします。

WebAssembly (WASM) は、Web 上でネイティブのようなパフォーマンスのブロックを解除できる新しい低レベル言語です。

初心者のための WebAssembly – パート 1 では、WASM の定義と制限をカバーすることで、初心者の観点から WASM を紹介しました。 さらに、WebAssembly の機能、WASM ロードマップ、および JavaScript が WebAssembly とどのように連携するかについて説明しました。

この投稿では、WASM の目標、主要な概念、および使用例について説明することで、WebAssembly について説明します。 また、そのエキサイティングなプロジェクトのいくつかを見ていきます。

始めましょう。

WebAssembly の目標

WebAssembly の主要な概念を理解するには、まずその目標を確認する必要があります。 これらの目標には以下が含まれます。

  • ロード時間とサイズ効率の高いバイナリ形式をコンパイル ターゲットとして使用することで、利用可能なハードウェアを活用する機能。 簡単に言えば、WASM はバイナリ形式の抽象構文ツリー (AST) を使用し、ネイティブ速度でのコンパイルと実行をサポートします。 このアプローチを使用することで、WASM は IoT、Web、モバイルなど、さまざまなデバイスで実行できます。
  • WASM の目標は、既存の Web プラットフォームを変更または変更することではありません。 このアプローチにより、WebAssembly は現在および過去の Web とうまく統合できます。 また、WebAssembly は、JavaScript と一緒に実行したり、JavaScript から同期呼び出しを行ったりするなど、JavaScript とシームレスに連携できます。
  • アクセス許可セキュリティ ポリシーと同一オリジンをシームレスに操作するため。
  • 開発者がブラウザ以外の埋め込みをサポートするソリューションを設計できるようにします。
  • 最後に、人間が編集可能なテキスト形式を提供することで、開発者が WebAssembly ソース コードを効率的に操作するためのツールを提供します。
Webassembly-目標-1

WebAssembly の主要な概念

内部では、WebAssembly は次の手順に従います。

  • 最初に、型が定義された静的型付け言語でコードを記述する必要があります。
  • 完了したら、コンパイル済みの WASM モジュールを生成し、コードをエンジン コンパイラにフィードします。
  • 上記の手順により、WASM が解析をスキップし、コードを Web ブラウザーでレンダリングできるようになります。

Web ブラウザーで実行される WebAssembly の背後にある主要な概念は次のとおりです。

  • メモリ: WebAssembly のメモリは、低レベルのメモリ アクセス命令によって管理および書き込まれます。 技術的には、これはサイズ変更可能な ArrayBuffer であり、メモリ バイトの配列を含みます。
  • モジュール: WebAssembly のモジュールは、コンパイルされた実行可能なコンピューター コードです。 ステートレスな形式であるため、Web ブラウザーはモジュールをコンパイルし、Windows とワーカー間で共有します。 また、モジュールは、関数、テーブル、型、グローバル、およびメモリを格納するだけでなく、インポートとエクスポートを格納および宣言します。
  • テーブル:テーブルは、サイズ変更可能な型付き配列を使用するすべての参照と関数で構成されます。 これにより、未加工のバイトをメモリに保存する必要がなくなります。
  • インスタンス: WASM では、インスタンスは実行時のモジュールであり、すべての状態がペアになっています。 これらの状態には、テーブル、メモリ、およびその他のインポートされた値セットが含まれます。
wasm-key-concepts-1
WASM の主要な概念

Web 開発者は、JavaScript API を使用して、モジュール、テーブル、インスタンス、およびテーブルを呼び出して定義できます。 さらに、JavaScript を使用して、JavaScript 関数内で WASM エクスポートを同期的に呼び出します。 したがって、WASM を使用して Web ブラウザーで高性能アプリケーションを作成できるため、JavaScript は WebAssembly とうまく連携します。

WASM オブジェクト

WebAssembly を使用する場合、8 つの WASM オブジェクトを追跡する必要があります。 これらのオブジェクトは次のとおりです。

  • WebAssembly.Global – Global オブジェクトはグローバル変数インスタンスです。 WebAssembly.Module と JavaScript の両方からアクセスできます。
  • WebAssembly.Module – ここでは、Module オブジェクトにステートレス WASM コードが含まれています。 コードはプリコンパイルされています。
  • WebAssembly.Instance – WebAssembly.Instance は、WebAssembly.Module の実行可能なステートフル インスタンスです。
  • WebAssembly.Table – Table オブジェクトには関数参照が含まれ、JavaScript ラッパーとして機能します。
  • WebAssembly.CompileError – CompileError オブジェクトには、検証およびデコード中のすべてのエラーが含まれます。
  • WebAssembly.RuntimeError – ここで、RuntimeError オブジェクトはすべてのランタイム エラーを一覧表示します。
  • WebAssembly.LinkError – LinkError オブジェクトには、モジュールのインスタンス化中に発生したエラーが含まれています。

WASM のユースケースとプロジェクト

WebAssembly が Web ブラウザーでネイティブのようなパフォーマンスを提供することは既にわかっています。 ただし、それをどこで使用できるかを真に理解するには、その使用例を確認する必要があります。 以下に、WASM の使用例をいくつか挙げてみましょう。

WebAssembly の使用例は、ブラウザーの内外に及びます。 たとえば、ブラウザで WASM を使用する場合、次のような多くのことができます。

  • ffmpegwasm プロジェクトなどのビデオまたはオーディオ編集。
  • これらの高性能ゲームなど、Web ブラウザでのビデオ ゲーム。
  • 科学的な視覚化とシミュレーション
  • DOSBox、MAME などのプラットフォーム エミュレーション/シミュレーション
  • 暗号化
  • リモートデスクトップ
  • 開発者ツール

ユースケース

一般的な観点から、WebAssembly の説得力のある使用例には次のものがあります。

  • より高速なコードを作成する機能により、基盤となるハードウェアを活用できます。
  • さらに、クライアント側の圧縮も実行できるため、読み込み時間が短縮され、帯域幅が節約されます。 したがって、クライアントの CPU または基盤となるハードウェアを使用して圧縮と解凍を行い、次にサーバーのリソースを使用します。
  • さらに、JavaScript を使用するだけでなく、さまざまなプログラミング言語を使用して Web 用のコードを作成することもできます。 たとえば、Rust、C、および C++ を使用して、Web アプリケーションの特定の側面向けの高性能コードを作成できます。

プロジェクト

実際の例に移ると、次のプロジェクトは言及する価値があります。

  • Figmaは、WebAssembly を使用して Web アプリのパフォーマンスを向上させました。 アプリの初期化、デザイン全体のレンダリング、さらにはデザイン ファイルのダウンロード中の読み込み時間を短縮しました。 前に説明したように、WebAssembly は圧縮にも適しています。 Figma は WASM を実装してダウンロード サイズを改善し、大幅に縮小しました。
  • Pyodide :もう 1 つのエキサイティングな WASM プロジェクトは、Mozilla からリリースされた Pyodide プロジェクトです。 これにより、科学者は、NumPy、SciPy、Scikit-learn などを含む Python 科学スタックを WebAssembly にコンパイルして、ブラウザーに組み込むことができます。 Python と JavaScript 間の透過的なオブジェクト変換を提供します。 最後に、開発者は Python を使用して Web API を使用することもできます。
  • Brazor WebAssembly : Brazor WebAssembly フレームワークを使用すると、開発者は .NET を使用して、単一ページ、クライアント側、および対話型の Web アプリを構築できます。 これらのアプリは、WebAssembly ベースの .NET ランタイムを使用してブラウザーにホストできます。 ここでは、開発者として、WebAssembly の JavaScript API を利用して、.NET コードでブラウザー機能にアクセスできます。
figma-webassembly
出典：フィグマ

他の多くの有名で価値のあるプロジェクトが WebAssembly を使用しています。 Binaryen、Cheerp、Forest、Grain などです。

最終的な考え

WebAssembly は初心者向けとは言えません。 ただし、そのユースケースと主要な概念を調べることで、その機能を明確に理解できます。

エキサイティングなプロジェクトが市場に出回っているため、WebAssembly を学ぶのに最適な時期です。特に Web 開発に携わっている場合はなおさらです。 WASM はブラウザーの外部で動作する機能も備えているため、パフォーマンス指向の開発に最適です。