😎
【初学者向け】Tauri による初めてのアプリ開発

2024/11/17に公開
 【初学者向け】 Tauri による初めてのアプリ開発
 本記事での試み本記事は，はじめてデスクトップ・モバイルアプリ開発を挑戦したい人のための導入記事です[1]．

ここでは，Tauri を用いた開発環境の構築を行います．

テンプレートができるので，各ディレクトリ構成，ファイルの役割を学び，アプリ開発の事前知識をまとめていきます．

 なぜ Tauri なのか？Tauriはクロスプラットフォームで利用可能なアプリケーション開発フレームワークです．特に利用するメリットはバックエンドとして，Rustを利用しているため，アプリのシステムリソースの負荷が最小に抑えられる．
初学者である著者の知る限り，Rustを用いる主なメリットは公式ページにすでに挙げられているように，処理速度（パフォーマンス）[2]，メモリ管理の安全性（信頼性），デバッグがしやすい（生産性向上）が挙げられるでしょう．

パフォーマンス

C/C++に近い高速な処理が可能である．

信頼性

型管理システムと所有権モデルによって，ガーベジコレクタを利用しない．メモリ領域の無駄な利用を避けられる．

生産性向上

個人の好み，状況にもよるが，デバッガーやドキュメントが比較的親切．コーディングもC/C++より比較的簡素．
もちろん，開発フレームワークの選択肢はTauri以外にもElectronなど無数にある[3]が，今回はTauriを試すことにする．

 環境構築
 筆者のマシン環境macOSを利用しています．

Linux，Windowsなどの場合でも，導入作業は公式サイトのPrerequisitesから確認できます．

 導入作業のアウトライン公式サイトのPrerequisitesに基づいて作業を進めます．
主に以下の手順を踏みます．

Xcodeのインストール
Rust のインストール[4]
Node.js のインストール[5]
Tauri プロジェクトの生成
コンパイルと実行
Rust や Node.js の導入はその詳細を省略します．
ここでは，Tauri プロジェクトの生成から見ていきたいと思います．

 プロジェクト生成のコマンドBashコマンドによるプロジェクト生成公式によると，特に理由がなければ，Bashコマンドを用いた，

