RustとDioxusで投稿アプリのSPAに新規投稿機能を実装しよう：Webアプリ実装で学ぶ、現場で役立つRust入門（10）

第10回では、第9回に引き続き、投稿アプリSPAの機能を拡張していきます。第10回では、新規投稿のコードを通じて、Dioxusの状態管理やイベントハンドラの理解を進めます。

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

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

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

投稿一覧の更新機能の実装

　前回は、投稿一覧を表示する機能を実装しました。今回は、新規投稿機能を実装します。

　その前に、投稿一覧の更新機能を実装します。SPA（Single Page Application）では、自身の操作による更新は随時ブラウザ画面に反映できますが、他のクライアントにおける操作は反映できません。そのため、プッシュ通知を実装したり、定期的に一覧を取得したりする必要があります。ここでは簡略版として、ユーザーの指示で一覧表示を再読み込みする機能を実装します。イベントハンドラの基本的な記述方法を解説します。

「再読み込み」ボタンを設置する

　「再読み込み」ボタンはUI部品なので、Appコンポーネントにおいて投稿一覧をレンダリングする部分にリスト1のように追加します。この指定で、投稿一覧の上に右寄せでボタンが表示されるようになります。

…略…
filtered_posts.sort_unstable_by(|a, b| b.cmp(a));
    rsx! {
        div {		(1)
            p {		(2)
                class: "text-end mb-2",
                button {	(3)
                    class: "btn btn-primary",
                    "再読み込み",
                }
            }
        }
        {
            filtered_posts.iter().map(|id| 
…略…

リスト1：src/main.rs（「再読み込み」ボタン）

　（1）〜（3）が、div要素、p要素、button要素に相当するRSX構文です。続くclass:はHTML属性の指定であることは、第9回で紹介した通りです。

ボタンクリックのイベントハンドラを作成する

　このボタンのクリックで、再読み込みを実行するイベントハンドラをリスト2のように追加します。場所は、buttonブロックの内部です。

…略…
button {
    class: "btn btn-primary",
    onclick: move |_| {			(1)
        posts.write().clear();		(2)
        posts_source.restart();		(3)
    },
    "再読み込み",
}
…略…

リスト2：src/main.rs（「再読み込み」ボタン）

　初出としてonclick属性の指定があります（1）。ここには、クリック（タップ）イベントに対応するためのイベントハンドラをクロージャで記述します。クロージャでは、引数のイベントデータに加えて、クロージャ外の変数を使用することができます（キャプチャー）。今回の例では、postsとposts_sourceが該当しますが、クロージャ呼び出し時にこれらが「生きて」いる必要があるため、moveキーワードによって所有権を移動させる必要があります。moveキーワードが不要なのは、クロージャが環境をキャプチャーしないときのみです。

　クリックイベントのクロージャには、引数を1個（Event<MouseData>構造体）与える必要があります。構造体名から分かるように、イベントデータを保持する構造体です。通常は、イベントの種類に応じたデータ（ここではマウス操作のMouseData）が入りますが、今回はクリックイベントであることが分かればいいので、引数は使用せずワイルドカード「_」としています。なお、MouseDataからは、クリック位置の座標（coodinates）、クリックしたボタン（trigger_button）などを取得できます。

　クロージャの中身は、（2）の投稿データのフックのクリア、（3）の投稿一覧API呼び出しフックの再呼び出しとなっています。（2）については問題ないでしょう、posts.write()にてハッシュマップを更新用で取得し、clearメソッドで全消去します。全消去するのは、投稿一覧をAPIで取得した際に、投稿データを再構築するためです。（3）はUseResourceフックのrestartメソッドの呼び出しで、フックの関数（全件取得API《index》の呼び出し）を再度呼び出します。

　これで、「再読み込み」ボタンで投稿一覧を更新する機能を実装できました。APIサーバ（配布サンプルのactix_posts）を起動し、本アプリもdx serveコマンドでビルド、実行して、図1のように表示されれば成功です。

図1　「再読み込み」ボタンの機能の確認

［参考］イベントとイベントハンドラ