検索
連載

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

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

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

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

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


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

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

図1 コンポーネント指向開発
図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.

ページトップに戻る