Tauriの基礎 - プロジェクトの作成

概要

Tauriは、Rustをバックエンドとし、Web技術 (HTML / CSS / JavaScript) をフロントエンドとして使用するクロスプラットフォームアプリケーション開発フレームワークである。
デスクトップ (Windows、MacOS、Linux) とモバイル (iOS、Android) の両プラットフォームに対応している。

システムのネイティブWebViewを活用することにより、最小600[KB]未満という極めて小さなバイナリサイズを実現している。
これは、ChromiumをバンドルするElectron等の従来フレームワークと比較して大幅な軽量化となっている。

フロントエンドにはReact、Vue、Svelte等のモダンなフレームワークを使用でき、TypeScriptによる型安全な開発もサポートされている。
バックエンドはRustで実装されるため、メモリ安全性と高いパフォーマンスを両立している。

create-tauri-app コマンドを使用することにより、対話式のセットアップによりプロジェクトを簡単に作成できる。

また、Viteをビルドツールとして使用し、ホットリロード機能により効率的な開発が可能である。

前提条件

Tauriプロジェクトを作成する前に、開発環境を準備する必要がある。

共通の要件

Node.js (LTS版)
バージョン18以上を推奨する。

npm、pnpm、yarn、bunのいずれかのパッケージマネージャを使用できること。
Rust (rustup)
Rustの公式ツールチェーンマネージャであるrustupを使用してRustをインストールする。

Windowsの要件

WebView2
Windows 10 (バージョン1803以降) および Windows 11には標準でインストールされている。
Visual Studio Build Tools
Visual Studioインストーラを起動して、[C++によるデスクトップ開発]ワークロードをインストールする。

 winget install --id Rustlang.Rustup

MacOSの要件

Xcode Command Line Tools
xcode-select --install でインストールする。
MacOS Catalina (10.15) 以降

 curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh

Linuxの要件

Linuxディストリビューション別の依存パッケージ

Linuxディストリビューション

インストールコマンド

RHEL

sudo dnf install curl wget file make gcc gcc-c++ \
                 openssl-devel librsvg2-devel gtk3-devel webkit2gtk4.1-devel libappindicator-gtk3-devel

SUSE

sudo zypper install curl wget file make gcc gcc-c++ \
                    libopenssl-devel librsvg-devel gtk3-devel webkit2gtk3-devel libappindicator3-devel

Debian

sudo apt install build-essential curl wget file \
                 libssl-dev libgtk-3-dev librsvg2-dev libwebkit2gtk-4.1-dev libayatana-appindicator3-dev

create-tauri-appによるプロジェクト作成

create-tauri-app コマンドは、Tauriプロジェクトを簡単に作成するための公式ツールである。

インストール方法

create-tauri-appの実行コマンド一覧
環境	コマンド
Bash / Zsh (Linux / MacOS)	`sh <(curl https://create.tauri.app/sh)`
Fish	sh
PowerShell (Windows)	iex
npm	`npm create tauri-app@latest`
pnpm	`pnpm create tauri-app`
yarn	`yarn create tauri-app`
bun	`bun create tauri-app`

コマンドラインオプション

コマンドラインオプション一覧
オプション	説明
`--template`	使用するテンプレートを指定する。例: react-ts、vue、svelte
`--manager`	パッケージマネージャを指定する。 npm、pnpm、yarn、bun
`--yes`	デフォルト設定でプロジェクトを作成する。
`--ci`	CI環境向けの非対話モードで実行する。

pnpm create tauri-app <アプリケーション名> --template react-ts

対話式セットアップの流れ

プロジェクト名の入力
デフォルトではカレントディレクトリ名が使用される。
パッケージマネージャの選択
pnpm、yarn、npm、bun、denoから選択する。
フロントエンド言語の選択
TypeScript (推奨)、JavaScript、Rust、.NETから選択する。
UIテンプレートの選択
Vanilla、Vue、Svelte、React、Solid、Angular、Preactなどから選択可能である。

React + TypeScriptテンプレート

使用方法

pnpm create tauri-app <アプリケーション名> --template react-ts

テンプレート一覧

