Wiki: ページの作成:「== 概要 == Tauriは、Rustをバックエンドとし、Web技術 (HTML / CSS / JavaScript) をフロントエンドとして使用するクロスプラットフォームアプリケーション開発フレームワークである。
デスクトップ (Windows、MacOS、Linux) とモバイル (iOS、Android) の両プラットフォームに対応している。

システムのネイティブWebViewを活用することにより、最小600[KB]未…」

2026-02-25T22:24:16Z

ページの作成:「== 概要 == Tauriは、Rustをバックエンドとし、Web技術 (HTML / CSS / JavaScript) をフロントエンドとして使用するクロスプラットフォームアプリケーション開発フレームワークである。 デスクトップ (Windows、MacOS、Linux) とモバイル (iOS、Android) の両プラットフォームに対応している。 システムのネイティブWebViewを活用することにより、最小600[KB]未…」

新規ページ

== 概要 ==
Tauriは、Rustをバックエンドとし、Web技術 (HTML / CSS / JavaScript) をフロントエンドとして使用するクロスプラットフォームアプリケーション開発フレームワークである。 
デスクトップ (Windows、MacOS、Linux) とモバイル (iOS、Android) の両プラットフォームに対応している。 
 
システムのネイティブWebViewを活用することにより、最小600[KB]未満という極めて小さなバイナリサイズを実現している。 
これは、ChromiumをバンドルするElectron等の従来フレームワークと比較して大幅な軽量化となっている。 
 
フロントエンドにはReact、Vue、Svelte等のモダンなフレームワークを使用でき、TypeScriptによる型安全な開発もサポートされている。 
バックエンドはRustで実装されるため、メモリ安全性と高いパフォーマンスを両立している。 
 
<code>create-tauri-app</code> コマンドを使用することにより、対話式のセットアップによりプロジェクトを簡単に作成できる。 
 
また、Viteをビルドツールとして使用し、ホットリロード機能により効率的な開発が可能である。 
 

== 前提条件 ==
Tauriプロジェクトを作成する前に、開発環境を準備する必要がある。 
 
==== 共通の要件 ====
* Node.js (LTS版)
*: バージョン18以上を推奨する。
*: npm、pnpm、yarn、bunのいずれかのパッケージマネージャを使用できること。
* Rust (rustup)
*: Rustの公式ツールチェーンマネージャであるrustupを使用してRustをインストールする。
 
==== Windowsの要件 ====
* WebView2
*: Windows 10 (バージョン1803以降) および Windows 11には標準でインストールされている。
* Visual Studio Build Tools
*: Visual Studioインストーラを起動して、[C++によるデスクトップ開発]ワークロードをインストールする。
 
<syntaxhighlight lang="powershell">
winget install --id Rustlang.Rustup
</syntaxhighlight>
 
==== MacOSの要件 ====
* Xcode Command Line Tools
*: <code>xcode-select --install</code> でインストールする。
* MacOS Catalina (10.15) 以降
 
<syntaxhighlight lang="sh">
curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh
</syntaxhighlight>
 
==== Linuxの要件 ====
<center>
{| class="wikitable"
|+ Linuxディストリビューション別の依存パッケージ
! Linuxディストリビューション !! インストールコマンド
|-
| RHEL ||
sudo dnf install curl wget file make gcc gcc-c++ \
openssl-devel librsvg2-devel gtk3-devel webkit2gtk4.1-devel libappindicator-gtk3-devel
|-
| SUSE ||
sudo zypper install curl wget file make gcc gcc-c++ \
libopenssl-devel librsvg-devel gtk3-devel webkit2gtk3-devel libappindicator3-devel
|-
| Debian ||
sudo apt install build-essential curl wget file \
libssl-dev libgtk-3-dev librsvg2-dev libwebkit2gtk-4.1-dev libayatana-appindicator3-dev
|}
</center>
 

== create-tauri-appによるプロジェクト作成 ==
<code>create-tauri-app</code> コマンドは、Tauriプロジェクトを簡単に作成するための公式ツールである。 
 
