【Rust】Tauriを使ってみる

2023年8月12日Linux,Rust,Windows,環境構築

こんにちは、しきゆらです。

今回は、ずっと放置しているRust関連のネタです。
Tauriというフレームワークを使ってみたいなと思ったので環境を作って初回実行までしてみます。

Tauriとは

Tauriは、ElectronのようなWeb技術でデスクトップアプリを作れるRust製のフレームワークです。
Electronと同じく、クロスプラットフォームのアプリを作成でき、Electronよりもインストーラサイズやメモリ使用量が小さく軽量という代物のようです。

裏側はRustで作られており、フロントはJavaScriptで制御する形になってます。
TauriはOS標準のWebView機能を利用しており、アプリ自体にChromiumが入っているわけではないため軽量・高速に動いてくれるようです。

環境構築

では、環境構築から動かしてみます。 ここではWSL2上のUbuntu 23.04に作っていきます。

$ > lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 23.04
Release:        23.04
Codename:       lunar

Rust/Nodeの環境構築

過去投稿していますがRust・Nodeの環境構築はこの辺を参考にしてください。
・・・というか、実際今回の環境構築のためにNodeのバージョンを最新にしようとしたときに一部詰まったところがありましたが、ググってみたら出てきた自分の記事で解消できたので、本当に下記の手順を参考にしてます。

ありがとう、過去の自分。

【ruby/rust】バージョン管理をasdfにまとめる | しきゆらの備忘録

【WSL/node】asdfでnodeをインストールし、yarnも使えるようにする | しきゆらの備忘録

Tauriを入れる

今回のメイン、Tauriを導入します。
Tauri公式サイトに色々手順がありますが、上記手順でYarnを使っているのでYarnで環境作っていきます。

$ yarn create tauri-app

Yarnからtauri-appを叩くとTauriのテンプレートを作ってくれます。
いくつか質問されるので、画面に従って回答するといい感じにフロントエンドのフレームワークなども含めて環境を作ってくれます。

✔ Project name · kanban
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm)
✔ Choose your package manager · yarn
✔ Choose your UI template · React - (<https://reactjs.org/>)
✔ Choose your UI flavor · TypeScript

Template created! To get started run:
  cd kanban
  yarn
  yarn tauri dev

ここではTypeScript・Reactを指定しています。
これで準備は完了。

最後にある3行を実行すればもう動くようになっています。
実行すると、こんな感じでサンプルが立ち上がります。

では、作成されたファイル構成を見てみます。

$ > tree -L 3
.
├── README.md
├── index.html
├── node_modules
├── package.json
├── public
│   ├── tauri.svg
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── assets
│   │   └── react.svg
│   ├── main.tsx
│   ├── styles.css
│   └── vite-env.d.ts
├── src-tauri
│   ├── Cargo.lock
│   ├── Cargo.toml
│   ├── build.rs
│   ├── icons
│   │   ├── 128x128.png
│   │   ├── 128x128@2x.png
│   │   ├── 32x32.png
│   │   ├── Square107x107Logo.png
│   │   ├── Square142x142Logo.png
│   │   ├── Square150x150Logo.png
│   │   ├── Square284x284Logo.png
│   │   ├── Square30x30Logo.png
│   │   ├── Square310x310Logo.png
│   │   ├── Square44x44Logo.png
│   │   ├── Square71x71Logo.png
│   │   ├── Square89x89Logo.png
│   │   ├── StoreLogo.png
│   │   ├── icon.icns
│   │   ├── icon.ico
│   │   └── icon.png
│   ├── src
│   │   └── main.rs
│   ├── target
│   │   ├── CACHEDIR.TAG
│   │   └── debug
│   └── tauri.conf.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock

10 directories, 37 files

src配下がフロントエンドの部分、src-tauri配下がTauri/バックエンド部分のソース置き場になってます。
今回はフロント部分しか触っていませんが、例えばデータベースと連携したりファイル操作をしたいなどがあればsrc-tauri配下のバックエンド部分を書き換えたり追加したりすることになるかと思います。

フロントエンドを更新してみる

では、src/App.tsxを変更してみましょう。

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import { invoke } from "@tauri-apps/api/tauri";
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/v1/guides/features/command>
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <div className="container">
      <h1>Welcome to Tauri!</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>
      {/* 以下を追加 */}
      <div>Hello tauri!</div>
    </div>
  );
}

export default App;

入力欄下に表示されていればOKです。

なお、起動中でも良しなに再読み込みしてくれるようで、Tauriのウィンドウを表示させつつtsxファイルを更新すればいい感じで再読み込みしてくれるようです。 いちいちコード修正後に再度立ち上げなおす、としなくても修正が反映されるので気軽に開発ができそうです。

その他: VSCodeでtsxファイルでエラーばかりになる

その他困ったところとして、VSCodeの問題がありました。 なお、手元のYarnはv3.6.1でした。

Yarn v2からnode_modulesにパッケージがはいるかたちではなくなったので、VSCode側ではそのままだと各パッケージを参照できずにエラーを吐いてしまいました。

調べてみると、対処方法は公式ページにありました。

上記を参考に、コマンドを実行します。

yarn dlx @yarnpkg/sdks vscode

これを実行すると、.vscode/settings.jsonに以下の2行が追加される。

"typescript.tsdk": ".yarn/sdks/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true

この後、tsxファイルを開きコマンドパレットを開きSelect TypeScript Versionを選択します。
TypeScriptのバージョンを指定すればエラーが解消するはずです。

なお、上記2行がVSCode上で以下のような文言で無効状態になっている場合は VSCodeから直接該当フォルダを開くことで解消できます。

This setting cannot be applied in this workspace. It will be applied when you open the containing workspace folder directly.

手元の環境では、Workspaceを作って簡単にアクセスできるようにしていましたが Workspaceから開くと上記の文言が出て無効状態になってしまってました。

まとめ

今回は、Rust製のWeb技術でマルチプラットフォームアプリが作れる、というフレームワークであるTauriの環境を作ってサンプルを少し動かしてみました。

さっくり触った印象だと、Electronよりもとっつきやすい印象でした。
そして、Rustを触りたいので放置していたRustの勉強を進めようと思いました。

今回は、ここまで。

おわり

Posted by しきゆら