Tauri + React (TypeScript)

Tech
Table of Contents

Tauri + React (TypeScript) のセットアップ手順を説明します。

前提条件のインストール

1. Rust のインストール

# macOS / Linux
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source ~/.cargo/env

# Windows (PowerShell)
# https://rustup.rs からインストーラーをダウンロードして実行

2. OS別の依存関係

macOS:

xcode-select --install

Windows:

Linux (Ubuntu/Debian):

sudo apt update
sudo apt install libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf

プロジェクト作成

npm create tauri-app@latest my-app

対話形式で以下を選択：

✔ Project name: my-app
✔ Choose your frontend language: TypeScript / JavaScript
✔ Choose your package manager: npm
✔ Choose your UI template: React
✔ Choose your UI flavor: TypeScript
cd my-app
npm install

プロジェクト構成

my-app/
├── src/                  # React (フロントエンド)
│   ├── App.tsx
│   ├── main.tsx
│   └── assets/
├── src-tauri/            # Rust (バックエンド)
│   ├── src/
│   │   ├── main.rs
│   │   └── lib.rs
│   ├── Cargo.toml
│   └── tauri.conf.json   # アプリ設定
├── index.html
└── package.json

開発サーバーの起動

npm run tauri dev

ホットリロード付きでデスクトップアプリが起動します。

Tauri API の使い方（React から Rust を呼ぶ）

Rust 側 (src-tauri/src/lib.rs):

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

React 側 (src/App.tsx):

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

function App() {
  const [msg, setMsg] = useState("");

  const handleGreet = async () => {
    const result = await invoke<string>("greet", { name: "World" });
    setMsg(result);
  };

  return (
    <div>
      <button onClick={handleGreet}>Greet</button>
      <p>{msg}</p>
    </div>
  );
}

ビルド（配布用）

npm run tauri build

ビルド成果物の場所：

OS 形式 パス
Windows .msi / .exe src-tauri/target/release/bundle/msi/
macOS .dmg / .app src-tauri/target/release/bundle/dmg/
Linux .deb / .AppImage src-tauri/target/release/bundle/

注意: クロスコンパイルは非対応のため、Windows版は Windows 上で、Mac版は Mac 上でビルドする必要があります。CI/CD（GitHub Actions など）を使うと両プラットフォームのビルドを自動化できます。

GitHub Actions でのクロスビルド（オプション）

.github/workflows/release.yml を作成：

name: Release
on:
  push:
    tags:
      - 'v*'

jobs:
  build:
    strategy:
      matrix:
        include:
          - os: ubuntu-latest
            target: x86_64-unknown-linux-gnu
          - os: windows-latest
            target: x86_64-pc-windows-msvc
          - os: macos-latest
            target: x86_64-apple-darwin
          - os: macos-latest
            target: aarch64-apple-darwin  # Apple Silicon

    runs-on: ${{ matrix.os }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - uses: dtolnay/rust-toolchain@stable
        with:
          targets: ${{ matrix.target }}
      - uses: tauri-apps/tauri-action@v0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          tagName: ${{ github.ref_name }}
          releaseName: 'Release ${{ github.ref_name }}'

よく使うコマンドまとめ

npm run tauri dev        # 開発サーバー起動
npm run tauri build      # 本番ビルド
npm run tauri info       # 環境情報の確認
npm run tauri add <plugin>  # プラグイン追加（fs, shell, dialog など）

詳細は公式ドキュメント https://tauri.app/start/ を参照してください。何か詰まった点があれば気軽に聞いてください！

コメント