MacのデスクトップアプリをTauri・React開発するためにプロジェクトを作成

はじめに

こんにちは、エンジニアのケイタMaxです。

今回はMacのデスクトップアプリを開発してみたくなったので、

こちらの記事の通りにTauriを使用してアプリの立ち上げまでをやってみようと思います。

Tauriとは

Tauri は、主要なデスクトップおよびモバイル・プラットフォームのすべてで、軽量・高速なバイナリ・ファイルを構築できるフレームワーク（仕組み）です。フロントエンドには、HTML、JavaScript、CSS にコンパイルされるフレームワークを利用してユーザー・エクスペリエンス（UX）を構築し、バックエンドの処理ロジックには、必要に応じて Rust、Swift、Kotlin などの言語を活用できます。
(引用：https://v2.tauri.app/ja/start/)

Tauri は HTML/CSS/JavaScriptなどのWeb技術で見た目を作り、Rust等でバックエンドを処理す流ことができるデスクトップアプリ開発フレームワークのようです。

インストール

参考下の記事にあるように、インストールします。

brew install rustup-init
rustup-init

プロジェクト作成

以下コマンドでプロジェクトが作成できます。

npm create tauri-app@latest

色々聞かれるので質問に答えていきます。
今回はReact TypeScriptでフロントを書きたいので以下のように回答しました。

% npm create tauri-app@latest
Need to install the following packages:
create-tauri-app@4.5.9
Ok to proceed? (y) y
✔ Project name · tauri-sample
✔ Identifier · com.tauri-sample.app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
✔ Choose your package manager · npm
✔ Choose your UI template · React - (https://react.dev/)
✔ Choose your UI flavor · TypeScript

Template created! To get started run:
  cd tauri-sample
  npm install
  npm run tauri android init
  npm run tauri ios init

For Desktop development, run:
  npm run tauri dev

For Android development, run:
  npm run tauri android dev

For iOS development, run:
  npm run tauri ios dev

するとtauri-sampleというディレクトリができているかと思うのでcd tauri-sample で移動します。

起動してみる

以下コマンドでjsのライブラリをインストールします。

npm install

完了したら、以下のコマンドで立ち上げてみましょう。

npm run tauri dev

すると以下のようにアプリが立ち上がります。

おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

参考