Tauriの基礎 - プロジェクトの作成のソースを表示

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

== 前提条件 ==
Tauriプロジェクトを作成する前に、開発環境を準備する必要がある。<br>
<br>
==== 共通の要件 ====
* Node.js (LTS版)
*: バージョン18以上を推奨する。
*: npm、pnpm、yarn、bunのいずれかのパッケージマネージャを使用できること。
* Rust (rustup)
*: Rustの公式ツールチェーンマネージャであるrustupを使用してRustをインストールする。
<br>
==== Windowsの要件 ====
* WebView2
*: Windows 10 (バージョン1803以降) および Windows 11には標準でインストールされている。
* Visual Studio Build Tools
*: Visual Studioインストーラを起動して、[C++によるデスクトップ開発]ワークロードをインストールする。
<br>
 <syntaxhighlight lang="powershell">
 winget install --id Rustlang.Rustup
 </syntaxhighlight>
<br>
==== MacOSの要件 ====
* Xcode Command Line Tools
*: <code>xcode-select --install</code> でインストールする。
* MacOS Catalina (10.15) 以降
<br>
 <syntaxhighlight lang="sh">
 curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh
 </syntaxhighlight>
<br>
==== 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>
<br><br>

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

== React + TypeScriptテンプレート ==
==== 使用方法 ====
 pnpm create tauri-app <アプリケーション名> --template react-ts
<br>
==== テンプレート一覧 ====
<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>
<br>
==== TypeScript版 と JavaScript版の違い ====
TypeScript版を使用するメリットを以下に示す。<br>
<br>
* 型安全性によるコンパイル時のエラー検出
* IDEでの優れた自動補完サポート
* リファクタリングの容易さ
<br>
==== 生成されるファイル構造 ====
 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設定
<br><br>

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

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

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

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

== モバイル開発の設定 ==
Tauri 2.0以降では、iOSとAndroidのモバイルアプリケーション開発がサポートされている。<br>
<br>
==== iOS開発の設定 ====
* MacOS環境 (必須)
* Xcode (最新版)
* Apple Developerアカウント (実機デプロイの場合)
<br>
 # iOSターゲットの追加
 rustup target add aarch64-apple-ios
 
 # iOS開発の初期化
 pnpm tauri ios init
 
 # iOSシミュレータでの実行
 pnpm tauri ios dev
<br>
==== Android開発の設定 ====
* Android SDK
* Android NDK
* Java Development Kit (JDK) 17以上
<br>
 # Androidターゲットの追加
 rustup target add aarch64-linux-android
 
 # Android開発の初期化
 pnpm tauri android init
 
 # Androidエミュレータでの実行
 pnpm tauri android dev
<br>
==== TAURI_DEV_HOST環境変数 ====
モバイル開発時、環境変数 <code>TAURI_DEV_HOST</code> は開発サーバがリッスンすべきホストアドレスを示す。<br>
<br>
* デフォルト
*: パブリックネットワークアドレスが使用される。
* iOS実機
*: TUNアドレス (IPv6アドレスで末尾が <u>::2</u> ) を使用
* 設定
*: <code>--force-ip-prompt</code> オプションで対話的にIPアドレスを選択可能
<br><br>

== トラブルシューティング ==
==== 共通の問題 ====
<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>
<br>
==== プラットフォーム別の問題 ====
<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>
<br><br>

== 新規プロジェクト作成の流れ ==
 # 1. プロジェクトの作成
 pnpm create tauri-app my-tauri-app --template react-ts
 
 # 2. プロジェクトディレクトリに移動
 cd my-tauri-app
 
 # 3. 依存関係のインストール
 pnpm install
 
 # 4. 開発サーバの起動
 pnpm tauri dev
<br><br>

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


{{#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]]