ホーム テクノロジー 開発 初心者のための WebAssembly – パート 2: 目標、重要な概念、使用例

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


WASM の主要な概念と使用例について疑問に思ったことはありますか?そうでない場合でも、対応させていただきます。

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

「初心者のための WebAssembly – パート 1」では、WASM の定義と制限事項を取り上げ、初心者の観点から WASM を紹介しました。さらに、WebAssembly の機能、WASM ロードマップ、JavaScript が WebAssembly に対してではなく WebAssembly とどのように連携するかについても検討しました。

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

始めましょう。

WebAssembly の目標

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

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

WebAssembly の主要な概念

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

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

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

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

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
figma-webassembly

他にも多くの有名で価値のあるプロジェクトが WebAssembly を使用しています。これらは、 BinaryenCheerpForestGrainなどです。

最終的な考え

WebAssembly は、まったく初心者に優しいわけではありません。ただし、そのユースケースと主要な概念を学ぶことで、その機能を明確に理解できます。

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

「初心者のための WebAssembly – パート 2: 目標、重要な概念、使用例」についてわかりやすく解説!絶対に観るべきベスト2動画

【初級】#98 WebAssemblyの概要解説(三菱UFJインフォメーションテクノロジー)
WebAssemblyについて