Tauri + Nuxt 4 触ってみた話

はじめに

最近Webアプリにするほどでもないが、Webの知識使ってアプリケーション作成したい場面があり、Docker等が使えない環境でもローカルだけで対応できるデスクトップアプリを作るためにフロントエンドをNuxtで開発できるツールを探していたときにElectoronとTauriを見つけました。ElectronはNuxtで公式モジュール出ていたものの、うまく触ることができなかったのであえてTauriを選択しました。
今回は実際に使ってみて感じたことや、他の技術との違いをまとめてみます。

対象者

• Webアプリの技術使ってデスクトップアプリ開発に興味がある方

1. Tauriって何？

Tauriは、Rust製のデスクトップアプリケーションフレームワークです。
フロントエンドにはHTML/CSS/JavaScript（React、Vue、Svelteなど好きなフレームワーク）を使い、バックエンドをRustで書くという構成になっています。

最大の特徴：OSのWebViewを使う

Electronとの一番大きな違いは、Chromiumをバンドルしないことです。
TauriはOSに搭載されているネイティブWebViewを利用します。

これにより

• バイナリサイズが非常に小さい（数MB〜10MB程度。Electronだと150MB超えることも）
• メモリ消費が少ない（Chromiumを丸ごと載せないので当然）

が実現できます。

その他の特徴

• クロスプラットフォーム対応: Windows、macOS、Linux。v2からはiOS/Androidにも対応
• セキュリティ重視: コマンドのホワイトリスト制で、フロントエンドからバックエンドの機能を明示的に公開する設計
• 現在のバージョン: Tauri v2系が最新（モバイル対応が追加された大型アップデート）

2. Tauriと他Webシステムとの比較

Tauri vs Electron

同じ「Webフロントエンドでデスクトップアプリを作る」フレームワーク同士の比較です。

項目	Tauri	Electron
バックエンド	Rust	Node.js
レンダリング	OS標準WebView	Chromium（バンドル）
バイナリサイズ	3〜10MB	150〜200MB+
メモリ使用量	50〜150MB程度	300〜500MB+
セキュリティモデル	コマンドホワイトリスト方式	プロセス分離
学習コスト	Rustの知識が必要	JavaScript/Node.jsで完結
エコシステム	成長中	成熟（VS Code等の実績）

Tauriはサイズ・パフォーマンス面で圧倒的に有利ですが、Rustの学習コストがあるのと、Electronほどエコシステムが成熟していない点はトレードオフです。

3. Tauriを使う前準備

共通で必要なもの

• Rust: 公式サイト記載のコマンドでインストール

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

  コマンドに関してはTauri公式にも載っているのでそこも参考にしてください。

プロジェクト作成

環境が揃ったら、以下のコマンドでプロジェクトを作成できます。

npx nuxi@latest init

cd プロジェクトディレクトリパス
# Nuxtにtauriをインストール
pnpm add -D @tauri-apps/cli@latest
# tauri 初期化
pnpm tauri init

## generate directoryはNuxt4の場合、./distではなく./.output/publicです
## What is your frontend build command? と出てきた場合は pnpm generateと入力してください
## ↑pnpmの場合です。他の場合は他のgenerateコマンドを確認してください。

# tauri 起動
pnpm tauri dev

nuxt.config.tsに以下項目追加する必要があります。

// nuxt.config.ts
ssr: false,
ignore: ['**/src-tauri/**'],
vite: {
  clearScreen: false,
  envPrefix: ['VITE_', 'TAURI_'],
  server: {
    strictPort: true
  }
},

これで開発サーバーが立ち上がり、ホットリロード付きで開発できます。

4. Tauriを使うに当たっての注意点

OS間のWebViewの違い

Tauriの「OSのWebViewを使う」という設計は軽量化のメリットがある反面、OS間で描画の挙動が微妙に異なるというデメリットがあります。

• macOS: WebKit（Safari相当）
• Windows: WebView2（Chromium相当）
• Linux: WebKitGTK

特にCSSの挙動やJavaScript APIのサポート状況が微妙に違うことがあるので、クロスプラットフォームで配布する場合は各OSでの動作確認が必須です。

IPC通信は非同期

フロントエンドからRustの関数を呼び出す（IPC通信）はすべて非同期です。Rustのコマンドをinvokeで呼ぶ形になるので、async/awaitの設計が前提になります。

import { invoke } from '@tauri-apps/api/core';

// Rustで定義したコマンドを呼び出す
const result = await invoke('my_command', { arg1: 'value' });

SSRは利用できない

TauriはHTMLを読み込んでいるだけなので、サーバありきで動作するSSR、ISRは使用することができません。

終わりに

フロント部分をフロントエンドフレームワークで賄えるのは個人的にはかなり良い印象です。見栄えについてもCSSやUIフレームワークですぐに対応できるので、かなり調整が利きやすかったです。
ただ、Rustの書き方が独特なのでWeb系しか触ったことのない方にはかなりとっかかりづらい言語になってると思いました。Android触ってたときに感化に多様な書き方したことあるような⋯って感じで書いていましたが、かなり理解に時間がかかる言語でした。正直今でもあまりわかっていません⋯
また、OSによって実現できないこと(通知イベントクリック動作など)が多々あります。そのあたりは公式APIに記載されていますので、気になる方は一読するのもありかもです。