Rust and WebAssemblyでSPAを作ってみよう：Webアプリ実装で学ぶ、現場で役立つRust入門（12）

第12回からは、第11回までで作成した投稿アプリの延長として、Rust and WebAssemblyでTODOアプリを開発します。第12回では、プロジェクトの構築やさまざまな準備のためのコードを通じて、Rust and WebAssemblyの基本的な利用方法を理解します。

[山内直（著）／山田祥寛（監修），WINGSプロジェクト]

連載：Webアプリ実装で学ぶ、現場で役立つRust入門

　本連載のサンプルコードをGitHubで公開しています。こちらからダウンロードしてみてください。

Rust and WebAssemblyとは

　WebAssemblyとは、プログラムの高速な実行が特徴である、ブラウザにおける新しい言語フォーマットです。Rust and WebAssemblyとは、RustとWebAssemblyを連携するオープンソースプロダクトを開発するワーキンググループです。それぞれ、＠ITの連載「いろんな言語で試す、WebAssembly入門」と、その第5回「RustでWebAssembly――「Rust and WebAssembly」を体験する」で紹介しています。本記事の理解にWebAssemblyの知識は必須ではありませんが、興味があれば一読することをお勧めします。

　Rust and WebAssemblyの主なプロダクトは以下の通りです。本記事では、これらを使って、ブラウザで動作するTODOアプリを作っていきます（図1）。

• wasm-pack……RustからWebAssemblyファイルなどを生成するツール
• wasm-bindgen……RustとJavaScriptを連携させるためのライブラリとツール
• wasm-pack-template……wasm-packによるRustプロジェクトのテンプレート
• create-wasm-app……Webページのパッケージ（npm init用）

　中核を成すのは、wasm-bindgenです。wasm-bindgenの備えるAPI（js-sys、web-sysクレート）を使ってRustでアプリをコーディングします。js-sysはJavaScript APIを、web-sysはWindowをはじめとするオブジェクトへのアクセスを提供しており、JavaScript側の備える機能にほぼ一対一に対応した構造体、メソッドを使って、ほとんどの処理をRustで記述できます。

図1　作成するTODOアプリのイメージ

Rust and WebAssemblyを使う準備

　Rust and WebAssemblyを使うには、Rustの他にNode.jsが必要ですので、インストールしておいてください。なお、本稿作成時点で最新のNode.jsは20.16で、npmのバージョンは10.8.xです。npmについては、後述のコマンドの実行でエラーとなるので、nvmコマンドで少し古いバージョンの10.7.Xをインストールしてください。

wasm-packをインストールする

　wasm-packをインストールします。macOS環境では、「wasm-pack」に記載されているコマンドでターミナルからwasm-packのインストールを実施します。Windows環境では、同ページからwasm-pack-init.exeをダウンロードしてインストールを実施します。

cargo-generateをインストールする

　Cargoパッケージマネジャーで、テンプレートからプロジェクトを生成可能にするcargo-generateをインストールしておきます。

% cargo install cargo-generate

アプリの作成

　アプリは、Rust and WebAssemblyが提供するテンプレートwasm-pack-templateから作成します。

プロジェクトを作成する

　プロジェクトtodo-appをテンプレートから作成します。コマンドを実行するとプロジェクト名を尋ねられるので、「todo-app」を指定してください。同名のフォルダが作成されるので、以降は、このフォルダで作業します。

% cargo generate --git https://github.com/rustwasm/wasm-pack-template
🤷   Project Name: todo-app
…略…
✨   Done! New project created /Users/…/todo-app