WebAssemblyに特化したプログラミング言語「Onyx」にWindowsで入門してみる #HelloWorld

Onyxとは

WebAssembly(wasm)に特化した新しいプログラミング言語です。

コンパイラはC言語で記述されており、高速なコンパイルを実現しています。
その為、C言語のネイティブライブラリを呼び出すことも可能です。

LLVM や Binaryan などのコンパイラ基盤を使用せず、直接 wasmバイナリにコンパイルするのが特徴です。

ガベージコレクションは無く、メモリの割り当てと解放を意識する必要があり少々上級者向けの言語となっています。

以下のような感じで記述します。

use core { printf, iter }

main :: () {
    for i: 1 .. 10 {
        fact := factorial(i);
        printf("{}! = {}\n", i, fact);
    }
}

factorial :: (n: i32) -> i32 {
    return iter.as_iter(1 .. n)
        |> iter.fold(1, (x, y) => x * y);
}

インストール

1．公式のGithubリポジトリから、onyx-windows-wasmer-amd64.zipというファイルをダウンロードして解凍します

2．解凍したらonyx-windows-wasmer-amd64をCドライブ直下に配置します。(C:\onyx)

3． PATHとONYX_PATHの2つの環境変数に配置したパスを設定します。

$path = "C:\onyx\"
# PATHにパスを追加
$newPath = [Environment]::GetEnvironmentVariable("PATH", "User") + ";$path"
[Environment]::SetEnvironmentVariable("PATH", $newPath, "User")

# ONYX_PATHにパスを設定
[Environment]::SetEnvironmentVariable("ONYX_PATH", $path, "User")

4．Powershellを開き、onyxと入力し実行して以下のように表示されればOKです。

Usage:
    onyx <subcommand>

Subcommands:
    help      Shows this help message. Use "onyx help <subcommand>".
    build     Compiles an Onyx program into an executable.
    run       Compiles and runs an Onyx program, all at once.
    check     Checks syntax and types of an Onyx program.
    package   Package manager
    version   Prints version information

VSCodeの拡張機能

補完までは対応していないものの、シンタックスハイライトの対応が出来ます。

とりあえず"Hello World"

VSCodeなどでhello.onyxというファイルを作成し、以下のコードを記載します。

hello.onyx

use core {*}

main :: () {
  printf("Hello World");
}

以下のコマンドで実行できます。

onyx run .\hello.onyx
# => Hello World

ブラウザで実行してみる

プログラムの作成

足し算を行うプログラムを作成し、ブラウザのコンソール上に出力してみます。

use core {*}

#export "add" (x, y: i32) -> i32 {
  return x + y;
}

main :: () {}

コンパイル

以下のコマンドで、プログラムをコンパイルします。
コンパイルするとadd.wasmというファイルが生成されます。

onyx build .\add.onyx -o add.wasm -r js

※末尾の-r jsを付けないと、Onyx独自のバイナリが生成されてしまう為、ブラウザのWebAssembly APIで動作しません。

JavaScriptから呼び出す

以下のファイルを作成し、Webサーバーで起動してください。
Webサーバーがすぐ用意できない場合は、VSCodeの以下の拡張機能をしようすると直ぐ実行可能です。

<!DOCTYPE html>
<html>
<body>
  <h1>Onyx</h1>

  <script>
    WebAssembly.instantiateStreaming(fetch('add.wasm'),
    {
      // ここは必須
      host: {
        print_str: () => {},
        time: () => {},
      },
    }).then(
      (obj) => {
        // ここに処理を書く
        console.log(obj.instance.exports.add(10, 20));
      }
    )
  </script>
</body>
</html>

動作確認

30 と表示されていますね。成功です。

さいごに

Onyxはまだ正式リリースおらず、現状はBeta版となっています。
このまま無事に正式リリースしてほしいですね。
WebAssemblyの発展に、Onyxが寄与する様に期待しましょう。

WebAssemblyに特化したプログラミング言語「Onyx」にWindowsで入門してみる