sh <(curl https://create.tauri.app/sh)

を利用することが推奨されています．
npm によるプロジェクト生成Node.js をインストールすると，javascriptのパッケージマネージャである，npm[6] が利用できるようになります．

この場合には，

npm create tauri-app@latest

で生成できます．

 vanilla template の利用公式ドキュメントによれば，フロントエンドフレームワークは後から統合できるので，vanillaテンプレートを推奨しています．

ここでも，それに従って，vanilla テンプレートを利用します．
プロジェクトを生成すると，主に以下の内容を記述することになります[7]：
? Project name (tauri-app) ›
? Identifier (com.tauri-app.app) ›
? Choose which language to use for your frontend ›
? Choose your package manager ›
? Choose your UI template ›
? Choose your UI flavor ›
Vanillaテンプレートでは以下を選択します．
Choose which language to use for your frontend: TypeScript / JavaScript

Choose your package manager: pnpm

Choose your UI template: Vanilla

Choose your UI flavor: TypeScript
入力内容の詳細は以下で見ていきます．
Project nameまず，? Project name (tauri-app) › を入力します．

(tauri-app) と書いてあるのはプロジェクト名の記入例です．

目的に応じてプロジェクト名を記入します．
Identifier? Identifier (com.tauri-app.app) ›

bundle identifier (バンドルID) と呼ばれる，アプリケーションを識別するためのものです．
バンドルIDは英数字，ハイフン，ピリオドのみで構成しなくてはいけないというルールがあります．また，慣例として，ドメイン名とアプリケーション名から命名することが多いようです．(com.tauri-app.app)を例にすると，com は TLD, Top Level Domain，tauri-appはプロジェクト名，appはアプリであることを明示している感じですね．
一般的には，Appleでの開発ドキュメントに基づいて，例えば，apple.comで，helloというアプリ名なら，com.apple.helloのように指定することが多いようです（TLD.2TLD.app-nameの順ですね）．
フロントエンドに使う言語の選択? Choose which language to use for your frontend ›
Rust  (cargo)
TypeScript / JavaScript  (pnpm, yarn, npm, bun)
.NET  (dotnet)
TypeScript / JavaScriptを選択します．
? Choose your package manager ›
pnpm
yarn
npm
bun
pnpmを選択します．
package manager について補足しておきます．

pnpm, yarn, npm, bun にはそれぞれ特徴があります[8]．

pnpmか，yarn が主に使われていますが，npm がデファクトスタンダードなので，最も充実した機能が扱えるようです．

ベンチマーク[9]によれば．npm < yarn < pnpm < bun の順に，高速になっています．bunは最も軽量化に特化しているため，機能が少なかったり，パッケージサポートの制限，Windows OSでの機能制限などがあるようです[8:1]．
主に，pnpm もしくは，yarn を利用する場合が多いようです．

pnpm は，npmと互換性を持つ，高速化かつ軽量化されたパッケージ[8:2]なので，多くの場合に使われているようです．

yarn は，状況によっては pnpm より高速ですし[9:1]，パッケージ管理の一貫性を重視した安定したパフォーマンスが特徴のようです[8:3]．
UIテンプレートの選択? Choose your UI template ›
Vanilla
Vue
Svelte
React
Solid
Angular
Preact

? Choose your UI flavor ›
TypeScript
JavaScript
Vanillaおよび，TypeScriptを選択します．
UIテンプレートについては公式ドキュメントを参照すると以下の詳細があります[10]．
create-tauri-app currently includes templates for vanilla (HTML, CSS and JavaScript without a framework), Vue.js, Svelte, React, SolidJS, Angular, Preact, Yew, Leptos, and Sycamore. You can also find or add your own community templates and frameworks in the Awesome Tauri repo.

 実行npm create tauri-app@latest

を実行した後，ディスプレイされた推奨コマンドが表示されていると思います：
Template created! To get started run:
  cd tauri-app
  pnpm install
  pnpm tauri android init
  pnpm tauri ios init

For Desktop development, run:
  pnpm tauri dev

For Android development, run:
  pnpm tauri android dev

For iOS development, run:
  pnpm tauri ios dev
これに基づいて，各コマンドを順次実行していきます．
今回はデスクトップアプリケーション開発なので，

pnpm tauri android initやpnpm tauri android dev

pnpm tauri ios initやpnpm tauri ios dev

については実行しません．
cd tauri-app

tauri-app など指定したプロジェクト名のディレクトリができるので，そこへ移動してください．
pnpm install
pnpm tauri dev
以上の手続きで，生成されたテンプレートがコンパイルされ，実行され，アプリケーションが立ち上がり，以下のようなウィンドウが表示されれば成功です．

 テンプレートのディレクトリ構成以上までの作業で，tauri によるアプリケーションのテンプレートが作成されていると思います．

ここでは，その中身について，ざっと見ていきたいと思います．
ディレクトリ構造は主に以下のようになっています[11]．
% tree -L 3 -I node_modules
.
|-- README.md
|-- index.html
|-- package.json
|-- pnpm-lock.yaml
|-- src
|   |-- assets
|   |   |-- tauri.svg
|   |   |-- typescript.svg
|   |   `-- vite.svg
|   |-- main.ts
|   `-- styles.css
|-- src-tauri
|   |-- Cargo.lock
|   |-- Cargo.toml
|   |-- build.rs
|   |-- capabilities
|   |   `-- default.json
|   |-- gen
|   |   `-- schemas
|   |-- icons
|   |   |-- 128x128.png
|   |   |-- 128x128@2x.png
|   |   |-- 32x32.png
|   |   |-- Square107x107Logo.png
|   |   |-- Square142x142Logo.png
|   |   |-- Square150x150Logo.png
|   |   |-- Square284x284Logo.png
|   |   |-- Square30x30Logo.png
|   |   |-- Square310x310Logo.png
|   |   |-- Square44x44Logo.png
|   |   |-- Square71x71Logo.png
|   |   |-- Square89x89Logo.png
|   |   |-- StoreLogo.png
|   |   |-- icon.icns
|   |   |-- icon.ico
|   |   `-- icon.png
|   |-- src
|   |   |-- lib.rs
|   |   `-- main.rs
|   |-- target
|   |   |-- CACHEDIR.TAG
|   |   `-- debug
|   `-- tauri.conf.json
|-- tsconfig.json
`-- vite.config.ts
下記にそれぞれの詳しい説明を書きます．

tauri-app/: プロジェクトのルートディレクトリ

README.md: プロジェクト概要を記載

index.html: フロントエンドのHTML，アプリケーションのエントリーポイント

package.json: フロントエンドの依存関係，スクリプト，プロジェクト情報を管理するファイル

pnpm-lock.yaml: 使用するパッケージの正確なバージョン情報を記録し、依存関係を固定化するファイル

tsconfig.json: TypeScriptのコンパイルオプションを指定する設定ファイル

vite.config.ts: Vite(build tool)[12]の設定ファイル，開発用サーバーやバンドルの設定を記述

src/: フロントエンド（UI）のコードを格納

src-tauri/: バックエンド（Rustベース）のコードを格納

.gitignore: Gitで無視するファイルを指定

src/ と src-tauri/の詳細は以下に順に見ていきます．

src/: フロントエンド（UI）のコードを格納

assets/: 静的なアセット（画像など）を保存している

main.ts: フロントエンドのエントリーポイントとなるTypeScriptファイル

styles.css: フロントエンドのスタイルファイル

src/assets/ 内には tauri.svg,typescript.svg,vite.svgという名前で，それぞれのロゴ画像が入っているかと思います[13]．

src-tauri/:

バックエンド（Rustベース）のコードを格納

フロントエンドとは異なり，サーバー内でのファイル操作，システム情報取得といった「ネイティブ機能」や，アプリケーションロジックの実装に関するコードを格納

src-tauri/src/: Rust で記述されたソースコードを格納

main.rs:

バックエンドアプリケーションのエントリーポイント

Tauriアプリケーションの初期化，フロントエンドとの通信や，必要なプラグイン，ウィンドウの設定登録を担う

lib.rs:

バックエンドのロジックや関数を整理して記述するための補助ファイル

main.rs のコードをモジュール化して分割する際に利用する


build.rs:

Rustのbuild時に実行されるスクリプトが記述される

ここでは，tauriのビルドに関するものだけが記述される

Cargo.lock:

Rustの依存関係の正確なバージョン情報を記録するロックファイル

プロジェクトの再ビルド時に依存関係が変わらないようにしている

Cargo.toml: Rustのパッケージ管理ツールであるCargoの設定ファイル

tauri.conf.json: Tauriアプリケーションの設定ファイル

.gitignore: Cargoにより生成される/target/[14]および Tauriによって生成される /gen/schemas[15] のGitトラッキングを無視

ここでは，.gitignore によって無視されている重要でないディレクトリやファイルの説明は省略しています．

 まとめ以上の手続きで，Tauriを用いたアプリケーションのテンプレートを生成することができると思います．

今回はテンプレートを導入し，その大雑把な理解をしただけですが，次はこれらを編集し，少しずつ理解を進めていきたいと思います，

脚注
かくいう筆者もはじめてのデスクトップ・モバイルアプリ開発です． ↩︎
例えば，ライプニッツの公式を用いた円周率計算による比較，https://github.com/niklas-heer/speed-comparison などがある． ↩︎
例えば，Electron（document, Github）が有名なようで，性能比較もいくつか行われている．他にも，Dartを用いたFlutterや，C/C++やPythonなどを用いたQtやPyQt，Rustを用いたGTKなども多々ある． ↩︎
公式サイト，https://www.rust-lang.org/tools/install を参照．日本語記事では，例えば，https://qiita.com/notakaos/items/9f3ee8a3f3a0caf39f7b で丁寧な解説が行われています． ↩︎
公式サイト，https://nodejs.org/en を参照．homebrewなどパッケージマネージャを導入済みなら，brew install node または brew install node@22 (versionを指定する場合) のように導入できる．詳細は，https://nodejs.org/en/download/package-manager を確認してほしい． 日本語記事では，例えば，https://qiita.com/sakana_gao/items/7440df68734f3d5ce772 でインストール方法が示されている． ↩︎
https://github.com/npm で開発が随時進められている．余談ですが，npm は the Node.js package manager の略のようです（参考）． ↩︎
選択によって，質問内容は条件分岐があります．詳細は，公式 https://v2.tauri.app/start/create-project/ もしくは，https://github.com/tauri-apps/create-tauri-app を参照のこと． ↩︎
Package Managers: A face-off (npm vs. pnpm vs. Yarn vs. Bun) https://medium.com/@AALA-IT-Solutions/package-managers-a-face-off-npm-vs-pnpm-vs-yarn-vs-bun-d3375683fbcb ↩︎ ↩︎ ↩︎ ↩︎
JavaScript package managers performance comparison between NPM, Yarn, Yarn PnP, PnPM, and Bun. https://github.com/edbzn/package-manager-benchmarks ↩︎ ↩︎
https://tauri.app/start/create-project/ ↩︎
linuxのtreeコマンドです．MacOSでまだインストールしていない場合には，brew install tree で利用できます． ↩︎
Viteについては，https://tauri.app/start/frontend/vite/ を参照． ↩︎
SVG(Scalable Vector Graphics) というベクター形式（テキストベース）の画像形式のファイルです．EPSやPDFなどもベクター形式です．数学的な点や図形，関数を使って描かれているため，軽量かつ拡大しても劣化しません．一方で，bmpやpng, jpegなどはビットマップ形式で，色のついたピクセルの集まりで画像を表現します．写真など複雑な画像表現の利用に適していて，ウェブやSNSなどで広く使われている．ロゴデザインなどの図形を組み合わせたようなものはベクター形式を，写真編集にはビットマップ形式を使うことが一般的である． ↩︎
Rustに触れた方ならわかるかもしれませんが，これはコンパイルされたファイル（compiled files）や，実行可能ファイル（executables）がここに格納されています． ↩︎
# Generated by Tauri および # will have schema files for capabilities auto-completionのようにコメントされています．ここで，schema files （スキーマファイル）とは json スキーマや， yaml スキーマを指しています．これらは，エディタやツールがデータ内容を理解するための構造化データファイルです．また，capabilities auto-completion とはエディタ（例えば，vscode）が利用可能な機能（capabilities）を自動補完（auto-completion）することを意味しています．つまり，エディタの機能を活用するための設定ファイルがここには格納されているという意味ですね． ↩︎
【初学者向け】 Tauri による初めてのアプリ開発

本記事での試み

なぜ Tauri なのか？

環境構築

筆者のマシン環境

導入作業のアウトライン

プロジェクト生成のコマンド

Bashコマンドによるプロジェクト生成

npm によるプロジェクト生成

vanilla template の利用

Project name

Identifier

フロントエンドに使う言語の選択

UIテンプレートの選択

実行

テンプレートのディレクトリ構成

まとめ

Discussion
