Tauriで作るデスクトップアプリ
目次
表題の件ですが、
デスクトップを整理するアプリ、Sortdを作成しました。
https://github.com/coffee522jelly-development/Sortd
2026年5月18日、リリースを開始しました。
まず、JavaScriptでデスクトップアプリを作るとはどういうことか？
一般的にJavaScriptは「Webブラウザの中で動く言語」というイメージが強いですが、現在ではJavaScriptだけでWindowsやmacOS向けのデスクトップアプリを開発できます。
その代表例が、Electron と Tauri です。
両者とも基本思想は共通しています。
- UIはHTML/CSS/JavaScriptで作る
- そのWeb画面を「ネイティブウィンドウ」の中に表示する
- JavaScriptからOS機能（ファイル操作など）を呼び出せる
つまり、
「ブラウザ技術で作ったWebアプリを、ネイティブアプリとして動かす」
訳ですね。
Electronとは何か？
Electron は、簡単に言えば：
- Chromium（Google Chrome本体）
- Node.js（サーバーサイドJavaScript実行環境）
を丸ごと同梱したデスクトップアプリ実行環境です。
構造を図にすると：
[ あなたのHTML/CSS/JavaScript ]
↓
Electron Runtime
┌─────────────────┐
│ Chromium │ ← UI描画
│ Node.js │ ← OS操作
└─────────────────┘
↓
Windows
なぜNode.jsが必要か？
普通のブラウザJavaScriptは、安全性のためにOSへ直接アクセスできません。
例えばブラウザでは：
- C:\ を自由に読む
- 任意ファイルを削除する
- レジストリを触る
- システムプロセスを起動する
などはできません。
しかしデスクトップアプリでは必要です。
そこでElectronは、Node.jsを統合することで：
const fs = require('fs')
fs.unlinkSync('C:/temp/test.txt')
のようなコードを可能にしています。
つまり、
JavaScriptが「ローカルPCを操作できる」
ようになる。
これは非常に強力です。
Electronのセキュリティ問題
しかしここが最大の危険点でもあります。
Electronでは、画面部分（レンダラープロセス）にNode.js機能を露出させる構成が可能でした。
つまり、もしアプリにXSS脆弱性があると：
require('fs')
のようなNode APIを悪意あるスクリプトが呼べる可能性があります。
結果として：
- ファイル削除
- 情報窃取
- 任意コマンド実行
に繋がるケースがありました。
これは通常のWebサイトのXSSより遥かに危険です。
WebサイトのXSS：
→ 「ブラウザ内だけ」の被害
ElectronのXSS：
→ 「OS全体」へアクセス可能
だからElectronでは：
nodeIntegration: falsecontextIsolation: true- preload script分離
などのセキュリティ設定が非常に重要になります。
なぜElectronアプリは重いのか？
ElectronアプリはChromiumを丸ごと内蔵します。
つまり各アプリが：
- 独自ブラウザ
- JavaScriptエンジン
- 描画エンジン
- 各種ライブラリ
を全部持っています。
例えば：
- Visual Studio Code
- Discord
- Slack
などもElectron製です。
そのため：
- メモリ使用量が大きい
- 初回インストールサイズが大きい
という特徴があります。
はじめてデスクトップ掃除アプリを作った時にはexeが348MB。
多くのElectronアプリでは：
アプリコード数MB
+
Chromium数百MB
という構造になります。
Tauriとは何か？
そこで近年注目されているのが Tauri です。
TauriはElectronと違い：
Chromiumを同梱しません。
代わりにOS標準のWebViewを利用します。
構造はこう：
[ HTML/CSS/JavaScript ]
↓
WebView
↓
Tauri Core(Rust)
↓
Windows
WebViewとは？
WebViewとは：
OSが元々持っている「ブラウザ表示機能」
です。
Windowsなら：
- WebView2（Edgeベース）
macOSなら：
- WKWebView（Safariベース）
Linuxなら：
- WebKitGTK
などを利用します。
つまりTauriは：
「既にOSにあるブラウザ機能を借りる」
ので、Chromiumを丸ごと抱え込む必要がない。
これが劇的な軽量化の理由です。
なぜ8MBまで小さくなったのか？
Tauriで軽い理由は：
Electron
アプリ
+ Chromium
+ Node.js
= 数百MB
Tauri
アプリ
+ Rustランタイム少量
= 数MB〜十数MB
だからです。
- Electron版：348MB
- Tauri版：8MB
差は歴然です。
Rustが使われる理由
Tauriは内部をRustで書いています。
Rustは：
- C++並みに高速
- メモリ安全
- バッファオーバーフローに強い
という特徴があります。
さらに：
- Node.js常駐不要
- GC不要
- ネイティブコード生成
なので非常に軽量です。
「Rust製のVC++コンパイラ」とは？
ここは少し整理するとより正確です。
Windows向けにTauriをビルドするとき：
- Rustコンパイラ（rustc）
- Microsoft Visual C++ Build Tools
が必要になります。
つまり：
Rust → Windowsネイティブexe
へ変換する際に、MSVCツールチェインを利用します。
そのため：
「Rust製VC++コンパイラ」
というより、
「RustがMSVCツールチェインを利用してWindows exeを生成する」
という表現の方が技術的には正確です。
ElectronとTauriの思想の違い
Electron
思想：
「Web技術を完全に同梱して、どこでも同じ動作を保証する」
メリット：
- 動作が安定
- OS差異が少ない
- Web開発者が扱いやすい
デメリット：
- 重い
- メモリ消費大
- セキュリティ設計が重要
Tauri
思想：
「OS標準機能を活用して軽量化する」
メリット：
- 軽量
- 高速
- セキュリティが比較的強い
- 配布サイズ小
デメリット：
- WebView差異の影響を受ける
- Electronほど成熟していない部分もある
- Rust知識が必要になる場面がある
「Tauriすごい」と感じるポイント
「WebViewをVC++で操作できる世界」と
「JavaScript UI」を
「Rustで安全に橋渡ししている」
ここがTauriの巧妙な設計です。
つまりTauriは：
- フロント：Web技術
- バックエンド：Rust
- 描画：OSネイティブWebView
を繋ぐことで、
「Web開発体験」
と
「ネイティブアプリの軽量性」
を両立しようとしている。
総括
Electronは：
「Chromiumを丸ごと抱えたWebブラウザ型アプリ」
Tauriは：
「OSのWebViewを借りる軽量ネイティブ型アプリ」
です。
その結果：
- Electronは巨大だが安定
- Tauriは軽量だがOS依存が増える
というトレードオフが生まれています。
348MB → 8MB
という差は、
単なる圧縮技術ではなく、
「ランタイムを同梱するか」
「OS機能を借りるか」
という設計思想そのものの違いです。
ブラウザはなんでもできるため、作れるアプリの幅はElectron>Tauriですが、
小さなアプリの場合はTauri>Electronという図式が成り立ちます。
どのようなアプリを作れるか？どのような場合に有効か？を考えて最適な設計でアプリを作りたいと思いました。