Tauriの始め方とデバッグ方法
はじめに
この記事ではクイックスタートに役立てられればと思い作成しました。
日本語でのTauri記事の少なさが悲しかったので作成しています。
学習ログな趣もあるため間違っていたらすみません、指摘頂きたいです。
Tauriとは
Webアプリ開発者がネイティブアプリを作成したいと思ったときに、
もしくはRustaceanがGUIアプリを作成したいと思ったときに選択肢に上がるフレームワークです。
前者の方はElectoronも候補に上がると思いますが、Tauriはより自然にセキュアに作れる点が優れています。
WebViewを利用するフレームワークなので(?)、HTML/CSS/JSを使うフレームワーク(React, Vue.js等)であればフロントエンドに採用できます。
そのため好きなフレームワークを用いてフロントエンドが作れ、またバックエンドはRustのパフォーマンスやメモリ安全の恩恵を受けたネイティブアプリが作れます。(言語制約はなくなる方向で開発が進められており、よりRustにノータッチで開発が出来るようになる予定)
クロスプラットフォーム開発ができ、Tauri V2からはスマホアプリにも対応しました。
Rust分からね～～～って人向けにJS/TSだけでも完結できるようなプラグインが公式から出ている。
環境構築
公式を参考にするのが一番。
Rustがビルドできて、Node.js等のフロントエンド開発用の環境構築ができていればOK。
スマホアプリ作りたいならそれに加えてAndroid StudioやXcode周りの環境構築が必要。
新規作成
公式を参考にするのが一番。
1. プロジェクト作成
# npmを使用する場合
npm create tauri-app@latest
# Cargoを使用する場合
cargo create-tauri-app
なんか色々聞かれるので、使いたいものを選んでいけばOK。
2. 開発モードで起動
npm install等で依存関係をインストール。
その後、npm run tauri dev とか cargo tauri devとかでアプリが立ち上がれば環境構築は成功！
3. リリースビルドな
npm run tauri build や cargo tauri buildでビルドできる。ご丁寧にインストーラーまで作成される。
既存からの移行
公式を参考にするのが一番。
Tauri CLIをインストールして、tauri initをしてポチポチしていくだけです。
特定のフレームワーク(SSRするやつ)はそれ用の設定方法も記載あります。
デバッグ方法
公式を参考にするのが一番。。。でもない。FE/BEどちらもまとめてVSCode上でデバッグすることに対応していないため。
デバッグビルド時のみで動作させたいとき、Rust側でどう記述すればいいのかについては目を通してもいいかも。
VSCode上でデバッグしたいときは、
- WebViewのアタッチ
- Rustプロセスへのアタッチ
の両方が必要。
Windows環境であれば、以下の記事を参考にするのがよい(Visual Studio Windows Debuggerを使ったよりよいデバッグができる)。
そうでなければ上の記事でも参考として出てくるこちらがよい。
おわりに
ここまで環境構築できればあとはVive Cordingできると思います。
今後、もう少し詳しいTauriの使い方やアーキテクチャ、テスト手法周りの記事を書く予定です。
また、Tauriアーキテクチャを理解するにあたって私が新たに学習した内容についての記事も書く予定です。
Discussion