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

第9回では、第8回の続きとして、投稿アプリSPAの機能を拡張していきます。第9回では、一覧表示機能のコードを通じて、Dioxusのコンポーネントの理解を進めます。

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

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

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

Dioxusにおけるコンポーネント指向開発

　第7回で、DioxusはReactの影響を強く受けたフレームワークであることに触れました。これは公式サイトでも明記されていますが、Dioxusの利用においてはReactのコンポーネント指向開発の理解があればスムーズなのは間違いありません。今回、一覧表示機能を実装するに当たって、コンポーネント指向開発の基本をあらかじめ示しておくことにします（図1）。

図1　コンポーネント指向開発

レンダリングの単位としてコンポーネントを作る

　コンポーネント指向開発では、レンダリング（HTMLの生成）の単位を「コンポーネント」として設計します。前回はAppコンポーネントを示しましたが、これはヘッダとフッタを除く部分、すなわちアプリのメイン部分に相当するコンポーネントです。役割は、APIサーバからのレスポンスを、JSON形式でそのままレンダリングするというものでした。

　今回は一覧表示機能を実装していきます。このとき、Appコンポーネントでは投稿データを逐一レンダリングしていってもよいのですが、役割分担という観点から、ここでは投稿データのレンダリングに特化したPostEntryコンポーネントを導入します。役割ごとにコンポーネントを分離することで、Appコンポーネントの肥大化を防げますし、コンポーネントが再利用しやすくなります。

　Appコンポーネントからは、投稿の数だけPostEntryコンポーネントを呼び出すことで、結果として一覧表示を達成できます。このとき、Appコンポーネントは親コンポーネント、PostEntryコンポーネントは子コンポーネントという関係になります。

コンポーネントの状態はフックで管理する

　前回の記事で、コンポーネントの状態（ステート）は「フック」（hook）という仕組みで管理することを示しました。フックには値、参照、関数を割り当てることができ、コンポーネントが有効な間だけ保持されます。

　また、フックの変更は、そのままコンポーネントが再レンダリングされるトリガーとなります。つまり、フックを書き換えることで、その内容は即座に表示にも反映されます（反映のための特別な指示は必要ありません）。

子コンポーネントにはPropsでデータを渡す

　親コンポーネントから子コンポーネントへは、Propsという仕組みでデータを渡せます。名前から想像が付くと思いますが、PropsはProp（プロパティ）の集合です。コンポーネントに対する引数とも言えるでしょう。Propsによって、コンポーネントの汎用（はんよう）性を上げて再利用しやすくしています。

　この例であれば、PostEntryコンポーネントがレンダリングする投稿データは、AppコンポーネントからProps経由で渡されています。

　以上、コンポーネント、フック、Propsといった概念を押さえられたところで、具体的なアプリに実装していきます。

取得した投稿データのランダムアクセス化