Web技術を活かす！Tauri (Rust & WebView) で叶える高性能・軽量クロスプラットフォーム開発入門
Tauriは、Rust（ラスト）というプログラミング言語とウェブ技術（HTML、CSS、JavaScript/TypeScriptなど）を組み合わせて、小さくて速く、そして安全なアプリケーションを作るためのフレームワークなの。
Tauriは、ウェブエンジニアリングのスキルを持っているあなたにとって、まさに「魔法の杖」のようなツールよ。
あなたが既に持っている<strong>ウェブ開発のスキルや資産（React、Vue、Angularなどのフレームワークやライブラリ）</strong>を、そのままデスクトップアプリケーション開発に活かせるの。新しい言語やUIフレームワークを一から学ぶ必要がないから、開発スピードが格段にアップするわ！
従来の似たようなフレームワーク（例えばElectron）と比較して、Tauriはアプリのサイズが非常に小さいの。これは、Tauriがアプリケーションの核となる部分にRustを使っていて、OSネイティブのWebView（ウェブコンテンツを表示する機能）を利用するから。結果として、メモリ消費も少なく、動作が速いアプリケーションが作れるのよ。
Rustはメモリ安全性の高さで知られていて、Tauriの設計もセキュリティを非常に重視しているわ。設定を工夫することで、より安全性の高いデスクトップアプリケーションを構築できるの。例えば、ファイルシステムへのアクセスなど、ネイティブな操作を細かく制御できるわ。
一つのコードベースから、Windows、macOS、Linux、そして将来的にモバイル（iOS/Android）のアプリケーションを構築できるの。メンテナンスの負担が減るのは、エンジニアにとって大きなメリットよね！
Tauriの導入はとってもシンプルよ。
まず、Tauriアプリをビルドするために必要なツールを準備するわ。
Node.js（npmやyarnといったパッケージマネージャを使うため）
Rust の環境（rustupを使ってインストールするのが一般的よ）
Tauriのサイトで、OSごとの詳細な依存関係を確認してね。
Tauriは、専用のCLIツールを使って簡単にプロジェクトをセットアップできるわ。
# ターミナルで実行するわよ
# 1. 開発したいウェブのプロジェクトを作成・移動
# 例えば、React + Viteで作成する場合:
npm create vite@latest my-tauri-app -- --template react-ts
cd my-tauri-app
# 2. Tauri CLIを追加
npm install -D @tauri-apps/cli
# 3. Tauriプロジェクトを初期化
# これで、Rustのコア部分や設定ファイルが追加されるわ
npx tauri init
# 質問に答えて設定を進めるわよ
# - あなたのアプリ名: "My Tauri App"
# - ウィンドウのタイトル: "Tauri Hello World"
# - ウェブアセットの場所 (開発用): "dist" (Viteなどの標準的なビルド出力先ね)
# - DevサーバーのURL: "http://localhost:5173" (Viteなどの標準的な開発サーバーのURLね)
ウェブのフロントエンドとTauriのネイティブ部分を同時に起動するわ。
# ウェブフロントエンドとネイティブアプリを同時に起動
# 開発サーバー(Viteなど)を起動し、そのURLを読み込むTauriウィンドウが開くわ
npx tauri dev
これで、あなたが普段使っているウェブ開発の環境で開発を進めながら、同時にデスクトップアプリの動作を確認できるわ！
Tauriの魅力の一つは、ウェブのフロントエンド（JavaScript/TypeScript）から、Rustで書かれたネイティブな機能を簡単に呼び出せることよ。
src-tauri/src/main.rs ファイルに、呼び出したい関数を定義するわ。
// src-tauri/src/main.rs
// Tauriが提供するマクロを使って、この関数がウェブから呼び出し可能であることを宣言するわ
#[tauri::command]
fn greet(name: &str) -> String {
// Rustで処理を行い、結果の文字列を返す
format!("こんにちは、{}さん！Tauriから挨拶します", name)
}
fn main() {
tauri::Builder::default()
// ここに、ウェブから呼び出せるようにした関数を追加するわ
.invoke_handler(tauri::generate_handler![greet])
.run(tauri::generate_context!())
.expect("アプリケーションの起動に失敗しました");
}
ウェブ側（例
src/App.tsx）から、Rustで定義した関数を呼び出すわ。Tauriは、このためのAPIを提供しているの。
// src/App.tsx (Reactの場合)
import { useState } from 'react';
// TauriのAPIをインポートするわ
import { invoke } from '@tauri-apps/api/tauri';
function App() {
const [greeting, setGreeting] = useState('');
const [name, setName] = useState('エンジニア');
async function handleGreet() {
// invoke関数を使って、Rust側で定義した `greet` 関数を非同期で呼び出すわ
const response = await invoke('greet', { name: name });
// 戻り値は自動的にJavaScriptの型に変換されて返ってくるわ
setGreeting(response as string);
}
return (
<div>
<h1>Tauri + React サンプル</h1>
<input
id="name-input"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="名前を入力してね"
/>
<button onClick={handleGreet}>挨拶してもらう</button>
{/* Rustからのメッセージを表示 */}
{greeting && <p style={{ marginTop: '10px', color: 'darkgreen' }}>{greeting}</p>}
</div>
);
}
export default App;
このように、Tauriを使うと、Rustの高性能で安全なネイティブ機能と、開発しやすいウェブのUIを、とてもスムーズに連携させることができるの。
