Tauri(v2)でサンプルアプリ(ファイル読み込み)を作る※v1とv2の違い

# Tauri(v2)でサンプルアプリ(ファイル読み込み)を作る

みなさんこんにちは。

今日はTauri(v2)でサンプルアプリを作ってみます。

v1からの変更点があるので、特にその部分を注意点として書き残しておきます。

## trdr

Tauriはv1とv2で互換性はないから気をつけよう

## 前提

### 環境や作ったコード

（大したものじゃないですが）作ったアプリは以下に置いてあります。

https://github.com/aion0721/tauri-app

また、一旦macOSでやってますが、Windowsでも同じだと思います。

Rustが必要なので、事前にインストールしていることを前提にしています。

同じくReactを利用するので、Node.jsやYarnが導入されていることも前提です。

### やったこと

- 雛形からアプリ作成（フロントエンドはReactを選択)
- dialogとfsのPluginを導入してフロントエンド側で利用するように実装
- （おまけ）GithubActionsで自動ビルド※公式の指示通りにやっただけ

## 事前準備

以下を参考にしてアプリ作成

https://v2.tauri.app/start/create-project/#using-create-tauri-app

実行ログは以下

```terminal
macos:~ hogehoge$ yarn create tauri-app
yarn create v1.22.21
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-tauri-app@4.5.9" with binaries:
      - create-tauri-app
✔ Project name · tauri-app
✔ Identifier · com.tauri-app.app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
✔ Choose your package manager · yarn
✔ Choose your UI template · React - (https://react.dev/)
✔ Choose your UI flavor · TypeScript
```

Project名とかIdentifierとかそのままになってますね。
重要なのは、パッケージマネージャがYarn、UITemplateがReactになってればいいです。

あとは表示された指示通りに、yarnコマンドを実行して依存関係を解決しておきます。

```terminal
macos:~ hogehoge$ cd tauri-app/
macos:tauri-app hogehoge$ 
macos:tauri-app hogehoge$ 
macos:tauri-app hogehoge$ yarn 
yarn install v1.22.22
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 25.61s.
macos:tauri-app hogehoge$ 
```

そのあと、「yarn tauri dev」などをやってアプリがそのまま起動することを確認しておきます。（割愛）

## 実装

一番わかりやすい例で、ローカルのファイルを選択してそれを表示させるようにしてみます。

### LLMでは正しい情報を教えてくれない

2024/10/2にTauriはv2がリリースされました。
後方互換は結構なかったので、ChatGPTなどのLLMに聞いてもひたすらv1の情報が出てきて実行できなかったです。

具体的には、React側で以下のコードが出力されました。

```react
import { open } from '@tauri-apps/api/dialog';
import { readTextFile } from '@tauri-apps/api/fs';
```

これら（@tauri-apps/api/dialog）はv1の書き方で、v2ではそのままでは動きません。

で、きちんとガイドを読んでみるとインストールから使い方からきちんと解説されてました。

https://v2.tauri.app/plugin/dialog/

### プラグインインストール

公式の手順通りやってみます。

まずは、プラグインをインストールします。

 ```bash
macos:tauri-app hogehoge$ yarn run tauri add dialog
yarn run v1.22.22
$ tauri add dialog
    Info Installing Cargo dependency "tauri-plugin-dialog"...
    Info Installing NPM dependency "@tauri-apps/plugin-dialog@~2"...
    Added permission `dialog:default` to `default` at /Users/hogehoge/local/tauri-app/src-tauri/capabilities/default.json
    Info Adding plugin to /Users/hogehoge/local/tauri-app/src-tauri/src/lib.rs
    Info Running `cargo fmt`...
✨  Done in 13.31s.
macos:tauri-app hogehoge$
macos:tauri-app hogehoge$ yarn run tauri add fs
yarn run v1.22.21
$ tauri add fs
    Info Installing Cargo dependency "tauri-plugin-fs"...
    Info Installing NPM dependency "@tauri-apps/plugin-fs@~2"...
    Added permission `fs:default` to `default` at /Users/hogehoge/local/tauri-app/src-tauri/capabilities/default.json
    Info Adding plugin to /Users/hogehoge/local/tauri-app/src-tauri/src/lib.rs
    Info Running `cargo fmt`...
✨  Done in 9.76s.
macos:tauri-app hogehoge$
 ```

 今回はdialogとfsをセットアップします。

 ### React側のコード

 抜粋しますが、@tauri-apps/plugin-dialogとしてインポートしてますね。

```react
import { open } from "@tauri-apps/plugin-dialog";
import { readTextFile } from "@tauri-apps/plugin-fs";

  const handleFileOpen = async () => {
    try {
      const selected = await open({
        multiple: false,
        directory: false,
      });

      if (selected && typeof selected === "string") {
        const content = await readTextFile(selected);
        setFileContent(content);
      }
    } catch (error) {
      console.error("Error has occured when read file: ", error);
    }
  };
  ```

その他の部分はLLMで出力したものを（ほぼ）そのままで動いたので、用法などは変わってないのかなと思いました。

### （おまけ）GithubActionsで自動ビルド

これは、あまり本筋関係ないですが、以下の公式ガイドにGithubActionsのやり方が載っていて、そのままやったらできました。素晴らしいですね。

https://v2.tauri.app/distribute/pipelines/github/

インストーラではなく、そのままEXEもビルドできるはずなので、それで今度試してみようかなと思います。

## おわりに

結論です。

- 嫌がらずに公式ドキュメントを読む
    - 機械翻訳でもある程度読める。けどやっぱり理解は難しいので、何度か読むとかLLMとかを活用する必要はありそう
- PerplexityやChatGPT-4o,Claude 3.5 SonnetなどのLLMは一通り試しましたが、「v2のTauri」という指定をしてもv1のコードが出力されました。（体良く無視されたのかなと思います）
    - とはいえ、リリースが最近だからであって、学習されたらすぐに追いつくかも、と思いました
    - ただし、Perpexityに関しては検索してるので、きちんと最新で情報を出して欲しいなと思いました
- Tauriめっちゃ便利
    - Reactのコードがほぼそのまま移植できそうなので、アプリかが進みそう
    - けど、やっぱり「アプリ独自の考え方」は理解しておかないとつまづきそう