Tauri 2.0 をさわってみる

プロジェクトを作る

We recommend starting with the vanilla template (HTML, CSS, and JavaScript without a frontend framework) to get started. You can always integrate a frontend framework later.

オススメの設定でプロジェクトを作成する

❯ cargo install create-tauri-app --locked
❯ cargo create-tauri-app
✔ Project name · tauri-v2-sample-app
✔ Identifier · {適当に}
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
✔ Choose your package manager · pnpm
✔ Choose your UI template · Vanilla
✔ Choose your UI flavor · TypeScript

Template created! To get started run:
  cd tauri-v2-sample-app
  pnpm install
  pnpm tauri android init
  pnpm tauri ios init

For Desktop development, run:
  pnpm tauri dev

For Android development, run:
  pnpm tauri android dev

For iOS development, run:
  pnpm tauri ios dev

torotaku

開発サーバを起動する

❯ cd tauri-v2-sample-app
❯ pnpm install
Packages: +16
++++++++++++++++
Progress: resolved 67, reused 16, downloaded 0, added 16, done
node_modules/.pnpm/esbuild@0.24.2/node_modules/esbuild: Running postinstall script, done in 343ms

dependencies:
+ @tauri-apps/api 2.2.0
+ @tauri-apps/plugin-opener 2.2.2

devDependencies:
+ @tauri-apps/cli 2.2.0
+ typescript 5.6.3 (5.7.2 is available)
+ vite 6.0.7

Done in 4.1s

❯ pnpm tauri dev
... ログ省略
   Compiling tauri-macros v2.0.4
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 37.71s
     Running `target/debug/tauri-v2-sample-app`
2025-01-03 10:32:51.309 tauri-v2-sample-app[5957:55397] +[IMKClient subclass]: chose IMKClient_Modern
2025-01-03 10:32:51.337 tauri-v2-sample-app[5957:55397] +[IMKInputSession subclass]: chose IMKInputSession_Modern

無事起動出来ました

torotaku

これを試す

src-tauri/src/lib.rs に文字列を出力する my_custom_command を追加する

src-tauri/src/lib.rs

     format!("Hello, {}! You've been greeted from Rust!", name)
 }
 
+#[tauri::command]
+fn my_custom_command() {
+    println!("I was invoked from JavaScript!");
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
         .plugin(tauri_plugin_opener::init())
-        .invoke_handler(tauri::generate_handler![greet])
+        .invoke_handler(tauri::generate_handler![greet, my_custom_command])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

src/main.ts から my_custom_command を呼び出す

src/main.ts

     greet();
   });
 });
+
+invoke('my_custom_command');

開発サーバを起動すると I was invoked from JavaScript! が出力出来ていることを確認できる

❯ pnpm tauri dev
...snip...
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 0.27s
     Running `target/debug/tauri-v2-sample-app`
I was invoked from JavaScript!
2025-01-03 18:40:49.170 tauri-v2-sample-app[19236:196790] +[IMKClient subclass]: chose IMKClient_Modern
2025-01-03 18:40:49.251 tauri-v2-sample-app[19236:196790] +[IMKInputSession subclass]: chose IMKInputSession_Modern