フロントエンドテンプレート一覧
フレームワーク	TypeScript	JavaScript
Vanilla	vanilla-ts	vanilla
Vue	vue-ts	vue
Svelte	svelte-ts	svelte
React	react-ts	react
Solid	solid-ts	solid
Angular	angular	-
Preact	preact-ts	preact
Yew (Rust)	yew	-
Leptos (Rust)	leptos	-
Blazor (.NET)	blazor	-

TypeScript版と JavaScript版の違い

TypeScript版を使用するメリットを以下に示す。

型安全性によるコンパイル時のエラー検出
IDEでの優れた自動補完サポート
リファクタリングの容易さ

生成されるファイル構造

my-app/
├── src/                    # フロントエンドソースコード
│   ├── main.tsx            # エントリーポイント
│   └── App.tsx             # メインコンポーネント
├── src-tauri/              # Tauriバックエンド (Rust)
│   ├── src/                # Rustソースコード
│   ├── tauri.conf.json     # Tauri設定ファイル
│   └── Cargo.toml          # Rust依存関係
├── index.html              # HTMLエントリーポイント
├── package.json            # Node.js依存関係
└── vite.config.ts          # Vite設定

既存プロジェクトへのTauri追加 ==

既に存在するWebフロントエンドプロジェクトにTauriを追加することも可能である。

Tauri CLIのインストール

pnpm add -D @tauri-apps/cli@latest

tauri initの実行

pnpm tauri init

tauri initの対話フロー

アプリケーション名の入力
デフォルトはパッケージ名
ウィンドウタイトルの入力
アプリケーションウインドウのタイトル
開発サーバURLの入力
例: http://localhost:5173
フロントエンドビルド出力先の入力
例: ../dist
devコマンドの入力
例: pnpm dev
buildコマンドの入力
例: pnpm build

Vite設定

vite.config.ts

 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
 const host = process.env.TAURI_DEV_HOST;
 
 export default defineConfig({
   plugins: [react()],
   clearScreen: false,
   server: {
     port: 5173,
     strictPort: true,
     host: host || false,
     hmr: host ? { protocol: 'ws', host, port: 1421 } : undefined,
     watch: { ignored: ['**/src-tauri/**'] },
   },
   envPrefix: ['VITE_', 'TAURI_ENV_*'],
   build: {
     target: process.env.TAURI_ENV_PLATFORM == 'windows' ? 'chrome105' : 'safari13',
     minify: !process.env.TAURI_ENV_DEBUG ? 'esbuild' : false,
     sourcemap: !!process.env.TAURI_ENV_DEBUG,
   },
 });

設定項目の解説

vite.config.tsの主な設定項目
設定項目	説明
`plugins: [react()]`	React用のViteプラグインを有効にする。
`clearScreen: false`	Tauri開発サーバとの統合のため、コンソール画面のクリアを無効にする。
`server.port: 5173`	開発サーバのポート番号 `tauri.conf.json` の `devUrl` と一致させる。
`server.strictPort: true`	指定したポートが使用できない場合にエラーにする。
`server.host`	環境変数 `TAURI_DEV_HOST`が設定されている場合、そのホストでリッスンする。モバイル開発で重要
`server.hmr`	ホットモジュールリプレースメント (HMR) の設定モバイル開発時はWebSocketを使用
`server.watch.ignored`	`src-tauri/` ディレクトリの変更を監視対象から除外する。
`envPrefix`	環境変数のプレフィックスとして、`VITE_` と `TAURI_ENV_*` を使用する。
`build.target`	ビルドターゲットをプラットフォームに応じて設定 WindowsではChrome 105、それ以外ではSafari 13
`build.minify`	デバッグビルドでは無効化し、本番ビルドではesbuildを使用する。
`build.sourcemap`	デバッグビルドでのみソースマップを生成する。

tauri.conf.jsonとの連携

 {
   "build": {
     "beforeDevCommand": "pnpm dev",
     "beforeBuildCommand": "pnpm build",
     "devUrl": "http://localhost:5173",
     "frontendDist": "../dist"
   }
 }

tauri.conf.jsonのbuild設定項目
設定項目	説明
`beforeDevCommand`	開発サーバ起動前に実行するコマンド
`beforeBuildCommand`	ビルド実行前に実行するコマンド
`devUrl`	開発時のフロントエンドURL
`frontendDist`	ビルド済みフロントエンド資産の配置ディレクトリ

開発サーバの起動

tauri devコマンド

# pnpmの場合
pnpm tauri dev

