RustのWebAssembly対応入門｜wasm-bindgenを使う

先生

RustでWebAssembly！？wasm-bindgenを使えば、Web開発がもっと楽しくなる！🚀

RustでWebAssemblyを始める：wasm-bindgen入門

近年、WebAssembly（Wasm）は、Webブラウザ上でネイティブに近いパフォーマンスを実現する技術として注目されています。特にRustは、その安全性とパフォーマンスの高さから、Wasm開発に適した言語として人気を集めています。

この記事では、RustでWebAssemblyを開発するための基本的なツールであるwasm-bindgenの使い方を解説します。wasm-bindgenを使用することで、RustとJavaScriptの間で効率的にデータのやり取りが可能になり、Webアプリケーション開発がよりスムーズになります。

wasm-bindgenとは？

wasm-bindgenは、RustでコンパイルされたWebAssemblyモジュールとJavaScriptの間のインターフェースを自動的に生成するツールです。

これにより、Rustで定義された関数やデータ構造をJavaScriptから簡単に呼び出すことができ、逆にJavaScriptの関数やオブジェクトをRustから利用することも可能です。

wasm-bindgenは、WebAssemblyとJavaScriptの連携を容易にし、Webアプリケーション開発の効率を大幅に向上させます。

開発環境の構築

まず、Rustの開発環境が整っていることを確認してください。Rustのインストールは、公式ウェブサイト ([参考リンク](#rustup)) を参照してください。

次に、wasm-packをインストールします。wasm-packは、RustのWasmプロジェクトをビルド、パッケージ化、公開するためのツールです。

cargo install wasm-pack

また、wasm-bindgen-cliも必要です。これは、wasm-bindgenを使用するためのコマンドラインツールです。

cargo install wasm-bindgen-cli

プロジェクトの作成

新しいRustのライブラリプロジェクトを作成します。

cargo new --lib wasm-example
cd wasm-example

Cargo.tomlファイルを編集し、以下の設定を追加します。

[lib]
crate-type = ["cdylib"]

これにより、RustのコードがCのダイナミックライブラリとしてコンパイルされ、WebAssemblyモジュールとして利用できるようになります。

また、wasm-bindgenを依存関係に追加します。

cargo add wasm-bindgen

Rustコードの記述

src/lib.rsファイルに、JavaScriptから呼び出す関数を記述します。#[wasm_bindgen]アトリビュートを使用することで、関数がJavaScriptに公開されます。

use wasm_bindgen::prelude::*;

# [wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

この例では、greet関数は、名前を受け取り、挨拶の文字列を返します。

WebAssemblyモジュールのビルド

wasm-packを使用して、WebAssemblyモジュールをビルドします。

wasm-pack build --target web

このコマンドを実行すると、pkgディレクトリに、WebAssemblyモジュール（.wasmファイル）と、JavaScriptのラッパーコード（.jsファイル）が生成されます。

JavaScriptでの利用

生成されたJavaScriptのラッパーコードを使用して、WebAssemblyモジュールをWebページに組み込みます。

<script type="module">
  import init, { greet } from './pkg/wasm_example.js';

  async function run() {
    await init();
    console.log(greet('World'));
  }

  run();
</script>

この例では、pkg/wasm_example.jsからinit関数とgreet関数をインポートし、greet関数を呼び出して、コンソールに結果を表示します。

参考リンク

まとめ

この記事では、Rustとwasm-bindgenを使用してWebAssemblyを開発する基本的な手順を解説しました。wasm-bindgenを使用することで、Rustの強力な型システムとパフォーマンスをWebアプリケーションに活用することができます。

WebAssemblyは、Webアプリケーションの可能性を広げるエキサイティングな技術です。ぜひ、Rustとwasm-bindgenを使って、WebAssemblyの世界を探求してみてください。