Tauri 2.0を使ってRustでデスクトップアプリを書いていこうな

2024-12-12

はじめに

最近ブログの更新も、趣味のアプリ開発のしていなかったので再開していこうかと思った次第です。

久しぶりにやるならRustを書きたい。そしてクロスプラットフォーム対応のスマホアプリが作れるものがないかしらと探したらあるじゃないですが、軽量GUI対応のTauri 2.0。 24年10月に安定版がリリースされたらしく、できたて感があります。

早速試していきましょう。

適用範囲

Tauri 2.0を使ってデスクトップアプリを作っていきます。

Tauri 2.0

ざっくりとは、Webフロントの技術でGUIを作って、裏側をRustで書くというような構造になっているようです。フロントはReactで書いて、バックエンドをRustというような感じもできそうですね。

Electronというのが類似でありますがそれよりもメモリも実行体も軽量ってことのようです。

何はともあれハローワールドからですね。

試していきましょう

Tauri のインストール

cargo install create-tauri-app --locked

Tauri CLIのインストール

Tauri CLIが足りないとテンプレート作成時に出てしまう場合はこちらをインストールしましょう。

Template created!

Your system is missing dependencies (or they do not exist in $PATH):
╭───────────┬───────────────────────────────────────────────────────────╮
│ Tauri CLI │ Run `cargo install tauri-cli --version '^2.0.0' --locked` │
╰───────────┴───────────────────────────────────────────────────────────╯

言われるがままにインストールすればよいです。

cargo install tauri-cli --version '^2.0.0' --locked

Rust バージョンが古いらしいので

Rust書くのが久々なのでアップデートしてねとエラーがでましたね。

  Downloaded windows-sys v0.52.0
  Downloaded windows-sys v0.48.0
  Downloaded 60 crates (14.2 MB) in 3.52s (largest was `windows-sys` at 2.6 MB)
error: failed to compile `create-tauri-app v4.5.7`, intermediate artifacts can be found at `C:\Users\kenpo\AppData\Local\Temp\cargo-installs3AzHK`

Caused by:
  package `create-tauri-app v4.5.7` cannot be built because it requires rustc 1.71 or newer, while the currently active rustc version is 1.62.1

rustup update

プロジェクトファイルの作成

cargo create-tauri-app

いくつかの質問に答える形式なので言われたとおりに回答しました。

✔ Project name · HelloWorld
✔ Package name · helloworld
✔ Identifier · dev.kenpos.helloworld
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
✔ Choose your package manager · yarn
✔ Choose your UI template · React - (https://react.dev/)
✔ Choose your UI flavor · TypeScript

Template created! To get started run:
  cd HelloWorld
  yarn
  yarn tauri android init

For Desktop development, run:
  yarn tauri dev

For Android development, run:
  yarn tauri android dev

テンプレートが出力されました。

Choose which language to use for your frontend でcargo(Rust)を選ぶと、GUIのベースがあまり馴染みのない子達が選択肢にでます。 TypeScriptかJavaScriptを選ぶのが無難かと思います。

UIテンプレートがいくつかあるようで比較してくれているZennの記事が見つかりました。

Tauri 2.0で使えるRust UIテンプレートの比較

ライブラリの名前はどうも植物や花の名前を使うのが好きね。バックエンドは錆なのにフロントエンドはキレイにしようってことか。

出力されるコード

フロントエンドとバックエンドでフォルダを分けて出力してくれいるようです。

Rust

バックエンドの部分はとてもシンプルですね。

main.rs

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

fn main() {
    helloworld_lib::run()
}

lib.rs

// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! You've been greeted from Rust!", name)
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_shell::init())
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

React

GUI部分。Reactのまんまですね。

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";

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

  async function greet() {
    // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <main className="container">
      <h1>Welcome to Tauri + React</h1>

      <div className="row">
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" className="logo vite" alt="Vite logo" />
        </a>
        <a href="https://tauri.app" target="_blank">
          <img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <p>Click on the Tauri, Vite, and React logos to learn more.</p>

      <form
        className="row"
        onSubmit={(e) => {
          e.preventDefault();
          greet();
        }}
      >
        <input
          id="greet-input"
          onChange={(e) => setName(e.currentTarget.value)}
          placeholder="Enter a name..."
        />
        <button type="submit">Greet</button>
      </form>
      <p>{greetMsg}</p>
    </main>
  );
}

export default App;

実行すると

実際に、実行するとこのように表示されます。

yarn tauri dev

ブラウザでも実行できます。

しばらくするとデスクトップアプリとしても立ち上がります。これどちらかだけで良くないかい？とは思いますがいいですね。

ボタンを押すと、lib.rsで出力した文字列をReact側で取得しているようです。

かなりシンプルそうな作りですね。

まとめ

触り部分だけですが、読み解いていけそうなぐらいシンプルに作られているので良さそうです。クロスプラットフォームですが、スマホ対応とかやりだすとFlutterのときのように結構沼にハマりそうな気配がプンプンするのですが… フロントエンドに馴染のある人が始めるのにちょうどいい感じしません？

Next.jsやNuxt.jsやVue.jsにも対応しているようなので色々できそうですね。

とりあえず、私はSBI証券から保有している株式一覧で取得して、それぞれの株に対していくらになったら売るのかという戦略を書き出して整理したいと思っていたのでそのアプリを作りってみたいなと思っています。 Rustがバックエンドで動くのと、複数端末で動かすのならSQL LiteかJSON辺りでデータ持たせるようにしておけば互換性が保てるかしらと。アプリ自体はAWSとかに繋ぐのも1つだけどローカルで完結してほしいんですよね。

まずは調べるところからなのでのんびりやっていきましょう。