WebAssembly-例

この章では、WebAssemblyに関する例について説明します。

例1

以下は、最大要素を取得するためのCプログラムの例です。

void displaylog(int n);
/* function returning the max between two numbers */ 
int max(int num1, int num2) {
   /* local variable declaration */ int result; 
   if (num1 > num2) 
      result = num1; 
   else result = num2;
      displaylog(result);
   return result; 
}

wasm fiddleでコードをコンパイルし、.wasmおよび.watコードをダウンロードします。

Wat code

ワットコードは次のとおりです-

(module 
   (type $FUNCSIG$vi (func (param i32))) 
   (import "env" "displaylog" (func $displaylog (param i32))) 
   (table 0 anyfunc) 
   (memory $0 1) 
   (export "memory" (memory $0)) 
   (export "max" (func $max)) 
   (func $max (; 1 ;) (param $0 i32) (param $1 i32) (result i32) 
      (call $displaylog       
         (tee_local $0 
            (select 
               (get_local $0) 
               (get_local $1) 
               (i32.gt_s (get_local $0) (get_local $1)) 
            )
         )
      )
      (get_local $0) 
   )
)

.wasmコードをダウンロードし、以下に示すように.htmlファイルで使用しましょう-

<!DOCTYPE html> 
<html>
   <head>
      <meta charset="UTF-8">
   </head>
   <body>
      <script>
         const importObj = {
            env: { 
               displaylog: n => alert("The max of (400, 130) is " +n) 
            } 
         };
         fetch("testmax.wasm") .then(bytes => bytes.arrayBuffer()) 
            .then(module => WebAssembly.instantiate(module, importObj)) 
            .then(finalcode => { 
            console.log(finalcode); 
            console.log(finalcode.instance.exports.max(400,130)); 
         }); 
      </script> 
   </body>
</html>

出力

出力は次のとおりです-

例2

以下は、指定された数のフィボナッチ数列を取得するためのC ++コードです。

#include <iostream>>
void displaylog(int n); 
int fibonacciSeries(int number) {
   int n1=0,n2=1,n3,i; 
   for(i=2;i<number;++i) { 
      n3=n1+n2; displaylog(n); n1=n2; n2=n3;
   }
   return 0; 
}

私はwasmexplorerを使用してコードをコンパイルしています。WatとWasmをダウンロードし、ブラウザで同じものをテストします。

下記のコードを使用できます-

<!DOCTYPE html> 
<html>
   <head> 
      <meta charset="UTF-8">
   </head>
   <body>
      <script> 
         const importObj = { 
            env: { _Z10displaylogi: n => console.log(n) } 
         };
         fetch("fib.wasm") 
            .then(bytes => bytes.arrayBuffer()) 
            .then(module => WebAssembly.instantiate(module, importObj)) 
            .then(finalcode => { 
            console.log(finalcode); 
            console.log(finalcode.instance.exports._Z15fibonacciSeriesi(10)); 
         });
      </script> 
   </body>
</html>

出力

出力は次のとおりです-

例3

以下は、特定の配列に要素を追加するためのRustコードです。

fn add_array(x: i32) -> i32 { 
   let mut sum = 0; 
   let mut numbers = [10,20,30]; for i in 0..3 { 
      sum += numbers[i]; 
   } 
   sum 
}

WebAssembly Studioを使用して、RUSTをwasmにコンパイルします。

コードをビルドしてwasmファイルをダウンロードし、ブラウザーで同じように実行します。

<!DOCTYPE html> 
<html>
   <head> 
      <meta charset="UTF-8">
   </head>
      <body>
      <script> 
         const importObj = { 
            env: {
            } 
         };
         fetch("add_array.wasm") .then(bytes => bytes.arrayBuffer())
            .then(module => WebAssembly.instantiate(module, importObj)) 
            .then(finalcode => { 
            console.log(finalcode); 
            console.log(finalcode.instance.exports.add_array());
         }); 
      </script> 
   </body> 
</html>

出力

出力は以下のようになります-