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

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

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

連載：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　編集削除メニュー

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

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

#[derive(PartialEq)]
enum Mode {
    None,
    New,
    Menu,		// 追加：メニュー表示中
    Edit,		// 追加：投稿編集中
}

リスト1：src/main.rs（Mode列挙体）

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