Rust 製のデスクトップアプリ開発フレームワークの Tauri を触ってみる

こんにちは、 @kz_morita です。

今回は、こちらの記事で紹介されていた、Electron の代替を目指すデスクトップアプリ開発のフレームワークである、Tauri を触ってみます。

環境構築

Tauri は以下で公開されています。

https://github.com/tauri-apps/tauri

自分の環境は macOS なので以下を参考に構築しました。

https://tauri.studio/docs/getting-started/setting-up-macos

以下のコマンドで、アプリを作成します。

$ yarn create tauri-app

プロジェクト名と、Windowのタイトルと、初期セットアップを設定します。

初期セットアップは、React やら Vue やら、バニラやらを選択できます。

バニラを選択すると以下のようなディレクトリ構造になりました。

.
├── dist
│   └── index.html
├── node_modules/
│   ├── @tauri-apps
│   │   ├── api/
│   │   ├── cli/
│   │   └── cli-darwin-arm64
│   │       ├── README.md
│   │       ├── cli.darwin-arm64.node
│   │       └── package.json
│   └── type-fest
│       ├── index.d.ts
│       ├── license
│       ├── package.json
│       ├── readme.md
│       └── source/
├── package.json
├── src-tauri
│   ├── Cargo.lock
│   ├── Cargo.toml
│   ├── build.rs
│   ├── icons/
│   ├── src
│   │   └── main.rs
│   ├── target/
│   └── tauri.conf.json
└── yarn.lock

以下のコマンドで実行することができます。

# yarn
$ yarn run tauri dev

# cargo
$ cd ./src-tauri
$ cargo run

実行すると以下のような画面が表示されます。

Rust 側との連携

Tauri は、Backend 側を Rust で書くことができるため、View を HTML / CSS / JavaScript で記述して、ロジックを Rust で書いたりすることができそうです。

Rust と JavaScript で連携して、カウンターを実装すると以下のようになります。

Rust 側

Rust 側は以下のようなコードになります。

/src-tauri/src/main.rs

#![cfg_attr(
    all(not(debug_assertions), target_os = "windows"),
    windows_subsystem = "windows"
)]

use std::sync::atomic::{AtomicI32, Ordering};

// カウンタ変数 
// Rust 側で State 管理ができる 
struct IncrementValue(AtomicI32);

// tauri::command マクロをつけることで、FrontEnd 側から呼び出せるようになる
// tauri::State を引数に取ることで State にアクセスできる
#[tauri::command]
fn increment(state: tauri::State<IncrementValue>) -> i32 {

    // Rust で出した標準出力は、アプリを実行しているコンソールに表示される
    println!("incremented!!");

    // カウントアップ
    state.0.fetch_add(1, Ordering::SeqCst) + 1
}

