React + Tauriでデスクトップアプリ開発に入門してみた

2024/11/22 に開催されました「【大阪+オンライン】クラスメソッドのReact事情大公開スペシャル#5」の登壇資料になります。

https://classmethod.connpass.com/event/333632/

Transcript

1. 2024/11/22 ⻄村 祐⼆ React + Tauriで デスクトップアプリ開発に⼊⾨してみた
2. ⾃⼰紹介 2 • 名前 ◦ ⻄村 祐⼆ • 部署 ◦ AWS事業本部オペレーション部 • 業務 ◦ 内製開発 ◦ 業務改善 • 住まい ◦ 京都 • 趣味 ◦ 2歳の息⼦の⼦育て 2019/2020 APN AWS Top Engineers 2024/2023/2022/2021 APN ALL AWS Certifications Engineers
3. 今⽇話すこと 3 Tauriについて ReactとTauriで簡単なデスクトップアプリを作ってみた話 ハマったところと感想の話
4. ⽬次 4 • Tauriとは ◦ 概要 ◦ 主なコンポーネント ◦ セキュリティ • 簡単なアプリを作ってみた • 開発中にハマったところ • 実際に使ってみた感想 • まとめ
5. Tauriとは
6. Tauriとは 6 Rustで書かれた軽量なクロスプラットフォーム対応GUI開発ツール • 軽量性とセキュリティ ◦ メインプロセスがRust実装で型安全 ◦ WebViewを利⽤するためElectronなどよりインストーラサイズとメモリ使⽤量が⼩さい • クロスプラットフォーム対応 ◦ Windows、macOS、Linux、iOS（v2.0）、Android（v2.0） • Web技術の利⽤可能 ◦ UI部分にReactやVue.jsなどのWeb技術を使⽤可能
7. Tauriの主なコンポーネント 7 • WebView制御機能 ◦ フロントエンドをレンダリングするためのコンポーネント ◦ プラットフォームに応じて最適なWebViewを使⽤ ◦ クロスプラットフォームを実現 • コアプロセス ◦ バックエンドロジックを担当、Rustで実装 ◦ システムリソースへのアクセスを管理 ◦ ネイティブ機能を提供
8. Tauriの主なコンポーネント 8 • WebView制御機能 ◦ フロントエンドをレンダリングするためのコンポーネント ◦ プラットフォームに応じて最適なWebViewを使⽤ ◦ クロスプラットフォームを実現 • コアプロセス ◦ バックエンドロジックを担当、Rustで実装 ◦ システムリソースへのアクセスを管理 ◦ ネイティブ機能を提供
9. TauriのWebViewの制御機能 9 • 2つのRustクレート（ライブラリ）で構成 ◦ tao ▪ プラットフォームのウィンドウ管理（メニューバーやシステムトレイなど）を担当 ◦ wry ▪ プラットフォームに応じてフロンエンドとWebViewのレンダリングを担当
10. Tauriのセキュリティ 10 セキュリティを重視して設計されている • 権限管理 ◦ アプリケーションがアクセスできるリソースを制限 • コマンドスコープ ◦ 必要最⼩限のコマンドのみ実⾏を制御 ◦ 不要な機能へのアクセスを防御 • コンテンツセキュリティポリシー (CSP) ◦ フロントエンドのコンテンツが信頼できるソースからのみ読み込むように制御
11. Tauriのプラグインシステム 11 • 機能拡張を容易にするプラグインシステムを提供 ◦ WebViewからファイル操作、OSの情報取得などバックエンドの機能を呼び出す ◦ Tauriのライフサイクルにフックし、処理を追加 • 公式プラグインやコミュニティ製プラグインで柔軟にカスタマイズ可能
12. 簡単なアプリを作ってみた
13. ストップウォッチアプリを作ってみた 13 • 要件 ◦ 常に最前⾯で表⽰ ◦ 可能な限りシンプルなUI • 機能 ◦ アプリ起動で時間の経過をスタート ◦ ダブルクリックでストップ‧スタート ◦ 右クリックでリセット ◦ リセットしたらローカルに経過時間をファイル出⼒
14. ストップウォッチアプリで利用したライブラリ 14 • 開発環境 ◦ macOS ◦ Tauri 2.0 • Web ◦ React ◦ Vite ◦ Tailwind CSS ◦ Framer Motion • Backend ◦ @tauri-apps/plugin-fs
15. 実装のポイント 15 • 雛形プロジェクトを作成できるCLIが提供されている ◦ create-tauri-app ◦ 対話形式で雛形を作成していく ◦ フレームワークにはJS以外もある ▪ .NET、Rust
16. 実装のポイント 16 • React選択時に作成される雛形 ◦ src：フロントエンド ▪ css、js ◦ src-tauri：フロントエンド以外 ▪ バックエンド（Rust） ▪ Tauriの設定ファイル
17. 実装のポイント 17 • 開発時のデバッグ ◦ npm run tauri dev ◦ ローカルでデスクトップアプリ起動 ◦ HMR(ホットリロード)も動作するので快適
18. 実装のポイント 18 • 開発時のデバッグ ◦ WebViewデバッグコンソールを表⽰ ▪ 重要 ▪ cmd + opt + i エラーがバックエンド側（Rust）で発⽣したのか フロントエンド側で発⽣したのか確認するためにもコンソール画⾯は必須
19. 実装時にRustの知識は必要？ 19 • あった⽅が良いが不要な場合もある • フロントエンドからバックエンドに命令を送るプラグインが提供されている ◦ ⽬的にあうプラグインがある場合はRustによる実装が不要になる場合がある ◦ 例）マシン内のファイル操作を⾏うプラグイン：plugin-fs ▪ Tauriの設定ファイルで明⽰的に許可することで利⽤可能
20. 作ったアプリのインストール方法 20 • コマンド⼀発でdmgファイルを出⼒してくれる ◦ npm run tauri build -- --bundles dmg ◦ あとはいつもどおりの⽅法でアプリを追加し起動すると開発時と同じように起動 ◦ ちょっと感動
21. 他プラットフォームでインストール 21 • Windows PCにインストールしてみた ◦ 開発⽤のWindows PCがないためMac上でWindows向けにビルド ◦ NSIS（Nullsoft Scriptable Install System）を利⽤ ▪ Windows⽤のインストーラーを作成するためのツール ▪ Mac上でWindows向けにビルドする機能はまだ実験段階 ◦ 問題なくインストールでき、正常に動作してましたがWindows環境でのビルドが推奨 https://v2.tauri.app/distribute/windows-installer/
22. 他プラットフォームでインストール 22 • 必要なツールのインストールとビルドコマンド⼀発でexeファイルを出⼒ ◦ npm run tauri build -- --runner cargo-xwin --target x86_64-pc-windows-msvc ◦ Windows PCで実⾏してみるとインストーラーが起動 https://v2.tauri.app/distribute/windows-installer/
23. 他プラットフォームでインストール 23 • Windows環境でも正常に動作 ◦ OS: Windows 11
24. 他プラットフォームでインストール 24 • アンインストール⽤のファイルもデフォルトで⽤意されている ◦ アプリの撤去も簡単
25. 開発中にハマったところ
26. 開発中にハマったところ 26 • 公式からまだチュートリアル的なものが提供されていない？ ◦ リファレンスを⾏き来することになる • 想定した挙動にならないとき、どこが原因か特定するのが難しい（慣れの問題） ◦ フロントエンド（JS）実装ミス、WebViewの互換性の問題、 ◦ Tauriの設定ミス、権限不⾜、バックエンド（Rust）の実装ミス • 特にWebView関連の設定でハマった ◦ それ以外はすんなり動いた ◦ 簡単なアプリであったためバックエンド側は特に触れてない ◦ 今回、３つ紹介
27. 開発中にハマったところ（1/3） 27 • CSSのopacityが動作しない ◦ 不透明度の設定がWebViewに反映されない 解決策 • macOSPrivateApiを有効にする必要がある https://v2.tauri.app/reference/javascript/api/namespacewebview/#properties-1
28. 開発中にハマったところ（2/3） 28 • デスクトップアプリのタイトルバーの消し⽅がわからない 解決策 • decorationsをfalseにするだけ
29. 開発中にハマったところ（3/3） 29 • タイトルバーを消したときアプリの移動ができない 解決策 • data-tauri-drag-regionをHTMLのタグに追加 • permissionsに"core:window:allow-start-dragging"を追加
30. 実際に使ってみた感想
31. 所感 31 • ⾃分好みのデスクトップアプリを作るのが楽しい ◦ ツールの使い⽅などを覚えることに追われるのではなく、ゼロから形していく • 思ったよりも簡単にデスクトップアプリが作れる ◦ もっとハマると思ったけど意外とすんなり作れた • 意外とそのままのWebアプリのコードでうごく ◦ 追加設定やコードの修正を必要とされると思った、コピペでなんとかなる • Rustとの距離感がいいかんじ ◦ 必ずRustでの実装が必要ではない ◦ 勉強のためにあえてRust（バックエンド）で実装することもできる
32. まとめ
33. まとめ 33 • React + Tauriで軽量でセキュアなデスクトップアプリの作成可能 • Reactのコードはそのまま活⽤できそう • プラグイン活⽤でRustがわからなくてもデスクトップアプリの開発は可能 • ⾃分好みのデスクトップアプリを作るのは楽しい！