最初の WebAssembly プロジェクトを構築する

皆さん、

この投稿は、WebAssembly を探求するシリーズの一部です。 ここで他の部分をチェックしてください [シリーズの他の部分へのリンク]。

WebAssembly について聞いて、複雑すぎると思ったことはありますか? 今日は、単純な WebAssembly プロジェクトを最初から構築します。 ランダムな 16 進数のカラー コード ジェネレーターという非常に基本的なものを維持しています。 「Hello, World!」のようなものだと考えてください。 WebAssembly にカラフルなひねりを加えたものです。 JavaScript を使用して簡単な WebAssembly コードを作成、コンパイルし、使用してブラウザーでランダムな色を生成する方法を学びます。

WebAssembly のセットアップ

このシリーズでは C と C の例を使用するため、Emscripten を使用して C/C を WASM にコンパイルします。 他の言語はそれぞれのコンパイラで使用できます。

Emscripten のセットアップは簡単です。次の手順に従ってください: https://www.php.cn/link/b1fb3726a5a825732f9a25e210426c4a

macOS ユーザーは Homebrew を使用できます:

brew install emscripten

Linux ユーザーは次の手順に従ってください: https://www.php.cn/link/cdcc686a434d09ed24e4b736d593858f

インストール後、次のように確認します:

emcc -v

簡単な追加の例

カラー ジェネレーターを構築する前に、WASM ワークフローを理解するために簡単な加算アプリケーションを作成しましょう。まず JavaScript でビルドしてから、WASM に変換します。 index.html:

を作成します

<!-- index.html -->
<input type="number" id="num1"> + <input type="number" id="num2"> = <p id="result"></p>
<button onclick="addNumbers()">Add</button>
<script src="add.js"></script>

次に、add.c:

を作成します。

// add.c
int addTwoNumbers(int num1, int num2) {
    return num1 + num2;
}

C コードを WASM にコンパイルします。

emcc add.c -o add.js -s EXPORTED_FUNCTIONS="['_addTwoNumbers']" -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall', 'cwrap']"

このコマンド:

• add.c を JavaScript (add.js) にコンパイルします。
• JavaScript で使用するために addTwoNumbers 関数をエクスポートします (アンダースコアはコマンドの一部です)。
• JavaScript の対話に必要なランタイム関数 (ccall、cwrap) をエクスポートします。

これにより、add.wasm (WASM バイナリ) と add.js (グルー コード) が作成されます。 index.html を変更して WASM 機能を含めます:

<!-- index.html (modified) -->
<input type="number" id="num1"> + <input type="number" id="num2"> = <p id="result"></p>
<button onclick="addNumbers()">Add</button>
<script>
  const Module = {
    onRuntimeInitialized: () => {
      const addTwoNumbers = Module.cwrap('addTwoNumbers', 'number', ['number', 'number']);
      function addNumbers() {
        const num1 = parseInt(document.getElementById('num1').value);
        const num2 = parseInt(document.getElementById('num2').value);
        document.getElementById('result').innerText = addTwoNumbers(num1, num2);
      }
    }
  };
</script>
<script src="add.js"></script>

ローカルサーバー (例: python -m http.server、python3 -m http.server、または live-server) を使用してこれを実行します。 2 つの数字を入力し、[追加] をクリックして結果を確認します。

JavaScript は DOM 操作を処理し、WASM (C コード) は追加を実行します。 完全なコードはここ [コードへのリンク] から入手できます。

16 進数を理解する

16 進数 (基数 16) は 16 個のシンボル (0 ～ 9、A ～ F、A=10 など) を使用します。 6 桁の 16 進コードは色を表します (例: #FF5733、#42A5F5)。 16 進数の色の詳細については、こちら [説明へのリンク] をご覧ください。

ランダムカラージェネレーター

random_color.cを作成:

// random_color.c
#include <stdlib.h>
#include <time.h>

char* intToHex(int num) {
    static char hexStr[3];
    const char hexDigits[] = "0123456789ABCDEF";
    hexStr[0] = hexDigits[(num >> 4) & 0xF];
    hexStr[1] = hexDigits[num & 0xF];
    hexStr[2] = '<pre class="brush:php;toolbar:false"><code class="bash">emcc random_color.c -o random_color.js -s EXPORTED_FUNCTIONS="['_generateRandomHexColor']" -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall', 'cwrap', 'UTF8ToString']"

'; return hexStr; } char* generateRandomHexColor() { static char color[8]; srand(time(NULL)); color[0] = '#'; char* r = intToHex(rand() % 256); color[1] = r[0]; color[2] = r[1]; char* g = intToHex(rand() % 256); color[3] = g[0]; color[4] = g[1]; char* b = intToHex(rand() % 256); color[5] = b[0]; color[6] = b[1]; color[7] = '<🎝🎝🎝>'; return color; }

コンパイル:

brew install emscripten

この関数を使用するには、HTML を作成 (または変更) します: [WASM 関数を呼び出し、背景色を更新する HTML コード]。

ボタンをクリックすると、ページの背景色が変わります。

完全なコード: [コードへのリンク]

結論

シンプルな WebAssembly アプリケーションを構築しました。これは、WebAssembly が高性能コードを Web にもたらす能力を示しています。 今後の投稿では、より高度なアプリケーションを検討していきます。乞うご期待!

以上が最初の WebAssembly プロジェクトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。