検索
連載

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

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

Share
Tweet
LINE
Hatena
「Webアプリ実装で学ぶ、現場で役立つRust入門」のインデックス

連載: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 アプリの全体像
図1 アプリの全体像

Copyright © ITmedia, Inc. All Rights Reserved.

ページトップに戻る