TauriでHello World！ゼロから始める実践ハンズオン

2025年7月11日

Tauri

Web 開発の経験があるあなたが、初めてデスクトップアプリケーションを作ってみたいと思った時、どんな技術を選びますか？もしかすると、Electron という名前を聞いたことがあるかもしれませんね。

しかし、今回ご紹介する Tauri は、その Electron を凌ぐパフォーマンスと軽量性を持った、まさに次世代のデスクトップアプリ開発フレームワークです。この記事では、Tauri を使って実際に Hello World アプリケーションを作成する過程を、一歩ずつ丁寧に解説していきます。

Web 技術の知識を活かして、わずか数十分でネイティブなデスクトップアプリケーションが作れる感動を、一緒に体験してみませんか？

背景

デスクトップアプリ開発の課題

現代のソフトウェア開発において、デスクトップアプリケーションの需要は決して減ることがありません。しかし、従来のデスクトップアプリ開発には多くの課題がありました。

まず、プラットフォーム固有の技術習得が必要でした。Windows 用には C#や C++、Mac 用には Swift や Objective-C、Linux 用には C++や GTK+など、それぞれ異なる言語やフレームワークを学ぶ必要があったのです。

また、一つのアプリケーションを複数のプラットフォームで動作させるためには、それぞれのプラットフォーム向けに個別の開発が必要で、コードの共通化が困難でした。

Electron との比較

この課題を解決するために登場したのが Electron です。Electron は、Web 技術（HTML、CSS、JavaScript）を使ってデスクトップアプリケーションを作成できる画期的なフレームワークでした。

項目	Electron	Tauri
言語	JavaScript/TypeScript	Rust + Web 技術
バンドルサイズ	100MB〜	10MB〜
メモリ使用量	高い	低い
セキュリティ	中程度	高い
パフォーマンス	中程度	高い

しかし、Electron には重要な課題がありました。アプリケーションのサイズが大きくなりがちで、メモリ使用量も多く、セキュリティ面での懸念もあったのです。

Tauri が注目される理由

そこで注目されているのが Tauri です。Tauri は Rust で書かれたコア部分と、Web 技術を組み合わせたハイブリッドアプローチを採用しています。

Tauri の魅力は何と言ってもその軽量性です。同じ機能のアプリケーションでも、Electron の 10 分の 1 以下のサイズで済むことが珍しくありません。また、Rust の安全性とパフォーマンスを活かして、セキュアで高速なアプリケーションを作成できます。

課題

従来の開発手法の問題点

これまでのデスクトップアプリ開発では、以下のような問題が常に開発者を悩ませていました：

学習コストの高さ 新しいプラットフォーム用の開発言語やフレームワークを一から学ぶ必要があり、Web 開発の知識を活かすことができませんでした。

開発効率の低さ プラットフォームごとに個別の開発が必要で、同じ機能を何度も実装する必要がありました。

保守性の問題 複数のコードベースを管理する必要があり、バグ修正や機能追加が複雑になりがちでした。

初心者が感じる開発の壁

特に初心者の方にとって、デスクトップアプリ開発は高い壁となっていました。

「Web サイトは作れるけど、デスクトップアプリは別物」という先入観や、「複雑な環境構築が必要そう」という不安が、多くの開発者の挑戦を阻んでいたのです。

また、既存の Web 開発スキルを活かせないと思い込んでしまい、新しい技術習得への一歩を踏み出せない方も多くいらっしゃいました。

環境構築の複雑さ

従来のデスクトップアプリ開発では、環境構築だけで数日かかることも珍しくありませんでした。

IDE の設定、コンパイラのインストール、ライブラリの依存関係管理など、実際のコーディングに入る前の準備が非常に大変でした。

解決策

Tauri の特徴と利点

Tauri は、これらの課題を解決するために設計された革新的なフレームワークです。

軽量性 Rust の最適化されたコンパイル結果により、非常に軽量なアプリケーションを作成できます。

セキュリティ Rust の所有権システムと Tauri の独自の API により、高いセキュリティを実現しています。

パフォーマンス ネイティブコードと同等のパフォーマンスを発揮します。

Web 技術の活用 既存の Web 開発スキルをそのまま活かすことができます。

