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


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

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

### 公式サイト
https://tauri.app/

## インストール方法
https://tauri.app/v1/guides/getting-started/setup/

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

### 各種 `create-tauri-app` コマンド
お好きなコマンドを使用してください

#### Bash
```bash
sh <(curl https://create.tauri.app/sh)
```
#### Shell
```powershell
irm https://create.tauri.app/ps | iex
```
#### Cargo
```powershell
cargo install create-tauri-app --locked
cargo create-tauri-app
```
#### npm
```powershell
npm create tauri-app@latest
```
#### Yarn
```powershell
yarn create tauri-app
```
#### pnpm
```powershell
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
```
指示に従って、コマンドを実行しましょう。

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

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

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

起動が完了すると、このようなウィンドウが出てくれば、インストール完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2206442/7e74825e-8522-8405-07e5-d80ba7db6317.png)

## フロントエンドからRustを呼び出す
1次情報を知りたい人は公式解説を見た方がいいです ↓

https://tauri.app/v1/guides/features/command

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

また、ビルダー関数にコマンドのリストを提供する必要があります。
```rust
#[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 コードからコマンドを呼び出すことができます!!

```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')
```


https://tauri.app/v1/guides/features/command/

では良き、TAURIライフを。