Tauri 開発環境の最速構築：Node・Rust・WebView ランタイムの完全セットアップ

2025年10月2日

Tauri

Tauri 開発環境の最速構築：Node・Rust・WebView ランタイムの完全セットアップ

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

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

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

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

mermaidflowchart 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 版）をインストールすることをお勧めいたします。複数のプロジェクトを扱う予定がある場合は、バージョン管理ツールの使用も検討してください。

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

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

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

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

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

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

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

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

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

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

yarn のインストールと設定

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

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

pnpm のインストールと設定

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

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

開発ツールの準備

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

Visual Studio Code の推奨拡張機能

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

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

開発環境の動作確認

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

bash# package.json の確認
cat package.json

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

Rust 環境の構築

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

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

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

Windows での rustup インストール

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

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

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

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

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

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

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

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

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

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

Cargo の設定

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

Cargo の基本設定

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

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

config.toml の推奨設定

toml[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 プロジェクトの主要依存関係

toml# 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 開発環境の動作確認

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

bash# ビルドと実行
cargo build
cargo run

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

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

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

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

WebView ランタイムの準備

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

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

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

mermaidflowchart 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 ランタイムの確認

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

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

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

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

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

powershell# Build Tools の確認
where cl.exe

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

powershell# 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 に標準搭載されているため、追加のインストールは不要です。

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

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

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

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

Linux での WebView 準備

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

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

bash# 必要なパッケージのインストール
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 系での依存関係インストール

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

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

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

WebView 動作確認

bash# 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 インストール

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

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

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

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

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

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

CLI 機能の確認

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

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

プロジェクトの作成

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

新規プロジェクトの作成

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

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

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

text? 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

プロジェクト構造の確認

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

textmy-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

初回ビルドの実行

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

開発サーバーの起動

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

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

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

ビルドプロセスの確認

text    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)

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

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

mermaidsequenceDiagram
    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 コマンドにより、フロントエンドとバックエンドが連携してアプリケーションが起動します。

本番ビルドの実行

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

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

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

開発環境の動作確認

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

Hello World アプリの作成

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

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

html<!-- 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 でのバックエンド連携

javascript// 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 バックエンドの関数実装

rust// 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)
}

rust// 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 設定によるフロントエンドホットリロード

javascript// 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 によるバックエンドホットリロード

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

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

開発用スクリプトの設定

json{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "tauri": "tauri",
    "tauri:dev": "tauri dev",
    "tauri:build": "tauri build"
  }
}

デバッグ環境の構築

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

開発者ツールの有効化

rust// 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
      }
    }]
  }
}

ログ出力の設定

rust// 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 でのデバッグ設定

json// .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}"
    }
  ]
}

動作確認テスト

bash# 開発サーバーの起動と動作確認
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`	アプリ起動