APIを利用して、UI作成フレームワークDioxusでアプリのフロントエンド部分をSPAとして開発していきます。第7回では、API呼び出し関数の実装と、その呼び出し結果をページに反映するコードを通じて、Dioxusの基本動作を理解します。公開[山内直(著)/山田祥寛(監修),WINGSプロジェクト]この記事は会員限定です。会員登録(無料)すると全てご覧いただけます。本連載のサンプルコードをGitHubで公開しています。こちらからダウンロードしてみてください。Labsによるクロスプラットフォーム対応のアプリを構築できるRustライブラリです。移植性が高く(portable)、高性能で(performant)、人間工学に基づいた(ergonomic)設計が特徴とされています。Dioxusでは、単一のコードで以下のプラットフォームで動作するアプリを開発可能です。Application)を開発できます。WebAssemblyについては@ITの連載「いろんな言語で試す、WebAssembly入門」で紹介しています。WebAssemblyを紹介しています。本記事の理解にWebAssemblyの知識は必須ではありませんが、興味があれば一読することをお勧めします。(2)デスクトップ(macOS、Windows、Linux)ネイティブ環境でスタンドアロンで動作するデスクトップアプリを開発できます。このアプリは、システムのWebView(アプリ内でHTMLを表示する機能)でページをレンダリングし、プラットフォーム間で見た目が同じになります。WebViewを使用しますが、ブラウザAPIにはアクセスできません。その替わり、ファイルシステムなどのシステムのAPIを利用できます。OS)他のプラットフォームに比べるとサポートが遅れていますが、WebViewを使ったモバイルアプリを開発できます。アニメーションやネイティブウイジェットを使えませんが、シンプルなCRUDスタイルのアプリの迅速な開発に向いています。Interface)アプリTUI形式のアプリを開発できます。TUIとは、CUIにGUIのような操作性を持ち込んだインタフェースを指します。CUIでは、例えばターミナル画面でコマンドを入力して操作しますが、同じくターミナル画面にGUIを模してテキストで配置したボタンや入力フィールドを、キーボードで操作できるようにしたものがTUIです。ターミナル画面でありながら、GUIのような直感的な操作が可能です。(5)フルスタックWebアプリサーバサイドレンダリングとハイドレーションに対応したフルスタックのWebアプリを開発できます。サーバサイドレンダリング(SSR)とは、ReactやVueなどで本来はクライアントサイドで実施していたレンダリング処理を、サーバサイドで処理することを指します。サーバサイドで実施することでクライアントサイドの負担は大幅に減りますが、インタラクティブ性が失われるという問題があります。ハイドレーションとは、SSRでレンダリング済みのコンテンツにイベントハンドラをアタッチし直すことで、インタラクティブ性を回復させる仕組みです。(6)LiveViewアプリLiveViewアプリは、WebSocket(Webにおけるリアルタイム通信のための標準)を使用したサーバとクライアント間のリアルタイム通信をサポートするアプリです。アプリは基本的にサーバサイドで動作し、クライアントはページのレンダリングを受け持ちます。その性質上、チャットやゲームなどのリアルタイム性を要求されるアプリに向いています。今回紹介するのは、Webプラットフォームにおけるアプリ開発です。WebAssembly」を使用したWebAssemblyバイナリを生成し、ブラウザ上でSPAとしてアプリを実行します。WebAssemblyバイナリによる実行となるので、メモリの利用効率が高く、JavaScriptと比較して高速に動作します。Dioxusは、その設計思想においてReact(JavaScriptによるコンポーネント指向のUI構築ライブラリ)の影響を強く受けています。コンポーネント、フック、propsなどの考え方は、ほとんどReactと共通であり、Reactの経験者ならDioxusの理解は比較的容易と思われます。本記事では、それぞれについて都度言及します。本稿作成時点でDioxusはβ版(v0.4)であり、安定版リリースには達していません。Webベースの機能の変更はほとんどないであろうと公式ドキュメントでは言及されているので、導入を前提とした検証には問題のない状況と言えます。Dioxusを使用する準備Dioxusを使用するために、幾つかの準備作業を済ませておきます。Dioxusには、専用のCLIツール(dioxus-cli)が用意されているので、それをインストールします。このツールのdxコマンドによって、アプリケーションのビルドの他、WebAssemblyバイナリの生成、サーバの起動などを一括して実行してくれるので便利です。-force続けて、WebAssemblyのビルドターゲットであるwasm32-unknown-unknownを有効にします。dateと出力されます。設定を有効にする必要があります。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。