Tauri v2でスマホアプリ開発！React + RustでiOS/Androidアプリを作る【2025年入門】

Tauri v2でモバイル開発の常識が変わる

「React NativeやFlutterもいいけど、もっと軽量で、Rustのパワーを使いたい...」 そんな願いを叶えるのが、Tauri v2 です。

2024年にリリースされたTauri v2は、デスクトップ（Windows/Mac/Linux）だけでなく、iOSとAndroidへのビルドを正式にサポートしました。 これにより、**「フロントエンドはReact、バックエンドはRust」**という構成で、全プラットフォーム対応のアプリが作れるようになりました。

Tauri v2のモバイル開発のメリット

1. 超軽量: OSネイティブのWebViewを使用するため、アプリサイズが非常に小さい（数MB〜）。
2. Rustの安全性と速度: ビジネスロジックをRustで書けるため、高速かつ安全。
3. 既存のWeb資産の活用: React, Vue, Svelteなど、好きなWebフレームワークがそのまま使える。

実践：Tauri v2でモバイルアプリを作ろう

今回は、React + Vite + Tauri v2で、シンプルな「システム情報表示アプリ」を作ってみます。

1. 環境構築

RustとNode.jsはインストール済みとします。 モバイル開発には、各プラットフォームのSDKが必要です。

• iOS: Xcode (macOSのみ)
• Android: Android Studio (SDK, NDK)

2. プロジェクト作成

npm create tauri-app@latest

ウィザードに従って選択します：

• Project name: tauri-mobile-demo
• Frontend language: TypeScript / JavaScript
• Package manager: npm
• UI template: React

3. モバイル設定の初期化

プロジェクトディレクトリに移動し、モバイル向けの設定を行います。

cd tauri-mobile-demo
npm install
npx tauri init
npx tauri android init  # Android用
npx tauri ios init      # iOS用 (macOSのみ)

4. Rustバックエンドの実装 (src-tauri/src/lib.rs)

スマホのバッテリー残量を取得するコマンドをRustで実装してみましょう。 （※実際にはプラグインを使いますが、ここではRust関数の呼び出しデモとして）

// src-tauri/src/lib.rs
use tauri::command;

#[command]
fn get_device_info() -> String {
    // 実際には `sysinfo` クレートなどで取得する
    // ここではデモ用に固定値を返す
    format!("Device: Tauri Mobile v2\nOS: Rust Powered")
}

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

5. Reactフロントエンドの実装 (src/App.jsx)

Rustのコマンドを呼び出すUIを作ります。

import { useState } from 'react';
import { invoke } from '@tauri-apps/api/core';
import './App.css';

function App() {
  const [info, setInfo] = useState('');

  async function fetchInfo() {
    // Rustのコマンド 'get_device_info' を呼び出す
    const result = await invoke('get_device_info');
    setInfo(result);
  }

  return (
    <div className="container">
      <h1>Tauri v2 Mobile</h1>
      
      <div className="card">
        <button onClick={fetchInfo}>
          デバイス情報を取得
        </button>
      </div>

      {info && (
        <pre className="info-box">
          {info}
        </pre>
      )}
    </div>
  );
}

export default App;

6. ビルドと実行

シミュレーターまたは実機で実行します。

# iOSシミュレーターで実行
npx tauri ios dev

# Androidエミュレーターで実行
npx tauri android dev

初回ビルドは少し時間がかかりますが、立ち上がるとホットリロードが効く開発環境が整います。

モバイル特有の機能を使うには？

カメラや位置情報など、スマホネイティブの機能を使いたい場合は、Tauri Plugins を使用します。

# カメラプラグインの追加
npx tauri add camera

Rust側とJS側の両方でセットアップするだけで、簡単にネイティブ機能にアクセスできます。

まとめ

Tauri v2は、WebエンジニアとRustエンジニアの架け橋となる画期的なフレームワークです。 特に、「Webの柔軟性」と「ネイティブのパフォーマンス」を両立したいモバイルアプリ開発において、FlutterやReact Nativeに次ぐ第3の選択肢として有力です。

2025年は、Rustでモバイルアプリ開発に挑戦してみませんか？