Tauriの基礎 - 開発環境

2025年12月4日 (木) 19:30時点におけるWiki (トーク | 投稿記録)による版 (ページの作成:「== 概要 == Tauriは、RustとWeb技術を組み合わせてデスクトップアプリケーションを構築するための軽量なフレームワークである。<br> <br> ElectronやNW.jsのような既存のデスクトップアプリケーション開発フレームワークと比較して、Tauriは大幅に小さいバイナリサイズと優れたパフォーマンスを実現している。<br> これは、ChromiumやNode.jsをバンドルする代わ…」)
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。(旧サイトでは記事を追加しておりません)

概要

Tauriは、RustとWeb技術を組み合わせてデスクトップアプリケーションを構築するための軽量なフレームワークである。

ElectronやNW.jsのような既存のデスクトップアプリケーション開発フレームワークと比較して、Tauriは大幅に小さいバイナリサイズと優れたパフォーマンスを実現している。
これは、ChromiumやNode.jsをバンドルする代わりに、OSが提供するネイティブのWebViewを利用しているからである。

Tauriのアーキテクチャは、バックエンド (コア機能やシステムAPI) にRustを使用し、フロントエンド (ユーザインターフェース) には任意のWebフレームワークを使用できる柔軟な設計になっている。
React、Vue、Svelte、あるいは純粋なHTML / CSS / JavaScript等、開発者が慣れ親しんだ技術を選択することができる。

Tauriで開発されたアプリケーションは、Windows、MacOS、Linuxの各プラットフォーム向けにビルドできる。
また、モバイルプラットフォーム (iOS、Android) のサポートも進行中である。

バックエンドのRustコードは強力な型システムとメモリ安全性を提供し、フロントエンドのReactは豊富なエコシステムと開発者体験を提供する。
この組み合わせにより、安全で高速、かつ保守性の高いデスクトップアプリケーションを開発できる。


依存関係のパッケージのインストール

Tauriがネイティブアプリケーションをビルドするために必要な依存関係をインストールする。

webkit2gtk3はWebViewを表示するためのエンジン、opensslは暗号化通信、他のライブラリはアプリケーションの各種機能やアイコン表示に使用される。

# SUSE
sudo zypper install curl wget file webkit2gtk3-devel openssl-devel libappindicator3-devel librsvg-devel


Node.jsのインストール

Reactを動かすためのJavaScript環境が必要である。

最も推奨される方法は、Node Version Manager (nvm) を使用する方法である。
これを使用すると、異なるプロジェクトで異なるNode.jsのバージョンを簡単に切り替えることができる。

Node.jsのインストールは、インストール - Yarn#NordJS のページを参照すること。


Tauri CLIのインストール

Tauriのコマンドラインツールをインストールする。
これには2つの方法が存在するが、推奨される方法は npm を使用する方法である。

# ローカルにインストールする場合
npm install @tauri-apps/cli

# グローバルにインストールする場合
npm install -g @tauri-apps/cli

# Rustのパッケージマネージャであるcargoを使用する場合
cargo install tauri-cli


インストールが完了した後、動作確認をする。

npm exec tauri --version



プロジェクトの作成

任意のディレクトリに移動して、以下に示すコマンドを実行する。

npm create tauri-app@latest
  • プロジェクト名
    任意の名前 (例: my-tauri-app)
  • パッケージマネージャ
    npm
  • UIフレームワーク
    React
  • TypeScriptを使用するかどうか
    TypeScriptを推奨する。


プロジェクトのセットアップが完了した後、自動生成されたプロジェクトディレクトリに移動する。

cd <プロジェクト名>



プロジェクト構造

srcディレクトリにはReactのフロントエンドコード、src-tauriディレクトリにはRustのバックエンドコードが配置される。