フレームワーク編

tauri

tauriはデスクトップアプリケーションを開発 (将来的にはモバイルアプリケーションも開発) するためのフレームワークで、UI部分はWebViewを利用し、アプリのバックエンドはRustを使います^tauri。

ちなみにWebViewはビルド時に統合されず、起動するプラットフォームごとに自動で切り替わるため、アプリのパッケージサイズが小さくなります^tauri_build。

tauriではパッケージマネージャーとして、cargoやyarn, npm, pnpmなどが選択できます。cargoを選択した場合はvanilla JSかyew (Rust) を選択でき、pnpm, yarn, npmを選択した場合はvanilla JS, Vue, Svelte, React, Solid, Next.js, PreactをTypeScriptの有無を含め選択できます。Roadmapは提供されてませんが、コードを見た感じだとAngular, Nuxt, Gatsbyあたりもサポートしそうでした^{tauri_ui_support}。あと、現状バックエンドはRustで固定ですが、将来的にGo, Nim, Python, C#を利用可能にするそうです^{tauri_backend_support}。

パッケージマネージャーにcargoを選んだときのUIテンプレート

パッケージマネージャーにyarnを選んだときのUIテンプレート

初期テンプレートで作成すると、以下のようなディレクトリ構成になります。srcディレクトリはUI部分を書くところで、テンプレート作成時に選択したライブラリ・フレームワークのコードが追加されます。src-tauriディレクトリはRustのコードを追加する部分で、パフォーマンスやメモリ安全性を高めたいときに使います。

1
tauri-sample-app
2
 ├── public
3
 ├── src
4
 ├── src-tauri
5
 ├── index.html
6
 ├── package.json
7
 ├── tsconfig.json
8
 ├── tsconfig.node.json
9
 └── vite.config.ts

ちなみに初期テンプレートを起動すると以下のような、入力した名前を表示するデスクトップアプリを起動できます。

tauriの初期テンプレートを起動したときの画面

srcディレクトリでUI, src-tauriディレクトリでRustのコードを書きますが、Rust側で定義したメソッドを使うのも簡単にできます。まず、Rust側で以下のようにinvoke_handlerで関数を登録します。

src-tauri/src/main.rs
1
#[tauri::command]
2
fn greet(name: &str) -> String {
3
    format!("Hello, {}! You've been greeted from Rust!", name)
4
}
5

6
fn main() {
7
    tauri::Builder::default()
8
        .invoke_handler(tauri::generate_handler![greet])
9
        .run(tauri::generate_context!())
10
        .expect("error while running tauri application");
11
}

その次に、UI側でinvoke APIを使ってRust関数を呼び出すことで、Rust側で定義したメソッドを利用できます。

src/App.tsx
1
import { useState } from "react";
2
import reactLogo from "./assets/react.svg";
3
import { invoke } from "@tauri-apps/api/tauri";
4
import "./App.css";
5

6
function App() {
7
  const [greetMsg, setGreetMsg] = useState("");
8
  const [name, setName] = useState("");
9

10
  async function greet() {
11
    setGreetMsg(await invoke("greet", { name }));
12
  }
13

14
  return (
15
    <div>
16
      // ...
17
      // input要素に入力された値をボタンを押したら表示する
18
      <div>
19
        <input onChange={(e) => setName(e.currentTarget.value)} />
20
        <button type="button" onClick={() => greet()}>Greet</button>
21
      </div>
22

23
      <p>{greetMsg}</p>
24
    </div>
25
  );
26
}
27

28
export default App;