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

第11回では、第10回に引き続き投稿アプリに更新機能を実装します。編集、削除機能の実装を通じて、DioxusによるSPA開発の、より実践的な手順を学びます。

» 2024年08月15日 05時00分 公開

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

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

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

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


コンテキストの利用

 前回は、新規投稿機能を実装しました。今回は、投稿の編集機能と削除機能を実装していきます。

 ここまで、コンポーネントで値を保持するためにuse_signal(Signal<T>)などのフックを使ってきました。フックを子コンポーネントでも使いたい場合には、propsを使って渡すのが基本です。ただし、子コンポーネントに渡すフックの数が多くなったり、コンポーネントの階層が深くなったりすると、同じようなpropsが増えてくる「Props Drilling」(バケツリレー)が発生します。

 Props Drillingではコードが複雑になり冗長にもなるので、これを回避するためにDioxusには「コンテキスト」(context)という仕組みが用意されています。コンテキストはフックの一つであり、Signal<T>などの値を直接保持します。つまり、フックのコンテナと見なすことができます。

 コンテキストを使うには、まず親コンポーネント(Appなど)で、use_context_provider関数により引数のクロージャでフックのインスタンスを生成します。そして、それを使う子コンポーネントで、use_context関数によりフックのインスタンスを取得します。

let s = use_context_provider(|| Signal::new(String::new()));	// 親
↓
let s = use_context::<Signal<String>>();			// 子

 ここで、sは親子ともにSignal<String>を保持します。つまり、親でも子でも、同じようにフックを操作できるということです。もちろん、propsへの記述は不要です。

 このようにコンテキストは便利ですが、グローバルなフックと見なすことができるので、乱用はコードの可読性やコンポーネントの独立性を低下させます。そのため、コンテキストの利用にはその妥当性の検討が必要です。本稿では各コンポーネントがフックを利用するので、ただ渡すだけのpropsにはなりませんが、コンテキストの利用例として示します。

 なお、現時点でのDioxusにはコンテキストの利用において制約がありますが、それは都度言及します。

編集削除メニューの実装

 新規投稿機能と同様に、一覧表示から直接編集、削除できるようにします。具体的には、投稿表示のクリックで図1のようにボタン群をメニュー表示し、「編集」ボタンのクリックで投稿編集モードへ移行、「削除」ボタンのクリックで削除、「キャンセル」ボタンのクリックでメニューの消去、それぞれを実行します。

図1 編集削除メニュー 図1 編集削除メニュー

作業モードの列挙体Modeを拡張する

 前回、作業モードとしてMode列挙体を定義しました。これに、メニュー表示中のモードMode::Menuを追加し、後ほど投稿を編集するために編集中であることを示すモードMode::Editをリスト1のように追加しておきます。

#[derive(PartialEq)]
enum Mode {
    None,
    New,
    Menu,		// 追加:メニュー表示中
    Edit,		// 追加:投稿編集中
}
リスト1:src/main.rs(Mode列挙体)

Appコンポーネントを修正する

Copyright © ITmedia, Inc. All Rights Reserved.

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

注目のテーマ

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

RSSについて

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

メールマガジン登録

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