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

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

みなさんこんにちは。

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

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

trdr

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

前提

環境や作ったコード

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

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

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

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

やったこと

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

事前準備

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

実行ログは以下

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コマンドを実行して依存関係を解決しておきます。

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側で以下のコードが出力されました。

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

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

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

プラグインインストール

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

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

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としてインポートしてますね。

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のやり方が載っていて、そのままやったらできました。素晴らしいですね。

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

おわりに

結論です。

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