Windows環境でTauriアプリを作成する

Windows環境で、Tauriのセットアップと開発方法をまとめます。

Tauriとは

Tauriは、軽量でセキュアなデスクトップアプリケーションを作成するためのオープンソースのフレームワークです。主にRust言語をベースに構築されており、RustとWeb技術を使用してクロスプラットフォームのネイティブアプリを開発できます。

Electronとの違い

似たようなフレームワークとして、Electronがありますが、ElectronとTauriには以下のような特徴があります。

セキュリティ

Tauriはフロントエンドとバックエンドの分離が強力で、必要なAPIだけを公開することで攻撃面を最小化する工夫がされています。
また、ネイティブ部分にはRustのメモリ安全性が活用できます。

アプリサイズの軽量化

TauriはRustとOS固有のWebViewを利用しており、Electronと比べて生成されるアプリのバンドルサイズが非常に小さくなっています。
また、消費リソースも低減できます。

柔軟性

Tauriはモジュール性が高く、必要に応じてネイティブ機能をRustで実装できます。
また、フロント部分にはReactやVueといったJavaScriptフレームワークのほかに、Rustのフレームワークを使用することもできます。
そして、V2.0からはモバイル端末も正式対応となり、AndroidやiPhoneアプリも作成することができます。

ただし、エコシステムの成熟度や採用実績などではElectronに及ばない面もあります。

環境セットアップ

Tauriは開発時にMicrosoft C++ Build ToolsとMicrosoft Edge WebView2を使用します。
なので必要な依存関係をインストールします。
また、必要に応じてRust、Node.js、モバイル開発ツールをインストールします。

Microsoft C++ Build Tools

Microsoft C++ Build Toolsインストーラーをダウンロードしてインストールします。
インストール中に、「C++ によるデスクトップ開発」オプションをチェックします。

WebView2

Windows10(バージョン1803以降)のWindowsには、すでにWebView2がインストールされているため、WebView2のインストールは不要です。
インストールされていない場合は、以下からインストールします。

Microsoft Edge WebView2

Rust

以下のコマンドでインストールします。

winget install --id Rustlang.Rustup

デフォルトツールチェーンをMSVCに設定します。

rustup default stable-msvc

Node.js

以下のページからインストールします。
Node.js

モバイル開発ツール

必要ならば、以下に従いモバイル開発ツールをインストールします。

Android

iOS

アプリ作成

必要な依存関係のインストールが終わったらアプリを作成していきます。

以下のコマンドでプロジェクトを作成します。

npm create tauri-app@latest

プロジェクト名とbundle identifierを入力します。

? Project name (tauri-app) ›
? Identifier (com.tauri-app.app) ›

フロントエンド（UI）開発言語を選択します。
フロントエンドの開発には、JS/TSのほかにRust、.NETも選択できます。
今回はJS/TSを選択します。

? Choose which language to use for your frontend ›
❯ TypeScript / JavaScript  (pnpm, yarn, npm, deno, bun)
  Rust
  .NET

JS/TSを選択した場合、使用するパッケージマネージャーを選択します。

? Choose your package manager ›
❯ npm
  pnpm
  yarn
  deno
  bun

UI開発で使用するフレームワークを選択します。
現在JS/TSでは以下のフレームワークを使用できます。
今回はReact/JSを選択します。

? Choose your UI template ›
  Vanilla
  Vue
  Svelte
❯ React  (https://react.dev/)
  Solid
  Angular
  Preact

? Choose your UI flavor ›
  TypeScript
  JavaScript

また、他の開発言語は以下のフレームワークを使用できます。

Rust

Vanilla
Yew
Leptos
Sycamore

.NET

Blazor

プロジェクトフォルダに移動して、以下のコマンドを入力し、アプリを起動します。

npm install
npm run tauri dev

正常に起動すると以下のような画面が表示されるはずです。

以上でプロジェクトの作成は完了です。
手順にすると量は多いですが、エコシステムやドキュメントがしっかりしており、インストールはすんなり進みます。
これからはデスクトップ・モバイルアプリの開発の選択肢としていいかもしれません。