integrating-tauri-js-frontends

Tauri v2 JavaScript フロントエンド統合

このスキルでは、デスクトップアプリケーション開発において、JavaScript フロントエンドフレームワークを Tauri v2 と統合する方法について説明します。

コアアーキテクチャ

Tauri は静的ウェブホストとして機能し、ネイティブウェブビューを通じて HTML、CSS、JavaScript、WASM ファイルを配信します。フレームワークはフロントエンドに依存しませんが、最適に統合するには特定の設定が必要です。

サポートされているアプリケーションの種類

• 静的サイト生成（SSG）
• シングルページアプリケーション（SPA）
• マルチページアプリケーション（MPA）

サポートされていないもの

ネイティブ形式でのサーバーサイドレンダリング（SSR）。すべてのフレームワークで、静的出力を行うように設定する必要があります。

一般的な要件

主な原則

1. 静的出力が必須：Tauri は Node.js サーバーを実行できないため、すべてのコンテンツを静的ファイルとして事前にビルドする必要があります
2. クライアント・サーバーアーキテクチャ：アプリと API 間に適切なクライアント・サーバー関係を実装します（ハイブリッド SSR ソリューションは使用しません）
3. モバイル開発：内部 IP 上でフロントエンドをホストする開発サーバーが必要です

一般的な tauri.conf.json の構成

{
  "build": {
    "beforeDevCommand": "<package-manager> dev",
    "beforeBuildCommand": "<package-manager> build",
    "devUrl": "http://localhost:<port>",
    "frontendDist": "../<output-dir>"
  }
}

<package-manager> を npm run、yarn、pnpm、または deno task に置き換えてください。

---

フレームワークの設定

Vite（React、Vue、Svelte、Solid）

開発時の高速な操作性とシンプルな設定により、Vite は SPA フレームワークに推奨される選択肢です。

package.json

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "tauri": "tauri"
  }
}

vite.config.ts

import { defineConfig } from 'vite';

export default defineConfig({
  clearScreen: false,
  server: {
    port: 5173,
    strictPort: true,
    host: process.env.TAURI_DEV_HOST || 'localhost',
    watch: {
      ignored: ['**/src-tauri/**'],
    },
  },
  envPrefix: ['VITE_', 'TAURI_ENV_*'],
  build: {
    target: process.env.TAURI_ENV_PLATFORM === 'windows' ? 'chrome105' : 'safari13',
    minify: process.env.TAURI_ENV_DEBUG ? false : 'esbuild',
    sourcemap: !!process.env.TAURI_ENV_DEBUG,
  },
});

tauri.conf.json

{
  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "devUrl": "http://localhost:5173",
    "frontendDist": "../dist"
  }
}

---

Next.js

Tauri は Node.js サーバーを実行できないため、Next.js では静的エクスポートモードが必要です。

重要な要件

• next.config で output: 'export' を使用する必要があります
• 静的エクスポートでは画像を最適化しない設定にする必要があります
• 開発サーバーではアセットプレフィックスが必要です

next.config.mjs

const isProd = process.env.NODE_ENV === 'production';
const internalHost = process.env.TAURI_DEV_HOST || 'localhost';

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true,
  },
  assetPrefix: isProd ? undefined : `http://${internalHost}:3000`,
};

export default nextConfig;

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "tauri": "tauri"
  }
}

tauri.conf.json

{
  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "devUrl": "http://localhost:3000",
    "frontendDist": "../out"
  }
}

Next.js の SSG に関する考慮事項

• out ディレクトリには静的エクスポートが格納されます
• 動的ルートには generateStaticParams() が必要です
• API ルートはサポートされていません。代わりに Tauri コマンドを使用してください
• next/image の最適化は無効になります。標準の <img> を使用するか、unoptimized を設定してください

---

Nuxt

Tauri との互換性を確保するには、Nuxt を ssr: false に設定して SSG モードで実行する必要があります。

nuxt.config.ts

export default defineNuxtConfig({
  ssr: false,
  telemetry: false,
  devServer: {
    host: '0.0.0.0', // Required for iOS device compatibility
  },
  vite: {
    clearScreen: false,
    envPrefix: ['VITE_', 'TAURI_'],
    server: {
      strictPort: true,
      watch: {
        ignored: ['**/src-tauri/**'],
      },
    },
  },
});

package.json

{
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "tauri": "tauri"
  }
}

tauri.conf.json

{
  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run generate",
    "devUrl": "http://localhost:3000",
    "frontendDist": "../dist"
  }
}

Nuxt の SSG に関する考慮事項

• 本番ビルドでは nuxt generate を使用してください（静的ファイルが作成されます）
• サーバールート（/server/api）は使用できません。代わりに Tauri コマンドを使用してください
• SSG モードでは Nitro サーバー機能が無効になります

