RustとDioxusで投稿アプリのSPAに一覧表示機能を実装しよう：Webアプリ実装で学ぶ、現場で役立つRust入門（9）
第9回では、第8回の続きとして、投稿アプリSPAの機能を拡張していきます。第9回では、一覧表示機能のコードを通じて、Dioxusのコンポーネントの理解を進めます。
この記事は会員限定です。会員登録（無料）すると全てご覧いただけます。
本連載のサンプルコードをGitHubで公開しています。こちらからダウンロードしてみてください。
Dioxusにおけるコンポーネント指向開発
第7回で、DioxusはReactの影響を強く受けたフレームワークであることに触れました。これは公式サイトでも明記されていますが、Dioxusの利用においてはReactのコンポーネント指向開発の理解があればスムーズなのは間違いありません。今回、一覧表示機能を実装するに当たって、コンポーネント指向開発の基本をあらかじめ示しておくことにします（図1）。
レンダリングの単位としてコンポーネントを作る
コンポーネント指向開発では、レンダリング（HTMLの生成）の単位を「コンポーネント」として設計します。前回はAppコンポーネントを示しましたが、これはヘッダとフッタを除く部分、すなわちアプリのメイン部分に相当するコンポーネントです。役割は、APIサーバからのレスポンスを、JSON形式でそのままレンダリングするというものでした。
今回は一覧表示機能を実装していきます。このとき、Appコンポーネントでは投稿データを逐一レンダリングしていってもよいのですが、役割分担という観点から、ここでは投稿データのレンダリングに特化したPostEntryコンポーネントを導入します。役割ごとにコンポーネントを分離することで、Appコンポーネントの肥大化を防げますし、コンポーネントが再利用しやすくなります。
Appコンポーネントからは、投稿の数だけPostEntryコンポーネントを呼び出すことで、結果として一覧表示を達成できます。このとき、Appコンポーネントは親コンポーネント、PostEntryコンポーネントは子コンポーネントという関係になります。
コンポーネントの状態はフックで管理する
前回の記事で、コンポーネントの状態（ステート）は「フック」（hook）という仕組みで管理することを示しました。フックには値、参照、関数を割り当てることができ、コンポーネントが有効な間だけ保持されます。
また、フックの変更は、そのままコンポーネントが再レンダリングされるトリガーとなります。つまり、フックを書き換えることで、その内容は即座に表示にも反映されます（反映のための特別な指示は必要ありません）。
子コンポーネントにはPropsでデータを渡す
親コンポーネントから子コンポーネントへは、Propsという仕組みでデータを渡せます。名前から想像が付くと思いますが、PropsはProp（プロパティ）の集合です。コンポーネントに対する引数とも言えるでしょう。Propsによって、コンポーネントの汎用（はんよう）性を上げて再利用しやすくしています。
この例であれば、PostEntryコンポーネントがレンダリングする投稿データは、AppコンポーネントからProps経由で渡されています。
以上、コンポーネント、フック、Propsといった概念を押さえられたところで、具体的なアプリに実装していきます。
取得した投稿データのランダムアクセス化
Copyright © ITmedia, Inc. All Rights Reserved.
ITmediaはアイティメディア株式会社の登録商標です。