Tauriの基礎 - プロジェクトの作成
提供: MochiuWiki : SUSE, EC, PCB
概要
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ディストリビューション | インストールコマンド |
|---|---|
| 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プロジェクトを簡単に作成するための公式ツールである。
インストール方法
| 環境 | コマンド |
|---|---|
| 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の入力
- フロントエンドビルド出力先の入力
- 例: ../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,
},
});
設定項目の解説
| 設定項目 | 説明 |
|---|---|
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"
}
}
| 設定項目 | 説明 |
|---|---|
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_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
