Tauriの始め方：シンプルなサンプルアプリを作ろう

Tauriとは何か

Tauriは、Rust、JavaScript、TypeScriptを使ってクロスプラットフォーム対応のデスクトップアプリケーションを構築するためのフレームワークです。ElectronやNW.jsと同じ分野ですが、Tauriは軽量性とセキュリティを重視した設計になっています。

従来のElectronはChromium全体を含めるため、アプリケーションのサイズが大きくなりがちでした。一方、TauriはシステムのネイティブWebView（Windows、macOS、Linuxそれぞれ対応）を活用するため、配布ファイルサイズが大幅に削減されます。また、Rustを使用することでメモリ効率とセキュリティも向上しています。

環境構築と初期設定

まず、開発環境を整えましょう。Tauriを使うには、Node.jsとRustの両方が必要です。

# Node.jsがインストール済みか確認
node --version
npm --version

# Rustをインストール（未インストールの場合）
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

次に、プロジェクトを作成します。Tauriが公式で提供しているスキャフォールディングツールを使うと簡単です。

npm create tauri-app

このコマンドを実行すると、プロジェクト名、パッケージマネージャー、フロントエンドフレームワーク（Vue、React、Svelteなど）を対話形式で選択できます。今回はシンプルに進めるため、デフォルト設定で進めることをお勧めします。

シンプルなカウンターアプリを作成

それでは、実際に簡単なカウンターアプリを作ってみましょう。このアプリは、ボタンをクリックするとカウント数が増加する、いたってシンプルな例です。

プロジェクト作成後、フロントエンド部分を編集します。

<!-- src/App.vue または src/App.tsx など -->
<template>
  <div class="container">
    <h1>Tauriカウンターアプリ</h1>
    <p>現在のカウント: 9</p>
    <button @click="incrementCount">カウント +1</button>
    <button @click="resetCount">リセット</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    incrementCount() {
      this.count++;
    },
    resetCount() {
      this.count = 0;
    }
  }
}
</script>

<style scoped>
.container {
  text-align: center;
  padding: 20px;
}

button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>

Rustバックエンドとの連携

Tauriの真の強力さは、フロントエンドとRustバックエンドを連携させるときに発揮されます。src-tauri/src/main.rs内でカスタムコマンドを定義することで、デスクトップアプリならではの機能を実装できます。

#[tauri::command]
fn greet(name: &str) -> String {
    format!("こんにちは、{}さん!", name)
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("アプリケーションの起動に失敗しました");
}

フロントエンド側から、このRustコマンドを呼び出すには：

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

async function greetUser(name) {
  const message = await invoke('greet', { name });
  console.log(message);
}

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

開発中は以下のコマンドで、ホットリロード機能付きで実行できます。

npm run tauri dev

コマンドを実行するとデスクトップアプリウィンドウが立ち上がり、コード変更がリアルタイムで反映されます。

本番環境向けのビルドは：

npm run tauri build

このコマンドで、各OSネイティブの実行可能ファイルが生成されます。生成されたファイルはWindows、macOS、Linux各フォルダのtargetディレクトリに配置されます。

まとめ

Tauriは、Web技術とRustの組み合わせで、軽量かつセキュアなデスクトップアプリケーション開発を実現します。今回紹介したカウンターアプリのような簡単な例から始めることで、フレームワークの基本を習得できます。

Electronに比べてファイルサイズが削減でき、パフォーマンスも優れているため、これから新規開発するデスクトップアプリケーションにはTauriの採用を強くお勧めします。ぜひこの機会に、Tauriでの開発に挑戦してみてください。