WasmerでJavaScriptやブラウザからCプログラムをコンパイル可能に ローカルで試せるデモも公開：WasmerのWebAssemblyランタイムとJavaScript SDKの最新リリースで

Wasmerは、同社のWebAssemblyランタイム「Wasmer」とJavaScript SDKの最新リリースにより、JavaScriptとブラウザでC/C++コンパイラ「clang」が実行可能になったと発表した。

[＠IT]

印刷

髫穂ｹ晢ｽ�Post

Shareシェア

はてなブックマーク

SharePocket Button

　Wasmerは2024年10月8日（米国時間）、同社のWebAssembly（Wasm）ランタイムの最新版「Wasmer v4.4.0」とWasmer JavaScript SDKの最新版「Wasmer JS SDK v0.8.0」を発表した。このリリースにより、JavaScriptとブラウザで、C/C++コンパイラ「clang」を実行し、Cプログラムをコンパイルできるようになる。Wasmerによると、「Google Chrome」「Safari」「Firefox」の各ブラウザで問題なく動作するという。

　Wasmerは「WebAssemblyであらゆるソフトウェアを実行できるようにする取り組みの大きなマイルストーンに到達した」と述べている。

　Wasmerは、ユーザーがwasmer.sh（Wasmerシェル）ページにアクセスして以下のコマンドを実行し、ライブデモを試せるようにしている（約100MBのclangパッケージがダウンロードされる）。

wasmer run clang/clang example.c -o example.wasm
wasmer run example.wasm

ブラウザでclangを動かすメリット、具体的なユースケース

　Wasmerは、clangを実行することで可能になるユースケースの例として、以下を挙げている。

• Wasmer CLI（コマンドラインインタフェース）を使用するだけで、CコードをWebAssemblyに簡単にコンパイルできる。ツールチェーンや複雑なインストールは不要で、Wasmerをインストールするだけで準備が完了する
• 「WASIX」がセルフホストされるようになり、WASIX自身と任意のCプログラムをコンパイルできる。WASIXは、WebAssemblyでネットワークやファイル、メモリなどのシステムリソースを抽象化するAPI仕様である「WASI」を拡張し、POSIX（Portable Operating System Interface）に対応させたものだ
• JavaScriptから直接Cプロジェクトをコンパイルできる（Wasmer JS SDKでclangを使用する方法については後述）
• ビルドがどこでも再現可能になる（同じバージョンのWasmerを使用して）

ローカルで試すには

　Wasmerは、clangをローカルで試す方法を次のように紹介している。なお、コマンドを実行するには、Wasmerをローカルにインストールしておく必要がある。

1. 以下の内容のdonut.cファイルを作成する

#include <stdio.h>
#include <string.h>
k;double sin(),
cos();main(){float A=
0,B=0,i,j,z[1760];char b[
1760];printf(「\x1b[2J」);for(;;
memset(b,32,1760);memset(z,0,7040)
;for(j=0;6.28>j;j+=0.07)for(i=0;6.28
>i;i+=0.02){float c=sin(i),d=cos(j),e=
sin(A),f=sin(j),g=cos(A),h=d+2,D=1/(c*
h*e+f*g+5),l=cos (i),m=cos(B),n=s
in(B),t=c*h*g-f*e;int x=40+30*D*
(l*h*m-t*n),y= 12+15*D*(l*h*n
+t*m),o=x+80*y, N=8*((f*e-c*d*g)
*m-c*d*e-f*g-l *d*n);if(22>y&&
y>0&&x>0&&80>x&&D>z[o]){z[o]=D;;;b[o]=
「.,-~:;=!*#$@」[N>0?N:0];}}/*#****!!-*/
printf(「\x1b[H」);for(k=0;1761>k;k++)
putchar(k%80?b[k]:10);A+=0.04;B+=
0.02;}}/*****####*******!!=;:~
~::==!!!**********!!!==::-.,
~~;;;========;;;:~-...,
--------,*/

2. Wasmerでclangを実行し、このファイルをWASIとWASIXにコンパイルする

$ wasmer run clang/clang --dir=. ・-Wno-implicit-int donut.c -o donut.wasm
$ wasmer run donut.wasm

　ブラウザ上でclangを実行するには、wasmer.shで以下を試すことができる（試しやすいように、donut.cは/homeディレクトリに追加されている）。

wasmer run clang/clang -Wno-implicit-int donut.c -o donut.wasm
wasmer run /home/donut.wasm

　Wasmerは、「clangパッケージはdonut.cの例だけでなく、WASIXの複雑な例もコンパイルできる。さらに重要なのは、ブラウザで完全に動作することだ」と述べている。

ブラウザでWasmにコンパイルされたdonut（提供：wasmer）

　Wasmerによると、clang/clangパッケージは現在、圧縮されていない状態で約100MBの容量がある（clangバイナリとシステムライブラリが必要なため）。Wasmerは、ローカルシェル、ブラウザ、またはJavaScriptプロジェクトでWasmerを用いてclangを使用するために、30MB程度をダウンロードすれば済むようにすることを目指している。

JavaScript SDKの使用

　新しいWasmer JS SDK v0.8.0により、JavaScriptプロジェクトでclangを実行することも可能になった。ブラウザでもNode.js/Bunなどでも、簡単にclangを使用できる。Wasmer JS SDKは、Wasmerパッケージを簡単に実行するためのJavaScriptライブラリだ。

　Wasmerは、「Hello World」を表示する以下のサンプルコードを紹介している。

import {
  init,
  Wasmer,
  Directory
} from "https://unpkg.com/@wasmer/sdk@latest/dist/index.mjs";
await init();
const clang = await Wasmer.fromRegistry("clang/clang");
const project = new Directory();
await project.writeFile("example.c",
`#include<stdio.h>
int main() {
  printf("Hello World");
  return 0;
}
`);
let instance = await clang.entrypoint.run({
  args: ["/project/example.c", "-o", "/project/example.wasm"],
  mount: { "/project": project },
});
const output = await instance.wait();
if (!output.ok) {
  throw new Error(`Clang failed. Exit: ${output.code}:`);
}
// The generated wasm file from clang
let wasm = await project.readFile("example.wasm");
const example = await Wasmer.fromFile(wasm);
const result = await example.entrypoint.run();
const outputExample = await result.wait();
// This should be "Hello World"
console.log(outputExample.stdout);

　また、Wasmer JS SDKのGitHubリポジトリでは、clangを実行するindex.htmlファイルのサンプルも公開されている。

ファイルの最適化

　Wasmerのclangは、wasm-optを使用してファイルを自動的に最適化することもできる。clangは、wasm-optが使用されているかどうかを自動的に検出し、wasm-optは、ファイルを最適化する際に自動的に呼び出される。

wasmer run clang/clang --use wasmer/wasm-opt --dir=. ・-o example.wasm -O2