LoginSignup
7
3

More than 1 year has passed since last update.

TAURI + SolidJSで開発してみる Part1

Last updated at Posted at 2023-05-23

はじめに

昨年,Tauriに関する記事を書いた。あの頃は文化祭へ向けた作品を作っている中で,ちらっと見かけたTauriのリリース。お試し感覚で使ってみたが,個人的な評価はかなり高かった。いずれ使うことになるだろうと思っていたが,実際に使ってみようと感じる場面があったので,試してみることにした。
この記事は,こちらの記事の延長として執筆しています。前回の記事の内容がなくても読める構成ですが,興味のある方は
こちらの記事も読んでいただけると幸いです。

Tauriに移行しようと思ったきっかけ

以前執筆した記事でも触れられているブラウザゲー。文化祭という一大イベントの後も開発を続けてきたが,デスクトップ版へ移植しようと思い立った。早速,Electronでの制作に取り掛かろうとしたわけだが,いくつかの問題が発生した。

モバイル版の存在

皆さん御存知の通り,ElectronはPC向けでありモバイルプラットフォームには対応していない。あわよくばモバイルも...と考えていたため,今回はElectronを見送ることにした。勿論Tauriも記事執筆時点でモバイル対応はしていないが,正式リリース時より,モバイル対応は公言されており,気長に開発している間に実装されるだろうという期待も込めてTauriを選択する理由の一つとした。

パフォーマンス

以前の記事からもわかるように,Tauriのパフォーマンスは素晴らしいものである。かなりの少数派であろうが,Web技術でデスクトップアプリを制作する,特にゲーム分野では有利に働くのではないだろうか。また,バックエンドにはRustという強力な言語が備わっている点も評価できる。

早速試す

Rust,Visual Studio(とC++によるデスクトップ開発)のインストールは終わっているものと想定させていただく。また,今回はCargoとnpm,yarnなどのパッケージマネージャーが利用可能だが,npmを利用する。

npm i -D @tauri-apps/cli
npm i create-tauri-app
で必要なパッケージをインストールしておく。
npx create-tauri-app
で以前の記事とは異なり,create-tauri-appを利用して手早く環境構築を行う。
image.png
まず最初に,プロジェクト名を設定する。
image.png
image.png
次に,フロント用の言語とパッケージマネージャーを選択する。上下矢印で変更できる。Rustを選択した場合はCargoを利用できる。
image.png
次に,UIテンプレートを選択する。今回はSolidを利用する。
image.png
最後に,TypescriptかJavascriptかを選択する。
image.png
このようなメッセージが表示されていれば,正常にプロジェクトが作成されている。


サクッとパッケージのインストールを済ませ,
念願の初回起動。
npm run tauri dev
image.png
そうするとビルドが始まるので,お茶でも飲んで待つことにする。(2~3分程)
image.png
中々いい感じのテンプレートが立ち上がった。勿論F12やCtrl+Shift+Iで開発者ツールを立ち上げられる。WindowsならEdgeの開発者ツールが起動するはずである。

軽く触ってみる

プロジェクトの構造はいたってシンプル。
src配下のファイルはフロント部分,src-tauri配下はtauri関連やメインプロセス(main.rs)が置かれている。
image.png
Dev環境が起動中であれば,ホットリロードも有効なのでとてもありがたい。

さいごに

昨年の復習がてら軽くTauriを使ってみたが,簡単にプロジェクト作成もでき,思っていたより敷居が低いのかなと感じた。本当の難所はメインプロセスにカスタムコマンドやその他処理を追加するところだろうが,そこは追って学習していこうと思う。
TauriがElectronの代替となるかはどうか,今のところ定かではないだろう。しかし,これから益々とこのTauriが発展していくことを願って別れとさせていただく。是非とも良い開発ライフを送っていただけたらと思う。最後までお読みいただきありがとうございました。

7
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
3