fn main() {
    tauri::Builder::default()
        .manage(IncrementValue(AtomicI32::new(0))) // Stateの初期化と設定
        .invoke_handler(tauri::generate_handler![increment]) // increment を handler として登録
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

やっていることは、

JavaScript から呼び出す increment 関数の定義
Stateを定義
関数、State を設定

といったあたりです。これを View 側から呼び出していきます。

View 側

/dist/index.html

HTML はカウントアップ用のボタンと数字表示用のエリアを用意しているだけです。のちに紹介する index.js も読み込んでおきます。

<!DOCTYPE html>
<html>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
  <body>
    <h1>tauri-sample</h1>
    <button id="increment_btn">Increment</button>
    <div id="result">0</div>
    <script src="index.js"></script>
  </body>
</html>

/dist/index.js

// Rust 側のコードを呼び出すための invoke メソッド
// JS から呼び出すには、設定ファイルを修正する必要がある (後述)
const invoke = window.__TAURI__.invoke

const button = document.getElementById("increment_btn");
const resultView = document.getElementById("result");

button.addEventListener('click', (e) => {
  // JS 側のログは、WebView側の devtool で見れる
  console.log("Add increment button");

  // invoke は Promise が帰ってくるので、then や、catch で処理をかける
  // Rust 側で Result 型を返せば Error の時に catch 節が呼び出されるという挙動になる。
  invoke("increment").then((res) => resultView.innerText = res);
});

/tauri-src/tauri.conf.json

JS 側から invoke を呼び出すためには設定ファイルに以下を追加する必要があります。

{
  "package": {
    "productName": "tauri-sample",
    "version": "0.1.0"
  },
  "build": {
    "distDir": "../dist",
    "devPath": "../dist",
    "beforeDevCommand": "",
    "beforeBuildCommand": "",
    "withGlobalTauri": true // <- ここを追加
  },
  "tauri": {
      // ...
  }
}

"withGlobalTauri": true を追加することで、JS から invoke メソッドが呼べるようになります。

これらを記載して実行すると以下のように、カウンタが実装できます。

Tauri の実装パターンについて

Rust と JavaScript (TypeScript) でロジックを書くことができますが、どちらに処理を寄せるかなどは実装者が決めることができそうですが公式のドキュメントでいくつかの実装パターンが紹介されています。

以下のようなパターンが紹介されています。

個人的には、できるだけロジックを Rust 側に持っていくのが良さそうかなーとなんとなく思っていますが、上記で言うと、Lockdown がそのアーキテクチャに当たりそうです。

まとめ

今回は、Rust でコアの実装がされている Desktopアプリ開発のフレームワークである Tauri を簡単に触って試してみました。

Rust に慣れていれば、ロジックを Rust で書け、View 側とうまく分割できそうなので良さそうだなと思いました。面白そうなプロダクトなのでいろいろ試してみようと思いました。

こんにちは、 @kz_morita です。今回は、自転車本と言われている「実践Rust入門言語仕様から開発手法まで」を読んだのでその感想を書いていこうと思います。実践Rust入門言語仕様から開発手法まで目次目次は以下のような感じです。第1章 Rustの特徴第2章はじめてのRustプログラム第3章クイックツアー第4章プリミティブ型第5章ユーザー定義型第6章基本構文第7章所有権システム第8章トレイトとポリモーフィズム第9章パーサを作る第10章パッケージを作る第11章 Webアプリケーション・データベース接続第12章 FFI 最初に、環境の構築と簡単なプログラムを紹介して、次に基本的な文法などから、所有権・トレイト・ライフタイムなどのRust のコアな部分までの解説があります。最後に、パーサ、Webアプリケーション、FFIという実践的な内容に触れるといった順番で書かれていました。感想などこの書籍では、最初にRustの起源から始まり、実用的なアプリケーションの例まで一通り記されていました。最初に Rust を触ったときに何か Swift に似ていると感じたのですが、Rust 開発者の Hoare 氏が Apple でSwift を開発しているということをこの書籍で知って、なるほどなぁと思ったのが印象的でした。そして書籍全体の中でもなんといっても一番面白かったのは、7章と8章です。 Rustの醍醐味である、所有権システムの仕組みはやはり魅力的に感じました。コンパイラが、メモリ安全性を担保するという思想はとても魅力的だし、それを実現する仕組みも本当にすごいなと感じました。はじめはむずかしいなと感じたのですが、前職で C++ を書いてたおかげでなんとか理解できた気がしてます。（ムーブセマンティクスとかあったので）所有権に関しては、以下の記事でもまとめてありますので、よかったら見てみてください。 Rustの所有権についてライフタイムについても、以下の記事でまとめました。 Rustのライフタイムについてそして、その次の parser を作る以降の章では、実際にコードの作り方や Rust の作法みたいなところを学ぶことができたのがとても良かったです。書いていて驚いたのは、cargo を始めとするエコシステムが整っているのは非常によいなぁということと、コンパイルエラーのメッセージがとても丁寧でわかりやすいということでした。エコシステムに関しては、インストールはコマンド一発ですし、Rust自体のバージョンアップも rustup で一発でできたり、cargo で便利な crate が簡単に使えるところはさすがだなぁと思いました。