ホームページ >ウェブフロントエンド >jsチュートリアル >WebAssembly (WASM) の概要
WebAssembly (WASM) の概要
- Barbara Streisandオリジナル
- 2025-01-11 07:26:42933ブラウズ
WebAssembly (WASM) は、スタックベースの仮想マシン用のバイナリ命令形式であり、高性能アプリケーションのポータブル ターゲットとして設計されています。この記事では、単純な C プログラムを WebAssembly にコンパイルし、それを Web ブラウザーに読み込み、JavaScript を使用して操作する方法を説明します。また、開発コンテナ環境外で WASM を操作するための便利なツールとコマンドについても説明します。
開発環境のセットアップ
WebAssembly プロジェクトに必要なフォルダー構造とファイルを作成します。
- プロジェクトフォルダーの作成: まず、プロジェクト用の新しいディレクトリを作成します。このフォルダー内に、必要なファイルと構成を追加します。
mkdir wasm-web-example cd wasm-web-example
- 開発コンテナのセットアップ: wasm-web-example ディレクトリに、開発コンテナ構成ファイルを保存する .devcontainer フォルダを作成します。これらのファイルは、C コードを WebAssembly にコンパイルするために Emscripten がインストールされたコンテナをセットアップします。
.devcontainer フォルダー内に次のファイルを作成します:
-
devcontainer.json
このファイルは、必要な拡張機能と環境設定を備えた Docker コンテナを使用するように VSCode を構成します。
{ "name": "Emscripten DevContainer", "build": { "dockerfile": "Dockerfile" }, "customizations": { "vscode": { "settings": { "terminal.integrated.shell.linux": "/bin/bash", "C_Cpp.default.configurationProvider": "ms-vscode.cmake-tools", "C_Cpp.default.intelliSenseMode": "gcc-x64" }, "extensions": [ "ms-vscode.cpptools", "ms-vscode.cmake-tools" ] } }, "postCreateCommand": "emcc --version" } -
Dockerfile
Dockerfile は Emscripten 環境をセットアップします。そのファイルの内容は次のとおりです:
# Use the official Emscripten image FROM emscripten/emsdk:3.1.74 # Set the working directory WORKDIR /workspace # Copy the source code into the container COPY . . # Install any additional packages if necessary (optional) # Ensure to clean up cache to minimize image size RUN apt-get update && \ apt-get install -y build-essential && \ apt-get clean && \ rm -rf /var/lib/apt/lists/*
- VSCode 設定を作成する: プロジェクトのルートに、次のファイルを含む .vscode フォルダーを作成します:
-
c_cpp_properties.json
このファイルは C IntelliSense を構成し、プロジェクトのパスをインクルードします。
{ "configurations": [ { "name": "Linux", "includePath": [ "${workspaceFolder}/**", "/emsdk/upstream/emscripten/system/include" ], "defines": [], "compilerPath": "/usr/bin/gcc", "cStandard": "c17", "cppStandard": "gnu++17", "configurationProvider": "ms-vscode.cmake-tools" } ], "version": 4 } -
settings.json
このファイルには、言語の関連付けに関する特定の VSCode 設定が含まれています。
{ "files.associations": { "emscripten.h": "c" }, "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, "[typescript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, "[jsonc]": { "editor.defaultFormatter": "vscode.json-language-features" }, "[json]": { "editor.defaultFormatter": "vscode.json-language-features" }, "[html]": { "editor.defaultFormatter": "vscode.html-language-features" } }
- C、JavaScript、HTML ファイルを作成する: ここで、プロジェクト用に次のファイルを作成します:
-
test.c
この C ファイルには、WebAssembly にコンパイルされる単純な関数が含まれています。
// test.c int add(int lhs, int rhs) { return lhs + rhs; } -
test.html
この HTML ファイルは、JavaScript を使用して WebAssembly モジュールをロードします。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WebAssembly Example</title> </head> <body> <h1>WebAssembly Example</h1> <div> </li> <li> <p><strong>test.js</strong><br><br> This JavaScript file will fetch the WebAssembly module and call the exported function.<br> </p> <pre class="brush:php;toolbar:false"> // test.js const wasmFile = 'test.wasm'; fetch(wasmFile) .then(response => response.arrayBuffer()) .then(bytes => WebAssembly.instantiate(bytes)) .then(({ instance }) => { const result = instance.exports.add(5, 3); // Call the WebAssembly function document.getElementById('output').textContent = `Result from WebAssembly: ${result}`; }) .catch(error => console.error('Error loading WebAssembly module:', error));
必要なファイルと構成をすべてセットアップしたので、WebAssembly のコンパイルと操作に進むことができます。
Emscripten を使用して C コードを WebAssembly にコンパイルする
基本 C プログラム:
ファイル test.c には、2 つの整数を加算する単純な関数 add が含まれています。 Emscripten を使用して、この C 関数を WebAssembly にコンパイルします。Emscripten コマンド:
開発コンテナ内でターミナルを開き (VSCode で cmd j を使用)、次の Emscripten コマンドを実行して C コードを WebAssembly にコンパイルします。
mkdir wasm-web-example cd wasm-web-example
このコマンドは、WebAssembly バイナリである test.wasm を生成し、JavaScript で使用するために add 関数がエクスポートされるようにします。
ブラウザでの WebAssembly の読み込みと操作
HTML セットアップ:
ファイル test.html には、JavaScript を使用して WebAssembly バイナリをロードする単純な HTML ページが含まれています。JavaScript セットアップ:
JavaScript ファイル test.js は test.wasm ファイルをロードし、エクスポートされた追加関数を呼び出します:
macOS での外部ツールの使用
開発コンテナの外には、Mac 上の WebAssembly を操作するために実行できる便利なコマンドがいくつかあります。
- wabt をインストールします: wabt (WebAssembly Binary Toolkit) は、.wasm ファイルを人間が判読できる WAT (WebAssembly Text) 形式に変換するなど、WebAssembly を操作するためのユーティリティを提供します。 Homebrew 経由でインストールします。
{
"name": "Emscripten DevContainer",
"build": {
"dockerfile": "Dockerfile"
},
"customizations": {
"vscode": {
"settings": {
"terminal.integrated.shell.linux": "/bin/bash",
"C_Cpp.default.configurationProvider": "ms-vscode.cmake-tools",
"C_Cpp.default.intelliSenseMode": "gcc-x64"
},
"extensions": [
"ms-vscode.cpptools",
"ms-vscode.cmake-tools"
]
}
},
"postCreateCommand": "emcc --version"
}
- WASM を WAT に変換: wabt がインストールされたら、wasm2wat ツールを使用して WebAssembly バイナリ (test.wasm) を WAT 形式に変換できます。
# Use the official Emscripten image
FROM emscripten/emsdk:3.1.74
# Set the working directory
WORKDIR /workspace
# Copy the source code into the container
COPY . .
# Install any additional packages if necessary (optional)
# Ensure to clean up cache to minimize image size
RUN apt-get update && \
apt-get install -y build-essential && \
apt-get clean && \
rm -rf /var/lib/apt/lists/*
- HTML ページを提供します: WebAssembly モジュールと対話する HTML ページを表示するには、Python の単純な HTTP サーバーを使用できます。
{
"configurations": [
{
"name": "Linux",
"includePath": [
"${workspaceFolder}/**",
"/emsdk/upstream/emscripten/system/include"
],
"defines": [],
"compilerPath": "/usr/bin/gcc",
"cStandard": "c17",
"cppStandard": "gnu++17",
"configurationProvider": "ms-vscode.cmake-tools"
}
],
"version": 4
}
結論
これらの手順に従うことで、C コードを WebAssembly にコンパイルし、JavaScript を使用して操作し、結果のバイナリを検査用に変換するための開発環境をセットアップできます。 wabt や Python の HTTP サーバーなどの外部ツールを使用すると、macOS システムでの WebAssembly モジュールの管理と探索が簡素化されます。
以上がWebAssembly (WASM) の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。