# npmの場合
npm run tauri dev

# cargoの場合
cargo tauri dev

初回起動と2回目以降の違い

初回起動時
Rustの依存クレートのダウンロードとコンパイルが行われる。

初回コンパイルには数分かかる場合がある。
2回目以降
増分ビルドにより高速に起動する。

変更されたファイルのみが再コンパイルされる。

ポート設定

開発サーバのポート番号は、vite.config.ts と tauri.conf.json で整合性を保つ必要がある。

環境変数

Tauri開発環境変数
環境変数	説明
`TAURI_DEV_HOST`	モバイル開発時に開発サーバがリッスンするホストアドレス
`TAURI_ENV_PLATFORM`	現在のプラットフォーム (windows、linux、darwin)
`TAURI_ENV_DEBUG`	デバッグモードの場合に設定される。

ホットリロード

フロントエンドHMR

Viteのホットモジュールリプレースメント (HMR) 機能により、フロントエンドの変更が即座に反映される。

Viteがファイルの変更を検知する
WebSocketを通じてブラウザ (WebView) に通知される
変更されたモジュールのみが置換され、ページ全体のリロードは不要
アプリケーションの状態 (フォーム入力値など) が保持される

Rust自動再コンパイル

Rustバックエンドの変更時も、自動的に再コンパイルとアプリケーションの再起動が行われる。

src-tauri/ ディレクトリ内のRustファイルの変更が監視される。
変更検知時に自動的に再コンパイルが開始される。
コンパイル完了後にアプリケーションが自動的に再起動される。

開発モードの判定方法

Rust側

 #[cfg(debug_assertions)]
 fn is_dev() -> bool { true }

フロントエンド側
```
 const isDev = import.meta.env.DEV;
```

モバイル開発の設定

Tauri 2.0以降では、iOSとAndroidのモバイルアプリケーション開発がサポートされている。

iOS開発の設定

MacOS環境 (必須)
Xcode (最新版)
Apple Developerアカウント (実機デプロイの場合)

# iOSターゲットの追加
rustup target add aarch64-apple-ios

# iOS開発の初期化
pnpm tauri ios init

# iOSシミュレータでの実行
pnpm tauri ios dev

Android開発の設定

Android SDK
Android NDK
Java Development Kit (JDK) 17以上

# Androidターゲットの追加
rustup target add aarch64-linux-android

# Android開発の初期化
pnpm tauri android init

# Androidエミュレータでの実行
pnpm tauri android dev

TAURI_DEV_HOST環境変数

モバイル開発時、環境変数 TAURI_DEV_HOST は開発サーバがリッスンすべきホストアドレスを示す。

デフォルト
パブリックネットワークアドレスが使用される。
iOS実機
TUNアドレス (IPv6アドレスで末尾が ::2 ) を使用
設定
--force-ip-prompt オプションで対話的にIPアドレスを選択可能

トラブルシューティング

共通の問題

共通トラブルシューティング
問題	解決方法
Rustのコンパイルエラー	`rustup update` コマンドを実行して、でRustを最新版に更新する。
ポートが使用中	`lsof -i :5173` で確認し、プロセスを終了する。
モジュールが見つからない	`pnpm install` コマンドを再実行する。
キャッシュの問題	`rm -rf node_modules && pnpm install` を実行する。

プラットフォーム別の問題

プラットフォーム別トラブルシューティング
プラットフォーム	問題	解決方法
Windows	WebView2が見つからない	Edge WebView2からインストール
Windows	ビルドツールエラー	Visual Studio Build Toolsをインストールする。
MacOS	Xcode関連エラー	`xcode-select --install` を実行する。
Linux	webkit2gtkエラー	webkit2gtk-4.1パッケージをインストールする。
Linux	リンカエラー	MakeやGCC等の開発ライブラリをインストールする。

新規プロジェクト作成の流れ

# 1. プロジェクトの作成
pnpm create tauri-app my-tauri-app --template react-ts

# 2. プロジェクトディレクトリに移動
cd my-tauri-app

# 3. 依存関係のインストール
pnpm install

# 4. 開発サーバの起動
pnpm tauri dev

CI環境での非対話プロジェクト作成

# CI/CDパイプラインでの使用例
pnpm create tauri-app my-app --template react-ts --manager pnpm --yes

cd my-app

pnpm install
pnpm tauri build