SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Rust言語で作るWebバイナリファイル「WebAssembly」入門

Rust/WebAssemblyとJavaScriptのデータ交換を使いこなす!

Rust言語で作るWebバイナリファイル「WebAssembly」入門 第4回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載では、Webブラウザー上でJavaScriptと共に動作できるバイナリ形式のプログラムファイル「WebAssembly」を、Rustプログラミング言語で実装する方法を説明していきます。前回は実際にRust言語でWebAssemblyを実装して、動作速度を検証しました。今回は、本格的な処理に不可欠な、Rust/WebAssemblyとJavaScriptとのデータ交換について説明します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 本連載では、Webフロントエンド開発において注目されているバイナリ形式のプログラムファイルWebAssemblyを、Rustで実装して活用する方法を説明しています。前回記事では、円周率を計算するプログラムをRust/WebAssemblyで実装してJavaScriptの処理と比較することで、WebAssemblyの高速動作を示しました。

 より本格的な処理をRust/WebAssemblyで実装していくには、JavaScriptとの間でさまざまなデータをやり取りする必要が生じてきます。そこで本記事では、Rust/WebAssemblyとJavaScriptとの間でデータを交換して処理する方法を説明します。

対象読者

  • 動的なWebページにさらなる速度を求める方
  • RustやWebAssemblyの概要を知りたいフロントエンドエンジニアの方
  • 大きなデータをRust/WebAssemblyで処理させたい方

必要な環境

 本記事のサンプルコードは、以下の環境で動作を確認しています。

  • Windows 10 64bit版
  • Microsoft Edge 105.0.1343.53
  • rustup 1.25.1
  • cargo 1.64.0
  • wasm-pack 0.10.3
  • Node.js v16.17.1 64bit版

 今回のサンプルコードでは、WebAssemblyをビルドするRustのプロジェクトの内部に、WebAssemblyを参照するWebページのプロジェクト(wwwサブフォルダー)を含めています。プロジェクトを実行するには「wasm-pack build」コマンドでWebAssemblyをビルド後、wwwサブフォルダーで「npm install」コマンドを実行してライブラリーをインストールし、「npm run start」コマンドでプログラムを実行します。実行内容はWebブラウザーで「http://localhost:8080」を表示して確認できます。プロジェクトの生成法については、過去記事も参考にしてください。

データ交換の鍵を握るwasm_bindgenとは

 最初に、文字列や数値をRust/WebAssemblyとJavaScriptとで交換する処理を説明します。図1は、本連載の初回記事でも説明した、Rust/WebAssemblyの処理でJavaScriptのダイアログを表示する例です。プログラムを実行すると「Hello, p001-basic!」というダイアログ(alert)が表示されます。

図1 Rust/WebAssemblyでJavaScriptのalertを表示するサンプル(p001-basic)
図1 Rust/WebAssemblyでJavaScriptのalertを表示するサンプル(p001-basic)

 図1のサンプルで、Rustの実装はリスト1の通りです。

[リスト1]図1のRust実装(p001-basic/src/lib.rs)
// JavaScriptのメソッドを実行 ...(1)
#[wasm_bindgen]
extern {
    fn alert(s: &str);
}
// JavaScriptにメソッドをエクスポート ...(2)
#[wasm_bindgen]
pub fn greet() {
    alert("Hello, p001-basic!");
}

 (1)はexternを付与して、JavaScriptのalertメソッドをRustから呼び出す記述です。(2)のgreetメソッドは、(1)のalertメソッドを呼び出す処理です。ここでpubは、処理をJavaScript側に公開することを表します。各メソッドに付与された「#[wasm_bindgen]」で、Rust/WebAssemblyとJavaScriptとのデータ交換を指定できます。

 JavaScript側(リスト2)では、(1)でWebAssemblyをインポートして、(2)でリスト1(2)のgreetメソッドを実行します。

[リスト2]リスト1のRust/WebAssemblyを呼び出すJavaScriptの実装(p001-basic/www/index.js)
// Rustで実装したWebAssemblyをインポート ...(1)
import * as wasm from 'p001-basic';
// WebAssemblyのgreetメソッドを実行 ...(2)
wasm.greet();

次のページ
wasm_bindgenの利用方法をコードと共に解説!

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Rust言語で作るWebバイナリファイル「WebAssembly」入門連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/16904 2022/12/12 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング