Tauri は、Web 技術を活用してクロスプラットフォームのデスクトップアプリケーションを開発できる革新的なフレームワークです。従来の Electron と比較して、バイナリサイズが小さく、メモリ使用量も少ないという優れた特徴を持っています。しかし、Node.js、Rust、WebView という 3 つの異なる技術スタックを組み合わせるため、開発環境の構築には適切な手順と理解が必要です。

この記事では、Tauri の開発環境を最短ルートで構築する方法を、初心者の方にもわかりやすく段階的に解説いたします。各ステップで発生しやすいエラーや注意点も含めて、確実に動作する環境を作り上げることができるでしょう。

開発環境セットアップの全体像

Tauri 開発環境の構築は、以下の技術要素を正しい順序で準備することが重要です。

mermaidCopy codeflowchart TD
    start["環境構築開始"] --> node["Node.js 環境構築"]
    node --> rust["Rust 環境構築"]
    rust --> webview["WebView ランタイム準備"]
    webview --> tauricli["Tauri CLI インストール"]
    tauricli --> project["プロジェクト作成"]
    project --> verify["動作確認"]
    verify --> done["開発開始可能"]

    node -.-> npm["npm/yarn/pnpm"]
    rust -.-> cargo["Cargo"]
    webview -.-> os["OS別対応"]

上図が示すように、Node.js → Rust → WebView → Tauri CLI の順序で構築することで、依存関係のトラブルを避けながら効率的に環境を整えることができます。各段階での検証も重要なポイントですね。

構築時間の目安と準備事項

項目	所要時間	主な作業内容
Node.js 環境	10-15 分	インストール・動作確認
Rust 環境	15-20 分	rustup・Cargo 設定
WebView 準備	5-30 分	OS 別ランタイム準備
Tauri CLI	5-10 分	CLI インストール・検証
初回プロジェクト	10-15 分	作成・ビルド・動作確認

Windows 環境では WebView2 のインストールに時間がかかる場合があります。macOS と Linux では比較的スムーズに進行するでしょう。

Node.js 環境の構築

Node.js は Tauri アプリケーションのフロントエンド部分を開発するために必要な JavaScript ランタイム環境です。Tauri では React、Vue、Svelte、Vanilla JavaScript など、お好みのフロントエンドフレームワークを選択できます。

Node.js のインストール

Node.js の安定版（LTS 版）をインストールすることをお勧めいたします。複数のプロジェクトを扱う予定がある場合は、バージョン管理ツールの使用も検討してください。

公式サイトからのインストール（推奨）

bashCopy code# バージョン確認
node --version
npm --version

Node.js 18.x 以上のバージョンが推奨されます。古いバージョンを使用している場合は、最新の LTS 版にアップデートしてください。

バージョン管理ツールを使用する場合

bashCopy code# nvm（Node Version Manager）の使用例
nvm install --lts
nvm use --lts
nvm alias default node

bashCopy code# 動作確認
node --version  # v18.17.0 以上が表示されることを確認
npm --version   # 9.x.x 以上が表示されることを確認

パッケージマネージャーの選択（npm/yarn/pnpm）

Tauri プロジェクトでは npm、yarn、pnpm のいずれも使用できます。それぞれの特徴を理解して、プロジェクトに適したものを選択しましょう。

npm（標準パッケージマネージャー）

bashCopy code# npm の場合（Node.js に同梱）
npm --version
npm config set registry https://registry.npmjs.org/

yarn のインストールと設定

bashCopy code# yarn のインストール
npm install -g yarn

# バージョン確認
yarn --version

pnpm のインストールと設定

bashCopy code# pnpm のインストール
npm install -g pnpm

# バージョン確認
pnpm --version

開発ツールの準備

効率的な開発を行うために、エディターとその拡張機能を準備します。

Visual Studio Code の推奨拡張機能