==== インストール方法 ====
<center>
{| class="wikitable"
|+ create-tauri-appの実行コマンド一覧
! 環境 !! コマンド
|-
| Bash / Zsh (Linux / MacOS) || <code>sh <(curl https://create.tauri.app/sh)</code>
|-
| Fish || <code>curl https://create.tauri.app/sh | sh</code>
|-
| PowerShell (Windows) || <code>irm https://create.tauri.app/ps \| iex</code>
|-
| npm || <code>npm create tauri-app@latest</code>
|-
| pnpm || <code>pnpm create tauri-app</code>
|-
| yarn || <code>yarn create tauri-app</code>
|-
| bun || <code>bun create tauri-app</code>
|}
</center>
 
==== コマンドラインオプション ====
<center>
{| class="wikitable"
|+ コマンドラインオプション一覧
! オプション !! 説明
|-
| <code>--template</code> || 使用するテンプレートを指定する。 例: react-ts、vue、svelte
|-
| <code>--manager</code> || パッケージマネージャを指定する。 npm、pnpm、yarn、bun
|-
| <code>--yes</code> || デフォルト設定でプロジェクトを作成する。
|-
| <code>--ci</code> || CI環境向けの非対話モードで実行する。
|}
</center>
 
pnpm create tauri-app <アプリケーション名> --template react-ts
 
==== 対話式セットアップの流れ ====
# プロジェクト名の入力
#: デフォルトではカレントディレクトリ名が使用される。
# パッケージマネージャの選択
#: pnpm、yarn、npm、bun、denoから選択する。
# フロントエンド言語の選択
#: TypeScript (推奨)、JavaScript、Rust、.NETから選択する。
# UIテンプレートの選択
#: Vanilla、Vue、Svelte、React、Solid、Angular、Preactなどから選択可能である。
 

== React + TypeScriptテンプレート ==
==== 使用方法 ====
pnpm create tauri-app <アプリケーション名> --template react-ts
 
==== テンプレート一覧 ====
<center>
{| class="wikitable"
|+ フロントエンドテンプレート一覧
! フレームワーク !! TypeScript !! JavaScript
|-
| Vanilla || vanilla-ts || vanilla
|-
| Vue || vue-ts || vue
|-
| Svelte || svelte-ts || svelte
|-
| React || react-ts || react
|-
| Solid || solid-ts || solid
|-
| Angular || angular || -
|-
| Preact || preact-ts || preact
|-
| Yew (Rust) || yew || -
|-
| Leptos (Rust) || leptos || -
|-
| Blazor (.NET) || blazor || -
|}
</center>
 
==== TypeScript版と JavaScript版の違い ====
TypeScript版を使用するメリットを以下に示す。 
 
* 型安全性によるコンパイル時のエラー検出
* IDEでの優れた自動補完サポート
* リファクタリングの容易さ
 
==== 生成されるファイル構造 ====
my-app/
├── src/ # フロントエンドソースコード
│ ├── main.tsx # エントリーポイント
│ └── App.tsx # メインコンポーネント
├── src-tauri/ # Tauriバックエンド (Rust)
│ ├── src/ # Rustソースコード
│ ├── tauri.conf.json # Tauri設定ファイル
│ └── Cargo.toml # Rust依存関係
├── index.html # HTMLエントリーポイント
├── package.json # Node.js依存関係
└── vite.config.ts # Vite設定
 

== 既存プロジェクトへのTauri追加 ====
既に存在するWebフロントエンドプロジェクトにTauriを追加することも可能である。 
 
==== Tauri CLIのインストール ====
pnpm add -D @tauri-apps/cli@latest
 
==== tauri initの実行 ====
pnpm tauri init
 
==== tauri initの対話フロー ====
# アプリケーション名の入力
#: デフォルトはパッケージ名
# ウィンドウタイトルの入力
#: アプリケーションウインドウのタイトル
# 開発サーバURLの入力
#: 例: http://localhost:5173
# フロントエンドビルド出力先の入力
#: 例: ../dist
# devコマンドの入力
#: 例: <code>pnpm dev</code>
# buildコマンドの入力
#: 例: <code>pnpm build</code>
 

== Vite設定 ==
==== vite.config.ts ====
<syntaxhighlight lang="typescript">
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

const host = process.env.TAURI_DEV_HOST;

export default defineConfig({
plugins: [react()],
clearScreen: false,
server: {
port: 5173,
strictPort: true,
host: host || false,
hmr: host ? { protocol: 'ws', host, port: 1421 } : undefined,
watch: { ignored: ['**/src-tauri/**'] },
},
envPrefix: ['VITE_', 'TAURI_ENV_*'],
build: {
target: process.env.TAURI_ENV_PLATFORM == 'windows' ? 'chrome105' : 'safari13',
minify: !process.env.TAURI_ENV_DEBUG ? 'esbuild' : false,
sourcemap: !!process.env.TAURI_ENV_DEBUG,
},
});
</syntaxhighlight>
 
==== 設定項目の解説 ====
<center>
{| class="wikitable"
|+ vite.config.tsの主な設定項目
! 設定項目 !! 説明
|-
| <code>plugins: [react()]</code> || React用のViteプラグインを有効にする。
|-
| <code>clearScreen: false</code> || Tauri開発サーバとの統合のため、コンソール画面のクリアを無効にする。
|-
| <code>server.port: 5173</code> || 開発サーバのポート番号 <code>tauri.conf.json</code> の <code>devUrl</code> と一致させる。
|-
| <code>server.strictPort: true</code> || 指定したポートが使用できない場合にエラーにする。
|-
| <code>server.host</code> || 環境変数 <code>TAURI_DEV_HOST</code>が設定されている場合、そのホストでリッスンする。 モバイル開発で重要
|-
| <code>server.hmr</code> || ホットモジュールリプレースメント (HMR) の設定 モバイル開発時はWebSocketを使用
|-
| <code>server.watch.ignored</code> || <code>src-tauri/</code> ディレクトリの変更を監視対象から除外する。
|-
| <code>envPrefix</code> || 環境変数のプレフィックスとして、<code>VITE_</code> と <code>TAURI_ENV_*</code> を使用する。
|-
| <code>build.target</code> || ビルドターゲットをプラットフォームに応じて設定 WindowsではChrome 105、それ以外ではSafari 13
|-
| <code>build.minify</code> || デバッグビルドでは無効化し、本番ビルドではesbuildを使用する。
|-
| <code>build.sourcemap</code> || デバッグビルドでのみソースマップを生成する。
|}
</center>
 
==== tauri.conf.jsonとの連携 ====
<syntaxhighlight lang="json">
{
"build": {
"beforeDevCommand": "pnpm dev",
"beforeBuildCommand": "pnpm build",
"devUrl": "http://localhost:5173",
"frontendDist": "../dist"
}
}
</syntaxhighlight>
 
<center>
{| class="wikitable"
|+ tauri.conf.jsonのbuild設定項目
! 設定項目 !! 説明
|-
| <code>beforeDevCommand</code> || 開発サーバ起動前に実行するコマンド
|-
| <code>beforeBuildCommand</code> || ビルド実行前に実行するコマンド
|-
| <code>devUrl</code> || 開発時のフロントエンドURL
|-
| <code>frontendDist</code> || ビルド済みフロントエンド資産の配置ディレクトリ
|}
</center>
 

== 開発サーバの起動 ==
==== tauri devコマンド ====
# pnpmの場合
pnpm tauri dev

# npmの場合
npm run tauri dev

# cargoの場合
cargo tauri dev
 
==== 初回起動と2回目以降の違い ====
* 初回起動時
*: Rustの依存クレートのダウンロードとコンパイルが行われる。
*: 初回コンパイルには数分かかる場合がある。
*: 
* 2回目以降
*: 増分ビルドにより高速に起動する。
*: 変更されたファイルのみが再コンパイルされる。
 
==== ポート設定 ====
開発サーバのポート番号は、vite.config.ts と tauri.conf.json で整合性を保つ必要がある。 
 
==== 環境変数 ====
<center>
{| class="wikitable"
|+ Tauri開発環境変数
! 環境変数 !! 説明
|-
| <code>TAURI_DEV_HOST</code> || モバイル開発時に開発サーバがリッスンするホストアドレス
|-
| <code>TAURI_ENV_PLATFORM</code> || 現在のプラットフォーム (windows、linux、darwin)
|-
| <code>TAURI_ENV_DEBUG</code> || デバッグモードの場合に設定される。
|}
</center>
 

== ホットリロード ==
==== フロントエンドHMR ====
Viteのホットモジュールリプレースメント (HMR) 機能により、フロントエンドの変更が即座に反映される。 
 
* Viteがファイルの変更を検知する
* WebSocketを通じてブラウザ (WebView) に通知される
* 変更されたモジュールのみが置換され、ページ全体のリロードは不要
* アプリケーションの状態 (フォーム入力値など) が保持される
 
==== Rust自動再コンパイル ====
Rustバックエンドの変更時も、自動的に再コンパイルとアプリケーションの再起動が行われる。 
 
* src-tauri/ ディレクトリ内のRustファイルの変更が監視される。
* 変更検知時に自動的に再コンパイルが開始される。
* コンパイル完了後にアプリケーションが自動的に再起動される。
 
==== 開発モードの判定方法 ====
* Rust側
*: <syntaxhighlight lang="rust">
#[cfg(debug_assertions)]
fn is_dev() -> bool { true }
</syntaxhighlight>
*: 
* フロントエンド側
*: <syntaxhighlight lang="typescript">
const isDev = import.meta.env.DEV;
</syntaxhighlight>
 

== モバイル開発の設定 ==
Tauri 2.0以降では、iOSとAndroidのモバイルアプリケーション開発がサポートされている。 
 
==== iOS開発の設定 ====
* MacOS環境 (必須)
* Xcode (最新版)
* Apple Developerアカウント (実機デプロイの場合)
 
# iOSターゲットの追加
rustup target add aarch64-apple-ios

# iOS開発の初期化
pnpm tauri ios init

# iOSシミュレータでの実行
pnpm tauri ios dev
 
==== Android開発の設定 ====
* Android SDK
* Android NDK
* Java Development Kit (JDK) 17以上
 
# Androidターゲットの追加
rustup target add aarch64-linux-android

# Android開発の初期化
pnpm tauri android init

# Androidエミュレータでの実行
pnpm tauri android dev
 
==== TAURI_DEV_HOST環境変数 ====
モバイル開発時、環境変数 <code>TAURI_DEV_HOST</code> は開発サーバがリッスンすべきホストアドレスを示す。 
 
* デフォルト
*: パブリックネットワークアドレスが使用される。
* iOS実機
*: TUNアドレス (IPv6アドレスで末尾が ::2 ) を使用
* 設定
*: <code>--force-ip-prompt</code> オプションで対話的にIPアドレスを選択可能
 

== トラブルシューティング ==
==== 共通の問題 ====
<center>
{| class="wikitable"
|+ 共通トラブルシューティング
! 問題 !! 解決方法
|-
| Rustのコンパイルエラー || <code>rustup update</code> コマンドを実行して、でRustを最新版に更新する。
|-
| ポートが使用中 || <code>lsof -i :5173</code> で確認し、プロセスを終了する。
|-
| モジュールが見つからない || <code>pnpm install</code> コマンドを再実行する。
|-
| キャッシュの問題 || <code>rm -rf node_modules && pnpm install</code> を実行する。
|}
</center>
 
==== プラットフォーム別の問題 ====
<center>
{| class="wikitable"
|+ プラットフォーム別トラブルシューティング
! プラットフォーム !! 問題 !! 解決方法
|-
| Windows || WebView2が見つからない || [https://developer.microsoft.com/en-us/microsoft-edge/webview2/ Edge WebView2]からインストール
|-
| Windows || ビルドツールエラー || Visual Studio Build Toolsをインストールする。
|-
| MacOS || Xcode関連エラー || <code>xcode-select --install</code> を実行する。
|-
| Linux || webkit2gtkエラー || webkit2gtk-4.1パッケージをインストールする。
|-
| Linux || リンカエラー || MakeやGCC等の開発ライブラリをインストールする。
|}
</center>
 

== 新規プロジェクト作成の流れ ==
# 1. プロジェクトの作成
pnpm create tauri-app my-tauri-app --template react-ts

# 2. プロジェクトディレクトリに移動
cd my-tauri-app

# 3. 依存関係のインストール
pnpm install

# 4. 開発サーバの起動
pnpm tauri dev
 

== CI環境での非対話プロジェクト作成 ==
# CI/CDパイプラインでの使用例
pnpm create tauri-app my-app --template react-ts --manager pnpm --yes

cd my-app

pnpm install
pnpm tauri build
 

{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=Tauri,Rust,React,TypeScript,デスクトップアプリ,WebView,クロスプラットフォーム,Vite,create-tauri-app,HMR,ホットリロード,開発サーバ,テンプレート,tauri dev,tauri init,モバイル開発,iOS,Android,前提条件,トラブルシューティング,webkit2gtk,WebView2,rustup,Node.js,Xcode,Android SDK
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:Rust]]

Tauriの基礎 - プロジェクトの作成 - 版の履歴