WebAssembly (WASM) の概要

WebAssembly (WASM) は、スタックベースの仮想マシン用のバイナリ命令形式であり、高性能アプリケーションのポータブル ターゲットとして設計されています。この記事では、単純な C プログラムを WebAssembly にコンパイルし、それを Web ブラウザーに読み込み、JavaScript を使用して操作する方法を説明します。また、開発コンテナ環境外で WASM を操作するための便利なツールとコマンドについても説明します。

開発環境のセットアップ

WebAssembly プロジェクトに必要なフォルダー構造とファイルを作成します。

1. プロジェクトフォルダーの作成: まず、プロジェクト用の新しいディレクトリを作成します。このフォルダー内に、必要なファイルと構成を追加します。

   mkdir wasm-web-example
   cd wasm-web-example

1. 開発コンテナのセットアップ: 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/*
  

1. 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"
     }
   }
  

1. C、JavaScript、HTML ファイルを作成する: ここで、プロジェクト用に次のファイルを作成します:

• test.c
  
  この C ファイルには、WebAssembly にコンパイルされる単純な関数が含まれています。
  

   // test.c
   int add(int lhs, int rhs) {
       return lhs + rhs;
   }
  

• test.html
  
  この HTML ファイルは、JavaScript を使用して WebAssembly モジュールをロードします。
  

   
   
     
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>WebAssembly Example</title>
     
     
       <h1 id="WebAssembly-Example">WebAssembly Example</h1>
       <div>
  
  
  <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 にコンパイルする

1. 基本 C プログラム:
   
   ファイル test.c には、2 つの整数を加算する単純な関数 add が含まれています。 Emscripten を使用して、この C 関数を WebAssembly にコンパイルします。

2. Emscripten コマンド:
   
   開発コンテナ内でターミナルを開き (VSCode で cmd j を使用)、次の Emscripten コマンドを実行して C コードを WebAssembly にコンパイルします。
   

   mkdir wasm-web-example
   cd wasm-web-example

このコマンドは、WebAssembly バイナリである test.wasm を生成し、JavaScript で使用するために add 関数がエクスポートされるようにします。

ブラウザでの WebAssembly の読み込みと操作

1. HTML セットアップ:
   
   ファイル test.html には、JavaScript を使用して WebAssembly バイナリをロードする単純な HTML ページが含まれています。

2. JavaScript セットアップ:
   
   JavaScript ファイル test.js は test.wasm ファイルをロードし、エクスポートされた追加関数を呼び出します:

macOS での外部ツールの使用

開発コンテナの外には、Mac 上の WebAssembly を操作するために実行できる便利なコマンドがいくつかあります。

1. 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"
 }

1. 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/*

1. 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 モジュールの管理と探索が簡素化されます。