😀

TauriでMac用のデスクトップアプリを開発してみる

2025/03/03に公開

React

Rust

Tauri

tech

Webアプリ開発者がデスクトップアプリに入門してみます。
RustベースのTauriフレームワークを使えば、慣れ親しんだWeb技術でクロスプラットフォームなデスクトップアプリが作れるとのこと。AIもいるしきっと学習コストは低いはずです！

前提：

macOS使用
Reactを使った開発経験あり

準備

1. Rustインストール

Tauriの核となるRust言語をインストールします。Rustは高速で安全なシステムプログラミング言語で、パッケージマネージャの「Cargo」も一緒に導入されます。インストールは公式のrustupツールを使うのが最も簡単です。

# rustupをインストール
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
# パスを適用
source "$HOME/.cargo/env"
# インストールの確認
rustc --version cargo --version

2. macOS向け依存パッケージのインストール

macOSでの開発に必要な依存パッケージをインストールします。Homebrewを使ってNodeをインストールし、Apple純正の開発ツールであるXcodeコマンドラインツールも導入します。これらはTauriアプリをビルドする際に必要となります。

# Homebrewがインストールされていることを確認
brew --version
# 必要なパッケージをインストール 
brew install node 
# Xcodeコマンドラインツールをインストール 
xcode-select --install

3. TauriのCLIツールをインストール

Tauriのコマンドラインインターフェースをグローバルにインストールします。このツールを使ってTauriプロジェクトの初期化やビルドを行います。

npm install -g @tauri-apps/cli

プロジェクトの作成

Vite + Reactプロジェクトの作成

フロントエンド部分はViteを使ってReact + TypeScriptのプロジェクトを作成します。Viteは高速な開発環境を提供してくれるビルドツールで、Reactとの相性も抜群です。

# Viteを使ってReact + TypeScriptプロジェクトを作成 
npm create vite@latest my-tauri-app -- --template react-ts cd my-tauri-app 
# 依存パッケージをインストール 
npm install

Tauriの初期化

作成したViteプロジェクトにTauriを統合します。Tauriの依存パッケージをインストールし、tauri initコマンドでプロジェクトを初期化します。これにより、必要なRustのファイル構造や設定ファイルが自動的に生成されます。

# Tauriを初期化 
npm install --save-dev @tauri-apps/cli @tauri-apps/api 
npx tauri init

Viteの設定

vite.config.tsファイルを以下のように編集します。
Viteの設定ファイルを編集して、Tauriとの連携をスムーズにします。ポート番号の固定や環境変数のプレフィックス設定などを行います。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    strictPort: true,
  },
  clearScreen: false,
  envPrefix: ['VITE_', 'TAURI_'],
})

プロジェクト構成の確認と修正

src-tauri/tauri.conf.jsonの確認

生成されたsrc-tauri/tauri.conf.jsonを確認し、必要に応じて設定を変更します。
アプリケーション名や識別子などを実際のプロジェクトに合わせて変更します。この設定がデスクトップアプリの基本情報となります。

{
	"$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
	"productName": "agent-app", ←ここはアプリの名前に変更する。
	"version": "0.1.0",
	"identifier": "com.sample.agent
	-app", ←ここをデフォルト値(`com.tauri.dev`)から変更する。
	省略
	"build": {
		"frontendDist": "../dist", ←ここはVite+Reactのビルド成果物のパスに変更する。
		"devUrl": "http://localhost:3000",
		"beforeDevCommand": "npm run dev",
		"beforeBuildCommand": "npm run build"
	},
	省略
}

package.jsonにTauriスクリプトを追加

package.jsonにTauri関連のスクリプトを追加して、開発やビルドのコマンドを簡略化します。これにより、npmコマンド一つでTauriの機能を呼び出せるようになります。

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

開発サーバーの起動

開発サーバーを起動すると、ブラウザでのプレビューと同時にデスクトップアプリのウィンドウも表示されます。コードを変更すると両方に即座に反映されます。

npm run tauri:dev

アプリケーションが起動します。

アプリケーションのビルド

ビルドコマンドを実行すると、macOS向けのdmgファイルが生成されます。これで本格的なデスクトップアプリケーションの完成です。

npm run tauri:build

初めてのアプリケーションができました！
デフォルトのままですが、ちょっとした感動です！！

準備