DioxusLabs/dioxus — 優良食堂詳しい解説

01 / 概要

何をするものか一文で言うと

ひとことでRustで単一コードベースからWeb・デスクトップ・モバイルアプリを構築するクロスプラットフォームUIフレームワーク

DioxusはRustで書く単一のコードベースから、web(WASM/SSR)・desktop・mobile(iOS/Android)向けのUIアプリを作れるフルスタックフレームワークです。Reactに似たコンポーネントモデルと仮想DOM、シグナルによる状態管理を持ち、CLIツール「dx」でビルドやホットリロードまで一貫して扱えます。

02 / 構造

どう動くのか中核のしくみ

読み方動きの流れを図と一緒にほどきました。

コアはpackages/core(virtualdom)とpackages/signalsで、コンポーネント関数がrsx!マクロでUI木を返し、差分計算で実DOMやネイティブUIに反映します。packages/web・desktop・native・liveview・ssrが各ターゲットのレンダラで、同じrsx記述をdioxus/desktopやdioxus/webなど機能フラグで切り替えて出力先を変えます。examples以下のbluetooth-scannerでは、use_actionで非同期処理(btleplug経由のBluetoothスキャン)を呼び出し、結果をrsx!内でmatchして表示を切り替える形が確認できます。fullstack向けにはpackages/fullstackとserver_functionsの例があり、クライアントとサーバー間のRPC的な呼び出しをひとつのファイルで書ける構成です。CIはCargo workspace全体をclippy・fmt・msrvチェックし、Playwrightで実ブラウザテストも走らせています。

03 / 体験

入れるとこんな体験になりますギット飯が実際にたどった順序

所要ギット飯が実際に導入・実行しながらたどった順序です。

STEP 01
Cargo.tomlのworkspace定義を見ると、packages配下に約40のクレートとexamples配下に多数のサンプルが登録されており、まずどこから読むか迷う規模だと分かります。
STEP 02
examples/01-app-demos/bluetooth-scanner/src/main.rsを開くと、use_actionで非同期スキャン処理を呼び、rsx!内でscan.value()をmatchして状態別のUIを描く一連の流れが読めます。
STEP 03
dx CLIでdx serveのようなコマンドを実行する想定ですが、README前半はdevcontainer.mdの内容で、ローカルでのRust/CLIセットアップ手順そのものはこのREADME抜粋には含まれていません。
STEP 04
fullstack系のexamples(hello-world, router, auth)を見ると、同一プロジェクト内でクライアントとサーバーのコードが1つのCargo.tomlでビルドされる構成が確認でき、フルスタックの結線がどう成立しているか把握できます。
STEP 05
CI設定(.github/workflows/main.yml)から、clippy・rustfmt・cargo-msrv・Playwrightテストがゲートされていることが分かり、実際にmainブランチへ入るコードの品質基準が見えます。

04 / 成果物

何が手に入るのか導入後に手元に残るもの

手元で試すと、1つのRustコードベースからweb・desktop・fullstackなど複数ターゲットのUIアプリをビルドできる構成そのものと、状態管理(signals)や非同期アクション(use_action)、サーバー連携(server_functions)を含む多数の実例コードが手に入ります。CLIやビルド成果物としての実行可能ファイルまでは、今回提供された資料だけでは確認できません。

05 / 注意

ここは先に知っておいてください先に知っておくとよいこと

正直なところ誰にでも合うとは言いにくいところです。

提供されたREADME部分はdevcontainerの説明のみで、dxコマンドのインストール手順や実際の起動方法そのものはこの資料には含まれていません。

packages配下は40クレート近くにおよぶ大規模workspaceで、CIもlibwebkit2gtkなど多数のシステムライブラリ依存を要求しており、環境構築コストは低くないと見られます。

バージョンは0.8.0-alpha.1というプレリリース表記で、API安定性についてはこの資料だけでは判断できません。

geolocation-native-pluginの例はKotlin/Swiftのネイティブコードも含み、モバイル対応は単純なRustコードだけでは完結しない部分があると分かります。

06 / 結論

ギット飯の結論食べてみる価値のある一膳か

ギット飯の最終判断優良食堂

Reactライクな書き方をRustで行いつつ、web・desktop・mobile・フルスタックまで1コードベースで扱いたい人に向いています。examples配下の実例(bluetooth-scanner、ecommerce-site、hotdogなど)は具体的な非同期処理・状態管理・サーバー連携の書き方を示しており、コードの実在性は高いと判断できます。ただし今回のREADME抜粋はdevcontainer説明に限られるため、実際の初回セットアップ体験の細部はソースとCI構成からの推測にとどまる点は留意してください。