WebAssembly（wasm）は、ウェブで高速な実行を可能にするバイナリ命令形式です。Rustは、その安全性、速度、並行性に優れる言語で、WebAssemblyの開発に適しています。このブログ記事では、Rustを用いてWebAssemblyのプロジェクトを始めるためのファーストステップを紹介します。
「wasm-pack」のインストール
WebAssemblyをRustで扱うためには、wasm-packが必要です。これは、RustのコードをWebAssemblyにコンパイルし、ウェブプロジェクトで使用できるようにパッケージ化するツールです。インストールは次のコマンドで行います。
cargo install wasm-pack
これにより、RustのプロジェクトをWebAssembly向けにビルドできるようになります。
RustでWebAssemblyを作るプロジェクトを作る
プロジェクトの作成
WebAssemblyのプロジェクトを始めるには、まず新しいライブラリパッケージのプロジェクトを作成します。
$ cargo new --lib hello-wasm
このコマンドにより、hello-wasmという名前の新しいライブラリが作成されます。
Cargo.tomlの設定
プロジェクトの設定ファイルCargo.tomlを編集して、プロジェクトのメタデータや依存関係を設定します。以下のように編集します。
[package]
name = "hello-wasm"
version = "0.1.0"
authors = ["Your Name <you@example.com>"]
description = "A sample project with wasm-pack"
license = "MIT/Apache-2.0"
repository = "https://github.com/yourgithubusername/hello-wasm"
edition = "2018"
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2"
この設定により、wasm-bindgenを依存関係に加え、WebAssembly向けのコードを生成できるようになります。
実装の記述
次に、src/lib.rsに実際のWebAssemblyのコードを記述します。以下のコードは、ウェブページ上でアラートを表示する簡単な例です。
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
extern {
pub fn alert(s: &str);
}
#[wasm_bindgen]
pub fn greet(name: &str) {
alert(&format!("Hello, {}!", name));
}
ビルドとWebAssemblyファイルの生成
コードが完成したら、以下のコマンドでパッケージをビルドし、WebAssemblyファイルを生成します。
wasm-pack build --target web
ビルドが成功すると、pkgディレクトリに必要なファイルが生成されます。これらのファイルをウェブアプリケーションで使用することができます。
WebアプリでWebAssemblyを利用
生成されたWebAssemblyファイルをウェブアプリケーションで利用するには、以下のようなHTMLファイルを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>hello-wasm example</title>
</head>
<body>
<script type="module">
import init, { greet } from "./pkg/hello_wasm.js";
init().then(() => {
greet("ヤマダタロウ");
});
</script>
</body>
</html>
Webアプリを表示
ローカルのWEBサーバーでこのHTMLファイルを開くと、Rust
側で定義したgreet関数が実行され、"Hello, ヤマダタロウ!"というアラートが表示されます。これにより、Rustで書かれたロジックがウェブアプリケーション内で動作することを確認できます。
まとめ
RustとWebAssemblyを利用してウェブアプリケーションを開発する基礎を学びました。
0 件のコメント:
コメントを投稿