開発環境の準備

Tauri の開発環境構築は、思っているよりもシンプルです。必要なのは以下のツールだけです：

Rust: Tauri のコア部分を動かすために必要
Node.js: フロントエンド部分の開発に使用
Yarn: 依存関係管理とビルドプロセス

必要なツールの紹介

各ツールの役割を簡潔に説明いたします：

Rust（バックエンド） アプリケーションのコア機能を担当し、システム API へのアクセスやファイル操作などを安全に実行します。

Web 技術（フロントエンド） ユーザーインターフェースの構築に HTML、CSS、JavaScript を使用します。

Tauri CLI プロジェクトの作成、ビルド、実行を簡単に行えるコマンドラインツールです。

具体例

Hello World アプリの作成手順

それでは、実際に Tauri を使って Hello World アプリケーションを作成してみましょう。

環境構築

まず、Rust をインストールします。以下のコマンドを実行してください：

bashcurl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

インストール後、環境変数を更新します：

bashsource ~/.cargo/env

次に、Tauri の開発に必要な依存関係をインストールします：

bash# macOSの場合
xcode-select --install

# Ubuntuの場合
sudo apt update
sudo apt install libwebkit2gtk-4.0-dev build-essential curl wget libssl-dev libgtk-3-dev libayatana-appindicator3-dev librsvg2-dev

# Windowsの場合
# Microsoft Visual Studio C++ Build tools をインストール

プロジェクトの初期化

Node.js と Yarn がインストールされていることを確認した後、新しいプロジェクトを作成します：

bash# プロジェクトディレクトリを作成
mkdir tauri-hello-world
cd tauri-hello-world

# package.jsonを作成
yarn init -y

Tauri CLI をインストールします：

bashyarn add -D @tauri-apps/cli

Tauri プロジェクトを初期化します：

bashyarn tauri init

初期化の際に、以下のような質問が表示されます：

vbnet✔ What is your app name? · tauri-hello-world
✔ What should the window title be? · Hello World with Tauri
✔ Where are your web assets (HTML/CSS/JS) located relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../dist
✔ What is the url of your dev server? · http://localhost:3000
✔ What is your frontend dev command? · yarn dev
✔ What is your frontend build command? · yarn build

基本的な UI 構築

まず、プロジェクトの構造を確認してみましょう：

csstauri-hello-world/
├── src-tauri/          # Rustコード
│   ├── src/
│   │   └── main.rs
│   ├── Cargo.toml
│   └── tauri.conf.json
├── index.html          # フロントエンド
├── style.css
├── script.js
└── package.json

基本的な HTML ファイルを作成します：

html<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Hello World with Tauri</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <h1>Hello World!</h1>
      <p>Tauriで作成した初めてのデスクトップアプリです</p>
      <button id="greet-btn">挨拶する</button>
      <div id="message"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

この HTML ファイルは、シンプルなユーザーインターフェースを提供します。ボタンをクリックすると、Rust で書かれたバックエンド関数が呼び出される仕組みです。

次に、CSS ファイルでスタイルを定義します：

css* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana,
    sans-serif;
  background: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 100%
  );
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-width: 400px;
  width: 90%;
}

美しいグラデーションと影を使って、モダンなデザインにしました。

JavaScript ファイルで、フロントエンドとバックエンドの連携を実装します：

javascriptconst { invoke } = window.__TAURI__.tauri;

document
  .getElementById('greet-btn')
  .addEventListener('click', async () => {
    try {
      const message = await invoke('greet', {
        name: 'Tauri開発者',
      });
      document.getElementById('message').textContent =
        message;
    } catch (error) {
      console.error('エラーが発生しました:', error);
      document.getElementById('message').textContent =
        'エラーが発生しました';
    }
  });

この部分では、Tauri の invoke 関数を使って、JavaScript から Rust の関数を呼び出しています。

Rust バックエンドの実装

次に、Rust コードを実装します。src-tauri/src/main.rs を以下のように編集します：

rust// メインファイルの最初の部分
#![cfg_attr(
    all(not(debug_assertions), target_os = "windows"),
    windows_subsystem = "windows"
)]