jsonCopy code{
  "recommendations": [
    "rust-lang.rust-analyzer",
    "tauri-apps.tauri-vscode",
    "bradlc.vscode-tailwindcss",
    "esbenp.prettier-vscode"
  ]
}

上記の設定を .vscode​/​extensions.json として保存すると、チーム開発時に統一された開発環境を構築できます。

開発環境の動作確認

bashCopy code# Node.js パッケージの基本的な動作確認
mkdir tauri-test-env
cd tauri-test-env
npm init -y

bashCopy code# package.json の確認
cat package.json

この段階で Node.js 環境が正常に動作していることを確認しました。次に Rust 環境の構築に進みましょう。

Rust 環境の構築

Rust は Tauri アプリケーションのバックエンド部分（デスクトップアプリの核となる部分）を担当する高性能なシステムプログラミング言語です。メモリ安全性と高いパフォーマンスを両立できるため、Tauri が軽量で高速なアプリを実現できる重要な要素となっています。

Rust ツールチェーンのインストール

Rust の公式インストーラーである rustup を使用してインストールします。rustup により、Rust コンパイラー、Cargo パッケージマネージャー、その他の必要なツールが自動的にインストールされます。

Windows での rustup インストール

powershellCopy code# PowerShell で実行
# rustup-init.exe をダウンロードして実行
Invoke-WebRequest -Uri "https://win.rustup.rs/x86_64" -OutFile "rustup-init.exe"
.\rustup-init.exe

macOS/Linux での rustup インストール

bashCopy code# ターミナルで実行
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# 環境変数を読み込み
source ~/.cargo/env

インストール確認とバージョン確認

bashCopy code# Rust コンパイラーのバージョン確認
rustc --version

# Cargo のバージョン確認
cargo --version

# rustup のバージョン確認
rustup --version

Rust 1.70.0 以上のバージョンが表示されることを確認してください。古い場合は以下のコマンドでアップデートできます。

bashCopy code# Rust の最新版へアップデート
rustup update stable

Cargo の設定

Cargo は Rust のパッケージマネージャーであり、ビルドシステムでもあります。Tauri プロジェクトでは Cargo を使用して Rust 部分のビルドと依存関係管理を行います。

Cargo の基本設定

bashCopy code# Cargo の設定ディレクトリ作成
mkdir -p ~/.cargo

# 基本的な config.toml の作成
touch ~/.cargo/config.toml

config.toml の推奨設定

tomlCopy code[source.crates-io]
replace-with = "vendored-sources"

[source.vendored-sources]
directory = "vendor"

[build]
jobs = 4  # 並列ビルド数の指定

[target.x86_64-pc-windows-msvc]
linker = "link.exe"  # Windows 用リンカー設定

必要なクレートの準備

Tauri 開発でよく使用されるクレート（Rust のライブラリパッケージ）を事前に確認しておきます。

Tauri プロジェクトの主要依存関係

tomlCopy code# Cargo.toml の [dependencies] セクション例
[dependencies]
tauri = { version = "1.0", features = ["api-all"] }
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"
tokio = { version = "1.0", features = ["full"] }

Rust 開発環境の動作確認

bashCopy code# Hello World プロジェクトで動作確認
cargo new rust-hello-world
cd rust-hello-world

bashCopy code# ビルドと実行
cargo build
cargo run

"Hello, world!" が表示されれば、Rust 環境が正常に構築されています。

追加の開発ツールインストール

bashCopy code# Rust 用の便利なツールをインストール
cargo install cargo-edit    # 依存関係管理の簡素化
cargo install cargo-watch   # ファイル変更の自動検出

これで Rust 環境の構築が完了しました。次に各プラットフォームでの WebView ランタイムの準備に進みます。

WebView ランタイムの準備

WebView は Tauri アプリケーションでフロントエンドの Web コンテンツを表示するために使用されるコンポーネントです。各オペレーティングシステムで異なる WebView 実装が使用されるため、プラットフォーム固有の準備が必要になります。

