今回は、RustとTauriとReactを使ってデスクトップアプリを作ってみました。
その中で、RustからReactにEventを配信する方法について紹介したいと思います。
RustとTauriとReactとは
まずは、今回使った技術について簡単に説明します。
- Rustは、安全性やパフォーマンスに優れたシステムプログラミング言語です。コンパイル時にメモリ管理や型チェックを行うことで、バグやクラッシュを防ぎます。
- Tauriは、Rustでデスクトップアプリを作るためのツールキットです。フロントエンドのフレームワークを使ってUIを作り、Rustでバックエンドのロジックを実装します。Tauriは、WebviewやWebkitなどのレンダリングエンジンを使って、軽量で高速なアプリケーションを作成できます。
- Reactは、Facebookが開発したJavaScriptのライブラリです。コンポーネントベースの開発や仮想DOMなどの機能を提供し、UIの作成や更新を簡単にします。
前提
今回は、Rustやnpm（nodejs）などが事前にインストールされている前提で進めていきます。
まだの方は次のページを参考に準備をして下さい。
Rust/window準備: tauri準備ページ（環境にあった準備をして下さい）
npm(nodejs): インストールページ
Rust（Tauri）のEventとは？
RustからReactに対して直接APIを呼び合うことはできません。
そこで、TauriではRustとReactを繋ぐEventを用意して、フロントエンドとバックエンドの連動をしやすくしています。
実際に動作を確認していきましょう
1. プロジェクトの作成
npm create tauri-app@latest プロジェクト名
のコマンドで、「プロジェクト名」のフォルダーが作成されます。
コマンドをShellに入力すると、いくつか選択事項がありますが、今回は下記の通りにしました。
$ npm create tauri-app@latest event-example
npx: 2個のパッケージを2.682秒でインストールしました。
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm)
✔ Choose your package manager · npm
✔ Choose your UI template · React - (https://reactjs.org/)
✔ Choose your UI flavor · TypeScript
まずは、初期画面を確認してみましょう。
$ cd event-example
$ npm install
$ npm run tauri dev
次の画面が表示されたと思います。
（僕はMacを使っていますが、WindowsやLinuxだとウィンドウのレイアウトは異なります）
2. Rustからのイベント配信
Rustからランダムな数値を送って、Reactで表示するということをやりたいと思います。
まずはRust側のコードを記述していきます。
デフォルトで次のファイルが作成されている
event-example/src-tauri/src/main.rs
その中身を書き換えましょう。（大体流用しています。）
// event-example/src-tauri/src/main.rs
// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
use tauri::Window;
// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
#[tauri::command]
fn greet(window: Window) {
let num = rand::random::();
window.emit("get-number", num).unwrap();
}
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![greet])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
greetはコマンドという機能を利用して実装されていますが、ここでは説明を割愛します。
簡単に説明しますと、reactから呼べるRustのAPIのようなものです。
今回学習しているEventと同様なものですね。（Eventは１対多が可能ですが）
実際にEventを配信しているのはこちらになります。
window.emit("get-number", num).unwrap();
"get-number"がイベント名で、好きな名前をつけることができます。
また、numがEventと共に配信されるデータになります。
また、randはデフォルトでは使えないので、tomlにライブラリを追加して利用できるようにします。
// event-example/src-tauri/Cargo.toml
[package]
name = "event-example"
version = "0.0.0"
description = "A Tauri App"
authors = ["you"]
license = ""
repository = ""
edition = "2021"
rust-version = "1.57"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[build-dependencies]
tauri-build = {version = "1.2", features = [] }
cxx-build = {version = "1.0"}
cc = {version = "1.0.78"}
[dependencies]
serde_json = "1.0"
serde = { version = "1.0", features = ["derive"] }
tauri = {version = "1.2", features = ["api-all"] }
tiff = { version = " 0.8.1"}
cxx = { version = "1.0"}
url = { version = "2", features = ["serde"] }
[features]
# by default Tauri runs in production mode
# when `tauri dev` runs it is executed with `cargo run --no-default-features` if `devPath` is an URL
default = [ "custom-protocol" ]
# this feature is used used for production builds where `devPath` points to the filesystem
# DO NOT remove this
custom-protocol = [ "tauri/custom-protocol" ]
[profile.dev]
opt-level = 0
[profile.release]
opt-level = 3
debug = false
[build]
target-dir = "dist"
rustflags = ["-C", "link-arg=-s"]
3. Reactでのイベント受信
続いてReact側の実装を行います。
Reactも既に作成されている
event-example/src/App.tsx
を編集していきます。（greetの名前は関係ないですが、そのまま利用しています。）
listenとinvokeがそれぞれEventとコマンドのAPIです。
invoke(コマンド名)で、Rustの方で用意したコマンドが呼ばれます。
また、listen<T>(イベント名, コールバック)
といった形で、イベントの購読ちをすることができます。
イベント名は、Rustで設定したものと同じですね。
コールバックでは、Tで指定した型として、引数を受けることができます。
unlisten()は、購読の解除ができ、今回は一度イベントを受け取ったら購読解除をしています。
4. 動作確認
動作確認をしてみましょう。
$ npm run tauri dev
正常に動いていれば、Pressというボタンをクリックすると、ボタンの下にランダムな数値が表示されます、
最終的なコードはこちらに置いておきます。
まとめ
今回は、RustとTauriとReactを使ってデスクトップアプリを作ってみました。
その中で、RustからReactにEventを配信する方法について紹介しました。
Eventは、Rustで定義した任意のメッセージやデータを、フロントエンドに送信することができるAPIです。
Eventを使うことで、RustとReactの間でデータのやりとりができます。
RustとTauriとReactは、それぞれ安全性やパフォーマンスや使いやすさに優れた技術です。
これらを組み合わせることで、軽量で高速なデスクトップアプリを作ることができます。
興味のある方は、ぜひ試してみてください。