setting-up-tauri-projects

Tauri プロジェクトのセットアップ

Tauri とは？

Tauri は、主要なデスクトップおよびモバイルプラットフォーム向けに、小さく高速なバイナリを構築するためのフレームワークです。HTML／JS／CSS にコンパイルされる任意のフロントエンドと、バックエンド用の Rust を組み合わせます。

主な特徴：

• 最小構成のアプリは 600KB 未満にできます（ブラウザーをバンドルせず、システムの WebView を使用します）
• Rust を基盤とし、メモリー、スレッド、型の安全性を確保します
• ほぼすべてのフロントエンドフレームワークに対応しています
• クロスプラットフォーム：Windows、macOS、Linux、iOS、Android

システムの前提条件

macOS

# For desktop + iOS development
# Install Xcode from Mac App Store

# For desktop-only development (lighter option)
xcode-select --install

Windows

1. Microsoft C++ Build Tools：Visual Studio からダウンロードし、「C++ によるデスクトップ開発」を選択します
2. WebView2：Windows 10 v1803 以降ではプリインストールされています（必要に応じて手動でインストールします）
3. Rust ツールチェーン：

winget install Rustlang.Rustup
rustup default stable-msvc

Linux

Debian／Ubuntu：

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

Arch Linux：

sudo pacman -S webkit2gtk-4.1 base-devel curl wget file openssl \
  appmenu-gtk-module libappindicator-gtk3 librsvg xdotool

Fedora：

sudo dnf install webkit2gtk4.1-devel openssl-devel curl wget file \
  libappindicator-gtk3-devel librsvg2-devel libxdo-devel \
  @development-tools

Rust（すべてのプラットフォーム）

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

# Windows (PowerShell)
winget install Rustlang.Rustup

Node.js

JavaScript／TypeScript のフロントエンドでのみ必要です。nodejs.org から LTS 版をインストールします。

モバイル開発（任意）

Android（すべてのプラットフォーム）：

# Install Android Studio, then add Rust targets
rustup target add aarch64-linux-android armv7-linux-androideabi \
  i686-linux-android x86_64-linux-android

環境変数 JAVA_HOME、ANDROID_HOME、NDK_HOME を設定します

iOS（macOS のみ）：

# Requires full Xcode (not just Command Line Tools)
rustup target add aarch64-apple-ios x86_64-apple-ios aarch64-apple-ios-sim

# Install Cocoapods
brew install cocoapods

プロジェクトの作成

方法 1：create-tauri-app（推奨）

フレームワークのテンプレートを使って、対話形式でひな形を作成します。

# npm
npm create tauri-app@latest

# pnpm
pnpm create tauri-app

# yarn
yarn create tauri-app

# bun
bun create tauri-app

# cargo (no Node.js required)
cargo install create-tauri-app --locked
cargo create-tauri-app

# Shell scripts
sh <(curl https://create.tauri.app/sh)        # Bash
irm https://create.tauri.app/ps | iex         # PowerShell

表示されるプロンプト：

1. プロジェクト名
2. バンドル識別子（例：com.example.app）
3. フロントエンド言語：TypeScript／JavaScript、Rust、または .NET
4. パッケージマネージャー
5. UI テンプレート：vanilla、Vue、Svelte、React、SolidJS、Angular、Preact、Yew、Leptos、Sycamore

ひな形の作成後：

cd your-project
npm install
npm run tauri dev

方法 2：手動でセットアップ（既存のプロジェクト）

既存のフロントエンドプロジェクトに Tauri を追加します。

# 1. In your existing project, install Tauri CLI
npm install -D @tauri-apps/cli@latest

# 2. Initialize Tauri (creates src-tauri directory)
npx tauri init

tauri init のプロンプト：

• アプリ名
• ウィンドウのタイトル
• フロントエンドの開発サーバー URL（例：http://localhost:5173）
• フロントエンドのビルド出力ディレクトリ（例：dist）
• フロントエンドの開発コマンド（例：npm run dev）
• フロントエンドのビルドコマンド（例：npm run build）

# 3. Start development
npx tauri dev

プロジェクト構成

my-tauri-app/
├── package.json           # Frontend dependencies
├── index.html             # Frontend entry point
├── src/                   # Frontend source code
│   └── main.js
└── src-tauri/             # Rust backend
    ├── Cargo.toml         # Rust dependencies
    ├── Cargo.lock
    ├── build.rs           # Tauri build script
    ├── tauri.conf.json    # Main Tauri configuration
    ├── capabilities/      # Permission/capability definitions
    ├── icons/             # App icons (all formats)
    └── src/
        ├── lib.rs         # Main Rust code + mobile entry point
        └── main.rs        # Desktop entry point

主なファイル

tauri.conf.json - 主な設定：

{
  "productName": "my-app",
  "version": "0.1.0",
  "identifier": "com.example.my-app",
  "build": {
    "devUrl": "http://localhost:5173",
    "frontendDist": "../dist"
  },
  "app": {
    "windows": [{ "title": "My App", "width": 800, "height": 600 }]
  }
}

src/lib.rs - Rust アプリケーションのコード：

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

src/main.rs - デスクトップのエントリーポイント：

#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

fn main() {
    app_lib::run();
}

capabilities/ - JavaScript から呼び出せるコマンドを定義します：

{
  "identifier": "main-capability",
  "windows": ["main"],
  "permissions": ["core:default"]
}

よく使うコマンド

# Development with hot reload
npm run tauri dev

# Build production binary
npm run tauri build

# Generate app icons from source image
npm run tauri icon path/to/icon.png

# Add Android target
npm run tauri android init

# Add iOS target
npm run tauri ios init

# Run on Android
npm run tauri android dev

# Run on iOS simulator
npm run tauri ios dev

クイックリファレンス：対応するフロントエンドテンプレート

テンプレート	言語	備考
vanilla	JS、TS	フレームワークなし
react	JS、TS	Vite ベース
vue	JS、TS	Vite ベース
svelte	JS、TS	Vite ベース
solid	JS、TS	Vite ベース
angular	TS	Angular CLI
preact	JS、TS	Vite ベース
yew	Rust	Rust WASM フロントエンド
leptos	Rust	Rust WASM フロントエンド
sycamore	Rust	Rust WASM フロントエンド