Rust and WebAssemblyでSPAを作ってみよう：Webアプリ実装で学ぶ、現場で役立つRust入門（12）
第12回からは、第11回までで作成した投稿アプリの延長として、Rust and WebAssemblyでTODOアプリを開発します。第12回では、プロジェクトの構築やさまざまな準備のためのコードを通じて、Rust and WebAssemblyの基本的な利用方法を理解します。
本連載のサンプルコードを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で記述できます。
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
Copyright © ITmedia, Inc. All Rights Reserved.