use tauri::Manager;

// グリート関数の定義
#[tauri::command]
fn greet(name: &str) -> String {
    format!("こんにちは、{}さん！Tauriの世界へようこそ！", name)
}

この関数は、フロントエンドから呼び出され、日本語の挨拶メッセージを返します。

メイン関数の実装：

rustfn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("アプリケーションの実行中にエラーが発生しました");
}

invoke_handler で Rust の関数をフロントエンドから呼び出せるように登録しています。

ビルドと実行

開発サーバーを起動してアプリケーションを実行します：

bashyarn tauri dev

初回実行時は、依存関係のコンパイルに時間がかかることがあります。以下のような出力が表示されます：

scss   Compiling tauri-hello-world v0.0.0 (/path/to/tauri-hello-world/src-tauri)
    Finished dev [unoptimized + debuginfo] target(s) in 45.23s

アプリケーションが起動すると、美しいデスクトップウィンドウが表示されます。

よくあるエラーとその解決方法

開発中によく遭遇するエラーとその解決方法をご紹介します：

エラー 1: cargo コマンドが見つからない

vbneterror: failed to run custom build command for `tauri-hello-world v0.0.0`
  = note: sh: cargo: command not found

解決方法：

bashsource ~/.cargo/env
# または
export PATH="$HOME/.cargo/bin:$PATH"

エラー 2: webkit2gtk が見つからない（Linux）

luaerror: failed to run custom build command for `webkit2gtk-sys v0.18.0`
  = note: Package webkit2gtk-4.0 was not found in the pkg-config search path

解決方法：

bashsudo apt install libwebkit2gtk-4.0-dev

エラー 3: フロントエンドとバックエンドの通信エラー

javascriptUnhandled Promise Rejection: ReferenceError: Can't find variable: __TAURI__

解決方法： tauri.conf.json で withGlobalTauri を true に設定するか、以下のスクリプトタグを追加します：

html<script src="https://unpkg.com/@tauri-apps/api@1/dist/tauri.min.js"></script>

本番用ビルドの作成

開発が完了したら、本番用のビルドを作成しましょう：

bashyarn tauri build

このコマンドを実行すると、src-tauri/target/release/bundle/ ディレクトリに、プラットフォーム用のインストーラーが作成されます。

macOS の場合：

.dmg ファイル（ディスクイメージ）
.app ファイル（アプリケーションバンドル）

Windows の場合：

.exe ファイル（実行可能ファイル）
.msi ファイル（Windows インストーラー）

Linux の場合：

.deb ファイル（Debian パッケージ）
.rpm ファイル（Red Hat パッケージ）

アプリケーションの実行確認

作成されたアプリケーションを実行してみましょう。「挨拶する」ボタンをクリックすると、「こんにちは、Tauri 開発者さん！Tauri の世界へようこそ！」というメッセージが表示されます。

この瞬間、あなたは Web 技術を使って本格的なデスクトップアプリケーションを作成したことになります。素晴らしい達成感を感じていただけるのではないでしょうか。

まとめ

学習したポイントの振り返り

この記事を通じて、以下のポイントを学習しました：

技術面での学習

Tauri の基本概念と特徴
Rust と Web 技術の連携方法
フロントエンドとバックエンドの通信
実践的な開発フロー

開発体験での発見

環境構築の思ったよりもシンプルさ
Web 開発スキルの有効活用
軽量で高性能なアプリケーション作成の実現

問題解決能力の向上

よくあるエラーの対処方法
デバッグの基本的な考え方
効率的な開発プロセス

今回の体験から得られる価値

Tauri を使った開発体験は、単なる技術習得以上の価値があります。

自信の獲得 「デスクトップアプリは難しい」という先入観を打ち破り、実際に動作するアプリケーションを作成できたことで、新しい技術への挑戦に対する自信を得ることができました。

可能性の発見 Web 技術の知識を活かして、これまで手が出なかった分野にも挑戦できることを実感できました。

効率的な開発体験 従来の開発方法と比べて、はるかに効率的で楽しい開発体験を味わうことができました。

次のステップへの道筋

Hello World アプリケーションの作成は、Tauri の世界への第一歩に過ぎません。

