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

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

» 2024年07月18日 05時00分 公開

この記事は会員限定です。会員登録(無料)すると全てご覧いただけます。

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

連載: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 「再読み込み」ボタンの機能の確認 図1 「再読み込み」ボタンの機能の確認

[参考]イベントとイベントハンドラ

Copyright © ITmedia, Inc. All Rights Reserved.

スポンサーからのお知らせPR

注目のテーマ

AI for エンジニアリング
「サプライチェーン攻撃」対策
1P情シスのための脆弱性管理/対策の現実解
OSSのサプライチェーン管理、取るべきアクションとは
Microsoft & Windows最前線2024
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。