異色の組み合わせ?! Tauri + Blazor を試してみた!

Blazor Advent Calendar 2025 4日目の記事です。

TL;DR

• ウェブ系 + Rust を利用する、ネイティブアプリケーション用フレームワーク Tauri と Blazor を組み合わせてみる
• Rust と C# (.NET 系) を繋げる珍しいプロジェクト
• 多言語プロジェクトになるので実用性は…? (Rust、C#、JavaScript (or TypeScript) (+ Swift, Kotlin))

Tauri + Blazor

本記事では、Rust 製のネイティブフレームワーク Tauri と .NET 期待の新星 Blazor を組み合わせる記事となっています。

私の記事の読者は、.NET に詳しい方が多いと思うので、Blazor の説明は割愛します。ただ、Tauri に関しては、ウェブ系かつ Rust 関連の技術であるため、少し解説します。

Tauri とは

Tauri とは、ウェブアプリケーションをネイティブ化することができるプロジェクトです。ネイティブ部分は Rust を用います。

フロントエンドは JavaScript (または TypeScript) を用いることで、簡単にデザインを構築できます。処理部分や、ネイティブでしか実装できない部分は、Rust (や Swift、Kotlin) を用いて高速・安全に実装できます。

昔ながらの Electron (VSCode のベース) との大きな違いは、「ウェブ部分がアプリケーションに内蔵されていない」ということです。Electron 系のアプリを複数ダウンロードすると、ウェブレンダリングエンジンが重複し、容量が圧迫されるという問題がありました。Tauri では、OS ごとの Web レンダリングエンジンを用いているため、重複することがなく、容量面でも軽量なアプリケーション開発ができます。

他にもたくさんの特徴があるので、詳細は公式サイトをご覧ください。

Tauri に組み合わせられるウェブフレームワーク

さて、従来の Electron から大きく進化を遂げた Tauri ですが、先述の通りフロントエンドではウェブフレームワークを用います。

公式が提供している create-tauri-app でアプリケーションを作成する場合、フロントエンドで用いる言語は以下から選べます:

• Rust (cargo)
  バックエンドが Rust なので、フロントエンドでも Rust wasm を用いるのは納得ですね。
• TypeScript / JavaScript (pnpm, yarn, npm, bun)
  ウェブ系といえば、JS/TS ですよね。
• .NET (dotnet)
  え????? (本題です)

ウェブ系 (しかもフロントエンド) で .NET が出てくるのはかなり意外でした。

Tauri + Blazor 使ってみる

ということで、ようやく本題です。

Tauri では、なぜかフロントエンドとして Blazor wasm が使えます。

試してみましょう。

1. Tauri を準備する

# ツールの準備
cargo install tauri-cli --version "^2.0.0" --locked

# プロジェクトの作成
npm create tauri-app@latest
# cargo を使う場合は↓
# cargo install create-tauri-app --locked
# cargo create-tauri-app

> npx
> "create-tauri-app"

✔ Project name · tauri-blazor
✔ Identifier · net.lemonium.tauri-blazor

プロジェクト名を設定します。(今回は tauri-blazor にしました)

? Choose which language to use for your frontend ›
  TypeScript / JavaScript  (pnpm, yarn, npm, deno, bun)
  Rust  (cargo)
❯ .NET  (dotnet)
? Choose your UI template ›
❯ Blazor  (https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor/)

フロントエンドで用いる言語は .NET、UI フレームワークは Blazor を選択。

Template created! To get started run:
  cd tauri-blazor
  cargo tauri android init

For Desktop development, run:
  cargo tauri dev

For Android development, run:
  cargo tauri android dev

すると、上記のログを表示し、プロジェクトが作成されます。

2. 動かす

ディレクトリの構成は以下のようになります:

$ tree -L 2
.
├── src
│   ├── App.razor
│   ├── Pages
│   ├── Program.cs
│   ├── Properties
│   ├── TauriBlazor.csproj
│   ├── _Imports.razor
│   ├── bin
│   ├── obj
│   └── wwwroot
└── src-tauri
    ├── Cargo.lock
    ├── Cargo.toml
    ├── build.rs
    ├── capabilities
    ├── gen
    ├── icons
    ├── src
    ├── target
    └── tauri.conf.json

13 directories, 8 files

ルートディレクトリに対し、src と src-tauri が作成され、前者に Blazor 関係のファイルが、後者に Tauri 関係のファイルが入っています。

ルートディレクトリで以下のコマンドを実行することで起動できます:

cargo tauri dev

また、ファイルが別々に別れているため、Blazor 単独でのビルドも可能です。

cd src
dotnet watch run

で起動できます。

感想

試みとしては非常に面白いのです。ただ、多言語プロジェクト (Rust、C#、JavaScript (or TypeScript) (+ Swift, Kotlin)) になるので、言語もパッケージマネージャーも扱いが難しそうです。個人プロジェクトならギリギリ使えると思いますが、複数人関係するプロジェクトではおすすめできません。

っていうか、なんで追加されたんでしょうか…? (初めて追加された PR を見ても、追加された背景はよくわからない…)

Blazor をネイティブ化したい人は、普通に .NET MAUI + Blazor のほうが、アプリケーションサイズが軽量にしたいなら Tauri で Rust wasm か TS / JS を選択したほうがよさそうです。

参考

• https://v2.tauri.app/ja/start/create-project/