プラットフォーム別 WebView の理解

Tauri が各 OS で使用する WebView の種類と特徴を理解することで、開発時の動作の違いを把握できます。

mermaidCopy codeflowchart LR
    tauri["Tauri App"] --> windows["Windows<br/>WebView2"]
    tauri --> macos["macOS<br/>WKWebView"]
    tauri --> linux["Linux<br/>WebKitGTK"]

    windows --> edge["Microsoft Edge<br/>Chromium"]
    macos --> safari["Safari WebKit"]
    linux --> webkit["WebKit Engine"]

上図のように、Tauri は各プラットフォームのネイティブ WebView を活用することで、システムリソースの効率的な利用と各 OS との高い親和性を実現しています。

プラットフォーム別 WebView の特徴

OS	WebView 種類	基盤エンジン	特徴
Windows	WebView2	Chromium	別途インストール必要
macOS	WKWebView	WebKit	OS 標準搭載
Linux	WebKitGTK	WebKit	ディストリビューション依存

Windows での WebView2 セットアップ

Windows 環境では Microsoft WebView2 ランタイムの明示的なインストールが必要です。これは Tauri アプリケーションが動作するための必須コンポーネントとなります。

WebView2 ランタイムの確認

powershellCopy code# PowerShell で WebView2 の存在確認
Get-ItemProperty HKLM:\SOFTWARE\WOW6432Node\Microsoft\EdgeUpdate\Clients\{F3017226-FE2A-4295-8BDF-00C3A9A7E4C5} -Name pv -ErrorAction SilentlyContinue

WebView2 ランタイムのダウンロードとインストール

powershellCopy code# Evergreen Standalone Installer のダウンロード
$url = "https://go.microsoft.com/fwlink/p/?LinkId=2124703"
$output = "$env:TEMP\MicrosoftEdgeWebview2Setup.exe"
Invoke-WebRequest -Uri $url -OutFile $output

powershellCopy code# サイレントインストールの実行
Start-Process -FilePath $output -ArgumentList "/silent /install" -Wait

Visual Studio Build Tools の確認（必要に応じて）

powershellCopy code# Build Tools の確認
where cl.exe

Build Tools が見つからない場合は、Microsoft C++ Build Tools のインストールが必要です。

powershellCopy code# Visual Studio Installer のダウンロード例
$vsUrl = "https://aka.ms/vs/17/release/vs_buildtools.exe"
$vsOutput = "$env:TEMP\vs_buildtools.exe"
Invoke-WebRequest -Uri $vsUrl -OutFile $vsOutput

macOS・Linux での対応

macOS での WebView 準備

macOS では WKWebView が OS に標準搭載されているため、追加のインストールは不要です。

bashCopy code# macOS のバージョン確認（macOS 10.15 以上推奨）
sw_vers -productVersion

# Xcode Command Line Tools の確認
xcode-select --version

Xcode Command Line Tools がインストールされていない場合：

bashCopy code# Xcode Command Line Tools のインストール
xcode-select --install

Linux での WebView 準備

Linux ディストリビューションでは WebKitGTK の手動インストールが必要な場合があります。

Ubuntu/Debian 系での依存関係インストール

bashCopy code# 必要なパッケージのインストール
sudo apt update
sudo apt install libwebkit2gtk-4.0-dev \
    build-essential \
    curl \
    wget \
    libssl-dev \
    libgtk-3-dev \
    libayatana-appindicator3-dev \
    librsvg2-dev

CentOS/RHEL/Fedora 系での依存関係インストール

bashCopy code# dnf を使用したパッケージインストール
sudo dnf install webkit2gtk3-devel \
    openssl-devel \
    curl \
    wget \
    gtk3-devel \
    libappindicator-gtk3-devel \
    librsvg2-devel

Arch Linux での依存関係インストール

bashCopy code# pacman を使用したパッケージインストール
sudo pacman -S webkit2gtk \
    base-devel \
    curl \
    wget \
    openssl \
    gtk3 \
    libappindicator-gtk3 \
    librsvg

