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

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

» 2024年10月11日 08時00分 公開
[@IT]

この記事は会員限定です。会員登録(無料)すると全てご覧いただけます。

 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ファイルを作成する

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

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) ブラウザで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」を表示する以下のサンプルコードを紹介している。

  1. import {
  2. init,
  3. Wasmer,
  4. Directory
  5. } from "https://unpkg.com/@wasmer/sdk@latest/dist/index.mjs";
  6. await init();
  7. const clang = await Wasmer.fromRegistry("clang/clang");
  8. const project = new Directory();
  9. await project.writeFile("example.c",
  10. `#include<stdio.h>
  11. int main() {
  12. printf("Hello World");
  13. return 0;
  14. }
  15. `);
  16. let instance = await clang.entrypoint.run({
  17. args: ["/project/example.c", "-o", "/project/example.wasm"],
  18. mount: { "/project": project },
  19. });
  20. const output = await instance.wait();
  21. if (!output.ok) {
  22. throw new Error(`Clang failed. Exit: ${output.code}:`);
  23. }
  24. // The generated wasm file from clang
  25. let wasm = await project.readFile("example.wasm");
  26. const example = await Wasmer.fromFile(wasm);
  27. const result = await example.entrypoint.run();
  28. const outputExample = await result.wait();
  29. // This should be "Hello World"
  30. 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

Copyright © ITmedia, Inc. All Rights Reserved.

スポンサーからのお知らせPR

Coding Edge 鬯ョ�ォ�ス�ェ髯区サゑスソ�ス�ス�ス�ス�コ髣包スオ隴∵コキ�ク�キ�ス�ケ隴趣ス「�ス�ス�ス�ウ鬩幢ス「�ス�ァ�ス�ス�ス�ュ鬩幢ス「隴趣ス「�ス�ス�ス�ウ鬩幢ス「�ス�ァ�ス�ス�ス�ー

鬮ォ�エ陝キ�「�ス�ス�ス�ャ鬮ォ�エ鬲�シ夲スス�ス�ス�・鬮ォ�エ陝カ�キ�ス�」�ス�ッ髣厄スォ�ス�」

注目のテーマ

4AI by @IT - AIを作り、動かし、守り、生かす
Microsoft & Windows最前線2025
AI for エンジニアリング
ローコード/ノーコード セントラル by @IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by @IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。