概要

Rust というプログラミング言語をご存じでしょうか？

www.rust-lang.org

Rust は 2006 年に開発が始まった比較的新しいプログラミング言語で、その処理速度や性能の高さから Microsoft や Google でも新サービスの開発に利用しているほどの注目を集めている OSS になります。

Rust は独自の言語設計によるメモリ安全性が実現されており、ほかの名だたる企業なども採用を進めているなど近年非常に注目を集めています。

そんな注目を大いに集めている Rust において、クロスプラットフォームのユーザーインターフェースを構築することが可能な OSS を見つけましたので、ご紹介したいと思います。

今回ご紹介する OSS は、ウェブアプリ、デスクトップアプリ、静的サイト、モバイルアプリ、ライブビューなどの数多くのマルチプラットフォームに対応したアプリを作成することができる「Dioxus」になります。

公式サイトなどを見るとデザインなども凝っており、とても力を入れていることがわかります。

それでは早速詳細についてみていきましょう！

特徴

「Dioxus」の特徴としては以下の点が挙げられていました。

10 行以下のコードでネイティブに動作するデスクトップアプリが開発可能（Electron は不要）
人間工学に基づいたパワフルな状態管理
包括的なインラインドキュメント、すべての HTML 要素、リスナー、イベント周りのガイドを完備
驚異的な実行速度とメモリ効率を実現
高速開発を行うことが可能なホットリロード機能
コルーチンとサスペンスによるファーストクラスの非同期サポート

ほかにも素晴らしい特徴はたくさんありますので、より詳細を把握したい方は以下の公式ドキュメントを参照ください。

docs.rs

対応プラットフォーム

Web	WebAssembly を使って DOM に直接レンダリングする SSR でプレレンダリングし、クライアントの上で再ハイドレーションシンプルな "hello world "は約 65kb で、React と同等開発サーバーを内蔵し、ホットリロードで迅速なイテレーションを実現
デスクトップ	ウェブビューを使ったレンダリング、あるいは実験的に WGPU や Skia を使ったレンダリング設定不要。cargo-run を実行するだけで、アプリをビルド可能電子的な IPC を必要としないネイティブシステムアクセスの完全サポート macOS、Linux、Windows に対応。ポータブルで 3 mb より小さなバイナリ
モバイル	ウェブビューを使ったレンダリング、あるいは実験的に WGPU や Skia を使ったレンダリング iOS と Android をサポート React ネイティブよりも大幅にパフォーマンスが高い
ライブビュー	アプリケーション、または単一のコンポーネントを完全にサーバー上でレンダリング Axum や Warp のような人気のある Rust フレームワークとの統合極めて低いレイテンシーと 10,000 以上の同時アプリをサポートする能力
ターミナル	ink.js のように、アプリケーションをターミナルに直接レンダリングブラウザでおなじみのフレックスボックスと CSS モデルを採用テキスト入力、ボタン、フォーカスシステムなどの組み込みウィジェット

利用手順

前提条件

「Dioxus」はプログラミング言語 Rust がインストールされている前提になりますので、まだインストールされていない方は以下の公式サイトからインストールをお願いします。

www.rust-lang.org

手順

ここでは「Dioxus」を使用して、Hello, world! を表示させる簡単なアプリ作成の方法について記載します。

プロジェクトのビルドや最適化、開発サーバの立ち上げなどアプリ開発時に必要なツールをインストールします。

cargo install dioxus-cli

また、以下のビルドターゲットを Rust のターゲットとして追加します。

rustup target add wasm32-unknown-unknown

その後はプロジェクトを作成します。

cargo new --bin demo
cd demo

その後、「Dioxus」を使用したアプリを作成するのに必要なライブラリを追加します。

cargo add dioxus
cargo add dioxus-web

その後、main.rs を以下の内容に書き換えます。

#![allow(non_snake_case)]
// import the prelude to get access to the `rsx!` macro and the `Scope` and `Element` types
use dioxus::prelude::*;

fn main() {
    // launch the web app
    dioxus_web::launch(App);
}

// create a component that renders a div with the text "Hello, world!"
fn App(cx: Scope) -> Element {
    cx.render(rsx! {
        div {
            "Hello, world!"
        }
    })
}

保存後、「Dioxus」を実行すると Web アプリとしてブラウザ上に「Hello, world!」が表示されるようになります。

dx serve

Hello, world!

上記のような方法で、「Dioxus」のアプリを簡単に作成することが可能です。

今回上げた手順や公式サイトを参考に、「Dioxus」を使ったアプリの構築を行ってみるとよいでしょう。

dioxuslabs.com

まとめ

fn app() -> Element {
    let mut count = use_signal(|| 0);

    rsx! {
        h1 { "High-Five counter: {count}" }
        button { onclick: move |_| count += 1, "Up high!" }
        button { onclick: move |_| count -= 1, "Down low!" }
    })
}