WebView 動作確認

bashCopy code# WebKitGTK の動作確認（Linux）
pkg-config --modversion webkit2gtk-4.0

この段階で各プラットフォームの WebView ランタイムが正常に準備されました。次に Tauri CLI のインストールとプロジェクト初期化に進みましょう。

Tauri CLI とプロジェクト初期化

Tauri CLI は Tauri アプリケーションの開発、ビルド、配布を統合的に管理するコマンドラインツールです。プロジェクトの作成から本番環境へのデプロイまで、開発ワークフロー全体をサポートします。

Tauri CLI のインストール

Tauri CLI は Cargo（Rust のパッケージマネージャー）を使用してインストールします。グローバルインストールにより、任意のディレクトリから Tauri コマンドを実行できるようになります。

Cargo を使用した CLI インストール

bashCopy code# Tauri CLI のインストール
cargo install tauri-cli

# インストールの確認
cargo tauri --version

インストールが完了すると、tauri-cli x.x.x のようなバージョン情報が表示されます。

代替インストール方法（npm 経由）

bashCopy code# npm を使用したインストール（オプション）
npm install -g @tauri-apps/cli

# バージョン確認
npx tauri --version

CLI 機能の確認

bashCopy code# 利用可能なコマンドの一覧表示
cargo tauri help

# 主要コマンドの確認
cargo tauri init --help
cargo tauri dev --help
cargo tauri build --help

プロジェクトの作成

Tauri CLI を使用して新しいプロジェクトを作成します。対話式のセットアップにより、プロジェクトの基本設定を簡単に行えます。

新規プロジェクトの作成

bashCopy code# プロジェクトディレクトリの作成と移動
mkdir my-tauri-app
cd my-tauri-app

# Tauri プロジェクトの初期化
cargo tauri init

初期化プロセスで以下の項目について質問されます：

textCopy code? What is your app name? › my-tauri-app
? What should the window title be? › My Tauri App
? Where are your web assets (HTML/CSS/JS) located? › ../dist
? What is the url of your dev server? › http://localhost:1420
? What is your frontend dev command? › npm run dev
? What is your frontend build command? › npm run build

プロジェクト構造の確認

bashCopy code# 生成されたファイル構造の確認
tree -a -I 'node_modules|target'

textCopy codemy-tauri-app/
├── .gitignore
├── .vscode/
│   └── extensions.json
├── README.md
├── index.html
├── main.js
├── package.json
├── src-tauri/
│   ├── .gitignore
│   ├── Cargo.toml
│   ├── build.rs
│   ├── icons/
│   ├── src/
│   │   └── main.rs
│   └── tauri.conf.json
├── style.css
└── vite.config.js

初回ビルドの実行

プロジェクトが正しく作成されたことを確認するため、開発サーバーの起動と初回ビルドを実行します。

開発サーバーの起動

bashCopy code# フロントエンドの依存関係インストール
npm install

# 開発サーバーの起動
cargo tauri dev

初回起動時は Rust の依存関係のコンパイルが実行されるため、数分程度の時間がかかります。

ビルドプロセスの確認

textCopy code    Updating crates.io index
   Compiling proc-macro2 v1.0.66
   Compiling unicode-ident v1.0.11
   ...
   Compiling my-tauri-app v0.0.0
    Finished dev [unoptimized + debuginfo] target(s)

アプリケーションの起動確認

開発サーバーが正常に起動すると、デスクトップアプリケーションウィンドウが表示されます。

mermaidCopy codesequenceDiagram
    participant Dev as 開発者
    participant CLI as Tauri CLI
    participant Frontend as フロントエンド
    participant Backend as Rust Backend
    participant App as アプリケーション

    Dev->>CLI: cargo tauri dev
    CLI->>Frontend: npm run dev 実行
    CLI->>Backend: Rust コンパイル
    Frontend-->>CLI: Web サーバー起動
    Backend-->>CLI: バイナリ生成
    CLI->>App: アプリケーション起動
    App-->>Dev: デスクトップアプリ表示

