TAURIのインストールと関数呼び出し方法 #React

はじめに

この記事はデスクトップアプリ開発で徐々に人気がでてきているTAURIをいち早く知ることを目的にしています。

TAURIとは何か

デスクトップアプリケーションを作れる
アプリ構築ツールキット
安全でフロントエンドに依存しないアプリケーションを作れる
OS のネイティブ Web レンダラーを使用すると、Tauri アプリのサイズを小さくすることができ、Electronよりもサイズが小さくなる。

公式サイト

インストール方法

最も簡単な方法は create-tauri-app を使用することです。
HTML/CSS/JavaScript と、React、Svelte、Yew などの多くのフロントエンドフレームワーク用の独自のテンプレートが使用できます。

各種 `create-tauri-app` コマンド

お好きなコマンドを使用してください

Bash

sh <(curl https://create.tauri.app/sh)

Shell

irm https://create.tauri.app/ps | iex

Cargo

cargo install create-tauri-app --locked
cargo create-tauri-app

npm

npm create tauri-app@latest

Yarn

yarn create tauri-app

pnpm

pnpm create tauri-app

今回はYarnを使います

yarn create tauri-app
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-tauri-app@3.11.1" with binaries:
      - create-tauri-app
[#####] 5/5? Project name (tauri-app) ›

ここでプロジェクト名を決めます
今回はtestでいきます。

次にフロントエンド言語を選択します。

success Installed "create-tauri-app@3.11.1" with binaries:
      - create-tauri-app
✔ Project name · test
? Choose which language to use for your frontend ›
❯ TypeScript / JavaScript  (pnpm, yarn, npm, bun)
  Rust

今回はReactを使いたいのでTypeScript / JavaScriptを選択します。

次にパッケージマネージャを選択します。

success Installed "create-tauri-app@3.11.1" with binaries:
      - create-tauri-app
✔ Project name · test
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, bun)
? Choose your package manager ›
❯ yarn
  pnpm
  npm
  bun

今回はYarnでいきます。

次にUI templateを選択します。

success Installed "create-tauri-app@3.11.1" with binaries:
      - create-tauri-app
✔ Project name · test
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, bun)
✔ Choose your package manager · yarn
? Choose your UI template ›
❯ Vanilla
  Vue
  Svelte
  React
  Solid
  Angular
  Preact

ここではReactを選択します。

TypeScriptかJavaScriptを選択します。

success Installed "create-tauri-app@3.11.1" with binaries:
      - create-tauri-app
✔ Project name · test
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, bun)
✔ Choose your package manager · yarn
✔ Choose your UI template · React - (https://reactjs.org/)
? Choose your UI flavor ›
❯ TypeScript
  JavaScript

ここではTypeScriptでいきます。

そしたら、以下のコマンドを実行でアプリを起動できます。

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

指示に従って、コマンドを実行しましょう。

初回だと時間がかかると思いますが、待ちましょう。

開発時には以下のコマンドで起動し開発していきます。

yarn tauri dev

ホットリロード対応なので、変更がすぐに反映されます。
最高ですね

起動が完了すると、このようなウィンドウが出てくれば、インストール完了です。

フロントエンドからRustを呼び出す

1次情報を知りたい人は公式解説を見た方がいいです ↓

Web アプリから Rust 関数を呼び出すためのシンプルかつ強力な方法はcommand です。
コマンドの定義にはsrc-tauri/src/main.rsファイルで定義します。
普通にRustの関数を書いて、その上に[tauri::command]と注釈を付けるだけです(^^♪

また、ビルダー関数にコマンドのリストを提供する必要があります。

#[tauri::command]
fn my_custom_command() {
  println!("JSから呼び出させました!!");
}

fn main() {
  tauri::Builder::default()
    // ここでコマンドを渡します
    .invoke_handler(tauri::generate_handler![my_custom_command])
    .run(tauri::generate_context!())
    .expect("アプリの起動に失敗しました。");
}

これで、JS コードからコマンドを呼び出すことができます!!

// When using the Tauri API npm package:
import { invoke } from '@tauri-apps/api/tauri'
// When using the Tauri global script (if not using the npm package)
// Be sure to set `build.withGlobalTauri` in `tauri.conf.json` to true
const invoke = window.__TAURI__.invoke

// コマンド呼び出し
invoke('my_custom_command')

ここから先は引数の受け渡しと少しめんどうなことが増えてきます。

公式ドキュメントが最高にわかりやすいので、ここから先は、ご自身で調べてください。

公式ドキュメントが大好きです。

では良き、TAURIライフを。

TAURIのインストールと関数呼び出し方法