このページ内容は2022年9月9日以降、再調査・再検証してません。実際に扱う際は最新の情報にアクセスしてください。

link
フレームワーク編
link
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テンプレート

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

パッケージマネージャーにyarnを選んだときの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の初期テンプレートを起動したときの画面

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;

自己紹介
はじめまして Pilefortです。
東京でエソジニアをしてます。
興味のあるスタックは、JavaScript (React, Vue), TypeScript, Rust, WebAssembly, AWS, Pulumi, Serverless Frameworkです。
このブログでは、普段の業務や趣味で気になったことをまとめたり、フロントやAWS, GitHubやTwitterで見かけた面白い記事やニュースをまとめるためのものです。少しでも何かの役に立てば幸いです。
最近の活動
技術書典13 (2022.9.10 - 2022.9.25) で本を出しました。
2022年の1月から8月ぐらいまでに登場したり、大幅なアップデートがあったWebサービスや開発ツール、ライブラリ、フレームワークを紹介した本です。
うぇぶちぇんじろぐ2023part1
XMind8ファイルをMarkdownファイルに変換するツールを作りました。
公式のxmind-sdk-jsのバージョンを下げて作ってます (最新版だと一部メソッドが削除されてるため)。
技術書典12 (2022.1.22 - 2022.1.30) で本を出しました。
2021年に登場したり、大幅なアップデートがあったWebサービスや開発ツール、ライブラリ、フレームワークを紹介した本です。
うぇぶちぇんじろぐ2022
サイトマップ
Notes
業務や趣味での気づき・メモ
Scraps
雑記。ネットで見つけた面白い記事やニュース
Snippets
記事にするまでもないけど、便利なコマンドや豆知識
Works
同人誌一覧