上図のように、cargo tauri dev コマンドにより、フロントエンドとバックエンドが連携してアプリケーションが起動します。

本番ビルドの実行

bashCopy code# 本番用ビルドの実行
cargo tauri build

bashCopy code# ビルド成果物の確認
ls -la src-tauri/target/release/

ビルドが成功すると、実行可能ファイルとインストーラーが生成されます。

開発環境の動作確認

構築した開発環境が正常に動作することを確認するため、Hello World アプリケーションの作成とカスタマイズを行います。また、効率的な開発を支援するホットリロード機能とデバッグ環境についても設定いたします。

Hello World アプリの作成

基本的な Tauri アプリケーションを拡張して、フロントエンドとバックエンドの連携動作を確認しましょう。

フロントエンドの基本実装

htmlCopy code<!-- index.html の基本構造 -->
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>My Tauri App</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <h1>Hello Tauri!</h1>
      <div class="row">
        <a href="https://vitejs.dev" target="_blank">
          <img
            src="/vite.svg"
            class="logo vite"
            alt="Vite logo"
          />
        </a>
      </div>
    </div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

JavaScript でのバックエンド連携

javascriptCopy code// main.js - Tauri API を使用したバックエンド連携
const { invoke } = window.__TAURI__.tauri;

// DOM 要素の取得
const greetBtn = document.querySelector('#greet-btn');
const greetMsg = document.querySelector('#greet-msg');

// バックエンドの関数を呼び出す
async function greet() {
  const name = 'Tauri';
  const message = await invoke('greet', { name });
  greetMsg.textContent = message;
}

// イベントリスナーの設定
if (greetBtn) {
  greetBtn.addEventListener('click', greet);
}

Rust バックエンドの関数実装

rustCopy code// src-tauri/src/main.rs
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

// Tauri の必要なモジュールをインポート
use tauri::Manager;

// フロントエンドから呼び出し可能な関数
#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! You've been greeted from Rust!", name)
}

#[tauri::command]
fn get_system_info() -> String {
    format!("OS: {}", std::env::consts::OS)
}

rustCopy code// main 関数とアプリケーションの設定
fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet, get_system_info])
        .setup(|app| {
            println!("Tauri アプリケーションが起動しました");
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

ホットリロードの設定

開発効率を向上させるため、フロントエンドとバックエンドの変更を自動的に反映するホットリロード機能を設定します。

Vite 設定によるフロントエンドホットリロード

javascriptCopy code// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  // Tauri が期待するクリアランス設定
  clearScreen: false,
  server: {
    port: 1420,
    strictPort: true,
    // ホットリロードの詳細設定
    hmr: {
      port: 1421,
    },
  },
  // 開発時の環境変数
  envPrefix: ['VITE_', 'TAURI_'],
  build: {
    target:
      process.env.TAURI_PLATFORM == 'windows'
        ? 'chrome105'
        : 'safari13',
    minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
    sourcemap: !!process.env.TAURI_DEBUG,
  },
});

Cargo Watch によるバックエンドホットリロード

bashCopy code# cargo-watch のインストール（まだの場合）
cargo install cargo-watch

# Rust コードの変更を監視
cargo watch -x "tauri dev"

開発用スクリプトの設定

jsonCopy code{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "tauri": "tauri",
    "tauri:dev": "tauri dev",
    "tauri:build": "tauri build"
  }
}

デバッグ環境の構築

効率的なデバッグのために、ブラウザの開発者ツールと Rust のデバッグ機能を活用した環境を構築します。

開発者ツールの有効化