短期的な目標

より複雑な UI の作成
ファイル操作機能の実装
システム通知の活用
アプリケーションの配布

中期的な目標

データベース連携
ネットワーク通信の実装
プラグインシステムの構築
パフォーマンス最適化

長期的な視野

商用アプリケーションの開発
オープンソースプロジェクトへの貢献
Tauri コミュニティでの活動
新しい技術トレンドへの対応

継続的な学習のために

技術の世界は常に進化しています。Tauri も例外ではありません。

学習リソースの活用 公式ドキュメントやコミュニティフォーラムを定期的にチェックし、新しい機能や最適化手法を学び続けましょう。

実践的なプロジェクト 学んだ知識を定着させるために、実際のプロジェクトに取り組むことをお勧めします。

コミュニティへの参加 同じ志を持つ開発者との交流は、学習のモチベーション維持と技術向上に大きく貢献します。

あなたの Tauri の旅は、今日始まったばかりです。この最初の一歩を大切に、次のステップに向かって歩み続けてください。

TauriでHello World！ゼロから始める実践ハンズオン

背景

デスクトップアプリ開発の課題

Electron との比較

Tauri が注目される理由

課題

従来の開発手法の問題点

初心者が感じる開発の壁

環境構築の複雑さ

解決策

Tauri の特徴と利点

開発環境の準備

必要なツールの紹介

具体例

Hello World アプリの作成手順

環境構築

プロジェクトの初期化

基本的な UI 構築

Rust バックエンドの実装

ビルドと実行

よくあるエラーとその解決方法

本番用ビルドの作成

アプリケーションの実行確認

まとめ

学習したポイントの振り返り

今回の体験から得られる価値

次のステップへの道筋

継続的な学習のために

関連リンク

Tauri 公式リソース

開発環境・ツール

学習リソース

コミュニティ

Tauriの記事Tauri

TauriでHello World！ゼロから始める実践ハンズオン

Tauriのインストールから初期プロジェクト作成まで

TauriとElectronのパフォーマンス比較

Tauri × Rust：安全・高速なアーキテクチャの魅力

Tauri入門：最小構成でデスクトップアプリを作ろう

Tauriとは？Electronと何が違うのか徹底解説

記事Article

Prisma × TypeScript：型安全な DB アクセスを極める

TauriでHello World！ゼロから始める実践ハンズオン

JotaiのonMount で atom のライフサイクルを管理する - 初期化処理やクリーンアップをエレガントに

Homebrew でよく使う便利コマンド 15 選

TypeScript によるユーティリティファースト開発：lodash 型定義徹底活用術

Nuxt でサーバーサイドレンダリング（SSR）を完全理解

ブログBlog

「アジャイル導入した」と言いたいだけの上司を黙らせる、失敗しないための根回し術

アジャイルソフトウェア開発宣言から 20 年以上。今、私たちがアジャイルをどう捉え直すべきか

バイブコーディング×アクセシビリティ：誰もが開発できる社会を目指して

“思いつき”がそのまま動く！バイブコーディングによるプロトタイピング術

Culture, Automation, Measurement, Sharing. アジャイル文化を拡張する DevOps の考え方

開発と運用、まだ壁があるの？アジャイルと DevOps をかけ合わせて開発を爆速にする方法

書籍レビューReview

今の自分に満足していますか？『持たざる者の逆襲 まだ何者でもない君へ』溝口勇児

ついに語られた業界の裏側！『フジテレビの正体』堀江貴文が描くテレビ局の本当の姿

愛する勇気を持てば人生が変わる！『幸せになる勇気』岸見一郎・古賀史健のアドラー実践編で真の幸福を手に入れる

週末を変えれば年収も変わる！『世界の一流は「休日」に何をしているのか』越川慎司の一流週末メソッド

新しい自分に会いに行こう！『自分の変え方』村岡大樹の認知科学コーチングで人生リセット

科学革命から AI 時代へ！『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来

今の自分に満足していますか？『持たざる者の逆襲　まだ何者でもない君へ』溝口勇児

科学革命から AI 時代へ！『サピエンス全史下巻』ユヴァル・ノア・ハラリが予見する人類の未来