---

SvelteKit

SvelteKit では静的アダプターが必要で、SSR を無効にする必要があります。

インストール

npm install --save-dev @sveltejs/adapter-static

svelte.config.js

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter({
      fallback: 'index.html',
    }),
  },
};

export default config;

src/routes/+layout.ts

export const ssr = false;
export const prerender = true;

vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  clearScreen: false,
  server: {
    port: 5173,
    strictPort: true,
    host: process.env.TAURI_DEV_HOST || 'localhost',
    watch: {
      ignored: ['**/src-tauri/**'],
    },
  },
  envPrefix: ['VITE_', 'TAURI_ENV_*'],
});

tauri.conf.json

{
  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "devUrl": "http://localhost:5173",
    "frontendDist": "../build"
  }
}

SvelteKit の SSG に関する考慮事項

• load 関数で Tauri API に完全にアクセスするには、SPA モード（プリレンダリングなし）を推奨します
• プリレンダリングを使用すると、load 関数はビルド時に Tauri API へアクセスせずに実行されます
• fallback: 'index.html' により SPA ルーティングが有効になります
• デフォルトの出力ディレクトリは build/ です

---

Qwik

Tauri との互換性を確保するには、Qwik に静的アダプターが必要です。

セットアップ

# Create project
npm create qwik@latest
cd <project>

# Add static adapter
npm run qwik add static

# Add Tauri CLI
npm install -D @tauri-apps/cli@latest

# Initialize Tauri
npm run tauri init

package.json

{
  "scripts": {
    "dev": "vite",
    "build": "qwik build",
    "tauri": "tauri"
  }
}

tauri.conf.json

{
  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "devUrl": "http://localhost:5173",
    "frontendDist": "../dist"
  }
}

Qwik の SSG に関する考慮事項

• 静的アダプターは必須です
• Qwik City のサーバー関数は使用できません
• バックエンド機能には Tauri コマンドを使用してください

---

クイックリファレンステーブル

フレームワーク	出力ディレクトリ	開発ポート	ビルドコマンド	主な設定
Vite	dist	5173	vite build	標準の Vite 設定
Next.js	out	3000	next build	output: 'export'
Nuxt	dist	3000	nuxt generate	ssr: false
SvelteKit	build	5173	vite build	adapter-static
Qwik	dist	5173	qwik build	静的アダプター

---

よくある問題と解決策

問題：開発時にアセットが読み込まれない

原因：開発サーバー向けのアセットプレフィックスが設定されていません。

解決策：開発サーバーを指すようにアセットプレフィックスを設定します（Next.js の設定例を参照してください）。

問題：Tauri API を利用できない

原因：コードが実行時ではなく、SSG のビルド時に実行されています。

解決策：

• Tauri API を使用するページのプリレンダリングを無効にします
• ssr: false を指定した動的インポートを使用します
• API 呼び出しの前に window.__TAURI__ を確認します

問題：ホットリロードが機能しない

原因：ファイルウォッチャーに src-tauri ディレクトリが含まれています。

解決策：Vite の設定で、監視対象から除外するリストに **/src-tauri/** を追加します。

問題：モバイル開発に失敗する

原因：開発サーバーにネットワーク経由でアクセスできません。

解決策：ホストを 0.0.0.0 に設定するか、TAURI_DEV_HOST 環境変数を使用します。

問題：SSR エラーでビルドに失敗する

原因：フレームワークがサーバーサイドレンダリングを実行しようとしています。

解決策：SSR が無効になっていることを確認します：

• Next.js：output: 'export'
• Nuxt：ssr: false
• SvelteKit：レイアウトに export const ssr = false を指定
• Qwik：静的アダプターを使用

---

環境変数

Tauri が提供する変数

変数	説明
TAURI_DEV_HOST	モバイル開発用のホスト IP
TAURI_ENV_PLATFORM	対象プラットフォーム（windows、macos、linux、ios、android）
TAURI_ENV_DEBUG	デバッグビルド時に設定

推奨する envPrefix

envPrefix: ['VITE_', 'TAURI_ENV_*']

---

ビルドターゲット

プラットフォームの WebView 機能に応じてビルドターゲットを設定します：

build: {
  target: process.env.TAURI_ENV_PLATFORM === 'windows'
    ? 'chrome105'  // WebView2 on Windows
    : 'safari13',  // WebKit on macOS/Linux
}

---

モバイル開発

iOS および Android の開発では、開発サーバーにネットワーク経由でアクセスできる必要があります：

server: {
  host: process.env.TAURI_DEV_HOST || '0.0.0.0',
  strictPort: true,
}

適切なモバイルコマンドを指定して実行します：

npm run tauri ios dev
npm run tauri android dev