rustCopy code// src-tauri/tauri.conf.json - 開発者ツールの設定
{
  "build": {
    "beforeBuildCommand": "npm run build",
    "beforeDevCommand": "npm run dev",
    "devPath": "http://localhost:1420",
    "distDir": "../dist",
    "withGlobalTauri": false
  },
  "tauri": {
    "windows": [{
      "title": "My Tauri App",
      "width": 800,
      "height": 600,
      "resizable": true,
      "fullscreen": false,
      // 開発時のデバッグ機能有効化
      "webview": {
        "devtools": true
      }
    }]
  }
}

ログ出力の設定

rustCopy code// src-tauri/src/main.rs - ログ機能の追加
use log::{info, warn, error};

#[tauri::command]
fn debug_greet(name: &str) -> String {
    info!("greet 関数が {} で呼び出されました", name);

    let message = format!("Hello, {}! Debug mode is active.", name);
    info!("返答メッセージ: {}", message);

    message
}

Visual Studio Code でのデバッグ設定

jsonCopy code// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "lldb",
      "request": "launch",
      "name": "Tauri Development Debug",
      "cargo": {
        "args": [
          "build",
          "--manifest-path=./src-tauri/Cargo.toml",
          "--no-default-features"
        ],
        "filter": {
          "name": "my-tauri-app",
          "kind": "bin"
        }
      },
      "args": [],
      "cwd": "${workspaceFolder}"
    }
  ]
}

動作確認テスト

bashCopy code# 開発サーバーの起動と動作確認
cargo tauri dev

アプリケーションが起動したら、以下の機能が正常に動作することを確認してください：

• フロントエンドの表示
• バックエンドとの通信
• ホットリロード機能
• 開発者ツールでのデバッグ

これですべての環境構築と動作確認が完了しました。

まとめ

この記事では、Tauri の開発環境を段階的に構築する方法について詳しく解説いたしました。Node.js、Rust、WebView という 3 つの異なる技術スタックを正しい順序で準備することで、安定した開発環境を構築できます。

構築完了チェックリスト

環境構築が正常に完了しているか、以下のチェックリストで確認してください：

項目	確認方法	期待結果
Node.js	node --version	v18.17.0 以上
npm/yarn	npm --version	9.x.x 以上
Rust	rustc --version	1.70.0 以上
Cargo	cargo --version	1.70.0 以上
Tauri CLI	cargo tauri --version	tauri-cli 1.x.x
WebView	プラットフォーム依存	エラーなし
プロジェクト作成	cargo tauri init	正常完了
開発サーバー	cargo tauri dev	アプリ起動

次のステップへの道筋

環境構築が完了したら、以下のような学習とプロジェクト開発を進めることができます：

基本的な機能開発

• ウィンドウ管理とメニュー作成
• ファイルシステムアクセス
• ネイティブ API の活用

フロントエンド技術の選択

• React、Vue、Svelte との統合
• TypeScript の導入
• UI フレームワークの活用

パッケージングと配布

• インストーラーの生成
• アプリケーション署名
• 自動更新機能の実装

環境構築で重要なポイント

今回の環境構築で特に重要だったポイントを改めて整理いたします：

依存関係の順序 Node.js → Rust → WebView → Tauri CLI の順序を守ることで、トラブルを最小限に抑えることができました。

プラットフォーム固有の対応 各 OS で異なる WebView 実装に対応することで、クロスプラットフォーム開発の基盤を整えることができました。

ホットリロードとデバッグ 開発効率を高めるツールを最初に設定することで、快適な開発体験を実現できました。

Tauri を使った開発では、Web 技術とネイティブアプリケーションの両方の知識が活かせます。この環境を基盤として、魅力的なデスクトップアプリケーションの開発を始めてください。

関連リンク

公式ドキュメント

• Tauri 公式サイト
• Tauri ドキュメント
• Tauri API リファレンス

開発ツール

• Rust 公式サイト
• Node.js 公式サイト
• Visual Studio Code

学習リソース

• Tauri GitHub リポジトリ
• Tauri Examples
• Rust by Example