Rust and WebAssemblyでSPAに一覧表示と追加機能を実装しよう：Webアプリ実装で学ぶ、現場で役立つRust入門（13）

第13回では、第12回の続きとして、TODO投稿アプリSPAの機能を拡張していきます。第13回では、タスク表示、追加といった機能の実装を通じて、WebAssemblyにおけるDOMの操作やイベントハンドラの記法、Web Storageの利用方法について理解します。

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

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

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

実装前の準備

　各種機能の実装に備えて、幾つか準備をしておきます。

既定のコードを無効化する

　前回までの作業では、既定の関数greetを呼び出すようになっているので、これをリスト1のように無効にします。なお、替わりに呼び出す関数の記述は不要です。次節で触れるように、モジュール読み込み時に自動で呼び出す関数の指定ができるためです。

import * as wasm from "todo-app";
//wasm.greet();				無効にする

リスト1：site/index.js

　必須ではありませんが、不要になった関数定義（alert関数、greet関数）もコメントアウトして無効にしましょう。Rustでは、C言語のような/* 〜 */形式の複数行コメントも利用可能なので活用してみてください（配布サンプルを参照）。

クレートとfeatureを追加する

　以降の作業で必要になるクレートとfeatureを追加しておきます。以下のコマンドで、chrono、js-sysクレートを追加してください。それぞれ、カレンダー機能、JavaScriptライブラリへのアクセス機能に相当します。

% cargo add chrono js-sys

　[dependencies.web-sys]セクションのfeatures項目に、幾つかのfeaturesをリスト2のように追加してください。内容は、コメントを参照してください。

[dependencies.web-sys]
features = [
  …略…
  'CssStyleDeclaration',		# CSSの読み出しや設定
  'HtmlDivElement',			# div要素の使用
  'HtmlInputElement',			# input要素の使用
  'MouseEvent',				# MouseEventの使用
]

リスト2：Cargo.toml

タスク一覧機能の実装

　ここから、TODO投稿アプリの中核となる機能を実装していきます。アプリの全体像を図1に示します。今回は、この図の（1）（2）（4）の部分を実装していきます。

図1　アプリの全体像