RustでWebAssemblyを作るファーストステップ

2024年3月19日火曜日

Rust

t f B! P L

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で書かれたロジックがウェブアプリケーション内で動作することを確認できます。

enter image description here

まとめ

RustとWebAssemblyを利用してウェブアプリケーションを開発する基礎を学びました。

スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

仕事募集もしていたり、していなかったり。

QooQ