今回は、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に入力すると、いくつか選択事項がありますが、今回は下記の通りにしました。
まずは、初期画面を確認してみましょう。
次の画面が表示されたと思います。
(僕はMacを使っていますが、WindowsやLinuxだとウィンドウのレイアウトは異なります)

2. Rustからのイベント配信
Rustからランダムな数値を送って、Reactで表示するということをやりたいと思います。
まずはRust側のコードを記述していきます。
デフォルトで次のファイルが作成されている
event-example/src-tauri/src/main.rs
その中身を書き換えましょう。(大体流用しています。)
greet
はコマンドという機能を利用して実装されていますが、ここでは説明を割愛します。
簡単に説明しますと、reactから呼べるRustのAPIのようなものです。
今回学習しているEventと同様なものですね。(Eventは1対多が可能ですが)
実際にEventを配信しているのはこちらになります。
window.emit("get-number", num).unwrap();
"get-number"
がイベント名で、好きな名前をつけることができます。
また、num
がEventと共に配信されるデータになります。
また、rand
はデフォルトでは使えないので、tomlにライブラリを追加して利用できるようにします。
3. Reactでのイベント受信
続いてReact側の実装を行います。
Reactも既に作成されている
event-example/src/App.tsx
を編集していきます。(greetの名前は関係ないですが、そのまま利用しています。)
listen
とinvoke
がそれぞれEventとコマンドのAPIです。
invoke(コマンド名)で、Rustの方で用意したコマンドが呼ばれます。
また、listen<T>(イベント名, コールバック)
といった形で、イベントの購読ちをすることができます。
イベント名は、Rustで設定したものと同じですね。
コールバックでは、T
で指定した型として、引数を受けることができます。
unlisten()
は、購読の解除ができ、今回は一度イベントを受け取ったら購読解除をしています。
4. 動作確認
動作確認をしてみましょう。
正常に動いていれば、Press
というボタンをクリックすると、ボタンの下にランダムな数値が表示されます、

最終的なコードはこちらに置いておきます。
まとめ
今回は、RustとTauriとReactを使ってデスクトップアプリを作ってみました。
その中で、RustからReactにEventを配信する方法について紹介しました。
Eventは、Rustで定義した任意のメッセージやデータを、フロントエンドに送信することができるAPIです。
Eventを使うことで、RustとReactの間でデータのやりとりができます。
RustとTauriとReactは、それぞれ安全性やパフォーマンスや使いやすさに優れた技術です。
これらを組み合わせることで、軽量で高速なデスクトップアプリを作ることができます。
興味のある方は、ぜひ試してみてください。