Tauriの基礎 - 開発環境

概要

Tauriは、RustとWeb技術を組み合わせてデスクトップアプリケーションを構築するための軽量なフレームワークである。

ElectronやNW.jsのような既存のデスクトップアプリケーション開発フレームワークと比較して、Tauriは大幅に小さいバイナリサイズと優れたパフォーマンスを実現している。
これは、ChromiumやNode.jsをバンドルする代わりに、OSが提供するネイティブのWebViewを利用しているからである。

Tauriのアーキテクチャは、バックエンド (コア機能やシステムAPI) にRustを使用し、フロントエンド (ユーザインターフェース) には任意のWebフレームワークを使用できる柔軟な設計になっている。
React、Vue、Svelte、あるいは純粋なHTML / CSS / JavaScript等、開発者が慣れ親しんだ技術を選択することができる。

Tauriで開発されたアプリケーションは、Windows、MacOS、Linuxの各プラットフォーム向けにビルドできる。
また、モバイルプラットフォーム (iOS、Android) のサポートも進行中である。

バックエンドのRustコードは強力な型システムとメモリ安全性を提供し、フロントエンドのReactは豊富なエコシステムと開発者体験を提供する。
この組み合わせにより、安全で高速、かつ保守性の高いデスクトップアプリケーションを開発できる。

依存関係のパッケージのインストール

Tauriがネイティブアプリケーションをビルドするために必要な依存関係をインストールする。

webkit2gtk3はWebViewを表示するためのエンジン、opensslは暗号化通信、他のライブラリはアプリケーションの各種機能やアイコン表示に使用される。

# SUSE
sudo zypper install curl wget file webkit2gtk3-devel openssl-devel libappindicator3-devel librsvg-devel

Node.jsのインストール

Reactを動かすためのJavaScript環境が必要である。

最も推奨される方法は、Node Version Manager (nvm) を使用する方法である。
これを使用すると、異なるプロジェクトで異なるNode.jsのバージョンを簡単に切り替えることができる。

Node.jsのインストールは、インストール - Yarn#NordJS のページを参照すること。

Tauri CLIのインストール

Tauriのコマンドラインツールをインストールする。
これには2つの方法が存在するが、推奨される方法は npm を使用する方法である。

# ローカルにインストールする場合
npm install @tauri-apps/cli

# グローバルにインストールする場合
npm install -g @tauri-apps/cli

# Rustのパッケージマネージャであるcargoを使用する場合
cargo install tauri-cli

インストールが完了した後、動作確認をする。

npm exec tauri --version

プロジェクトの作成

任意のディレクトリに移動して、以下に示すコマンドを実行する。

npm create tauri-app@latest

• プロジェクト名

  任意の名前 (例: my-tauri-app)

• パッケージマネージャ

  npm

• UIフレームワーク

  React

• TypeScriptを使用するかどうか

  TypeScriptを推奨する。

プロジェクトのセットアップが完了した後、自動生成されたプロジェクトディレクトリに移動する。

cd <プロジェクト名>

プロジェクト構造

srcディレクトリにはReactのフロントエンドコード、src-tauriディレクトリにはRustのバックエンドコードが配置される。

index.html : アプリケーションの入口

index.htmlは、Tauriアプリケーション全体の入り口となるHTMLファイルである。
通常のWebサイトと同様、TauriのWebViewが最初に読み込むページとなる。

head タグの中には基本的なメタ情報、body タグの中には div タグが1つだけあり、そこにid="root"のような属性が付いている。
この div タグが、Reactアプリケーション全体が描画される場所になる。

ファイルの最後には script タグがあり、JavaScriptファイル (通常は、src/main.tsxやsrc/main.jsx) を読み込んでいる。

※重要
画面の内容は、全てReactが動的に生成して、このrootのdiv要素の中に挿入していく。
これが、シングルページアプリケーション (SPA) と呼ばれる仕組みの基本である。

tsconfig.json : TypeScriptのメイン設定

TypeScriptコンパイラに対して、「どのようにTypeScriptコードをJavaScriptコードに変換すればよいか」を指示する設定ファイルである。

TypeScriptは、JavaScriptに型の概念を追加した言語で、開発時にはTypeScriptで記述するが、動作させる時にはJavaScriptに変換する必要がある。
この変換ルールがtsconfig.jsonに記述されている。

例えば、以下に示すような設定が含まれている。

• どのバージョンのJavaScriptに変換するか
• どのディレクトリのファイルをコンパイル対象にするか
• strictモード (厳格な型チェック) を有効にするか

Reactを使用する場合は、JSXという特殊な構文をどう扱うかという設定も重要である。
JSXは、JavaScript内でHTMLのような記述ができる構文である。

tsconfig.node.json : ビルドツール用のTypeScript設定

ビルドツール (Vite等) の設定ファイルをTypeScriptで記述する時に使用する設定である。

tsconfig.json および tsconfig.node.json が2つに分割されている理由として、実行環境が違うからである。

tsconfig.jsonはWebViewで動作するための設定、tsconfig.node.jsonはNode.js環境で動作する (ビルドやバンドルの処理を行うツール) ための設定である。
WebView環境 と Node.js環境 では、使用できる機能や推奨される設定が異なるため、設定を分離して管理した方が効率的である。

例えば、vite.config.ts ファイルはNode.js環境で実行される設定ファイルである。
このファイルがTypeScriptで記述されているため、それをコンパイルするための設定がtsconfig.node.jsonに記述されている。

vite.config.ts : Viteの設定ファイル

Viteというビルドツールの設定ファイルである。
Viteは、フロントエンド開発で人気のある開発サーバとビルドツールである。

このファイルには、以下に示す設定が記述されている。

• 開発サーバをどのポートで起動するか
• どのプラグインを使うか
• ビルド時にどのような最適化を行うか

Tauri + Reactのプロジェクトでは、Reactを使用するためのプラグインやTauriとViteを連携させるための設定が含まれている。

Viteでは、開発中にソースコードを変更すると瞬時にアプリケーションに反映される ホットモジュールリプレースメント (HMR) という機能でがある。
これにより、ソースコードを変更するたびに変更した部分だけがリロードされるため、開発効率が大幅に向上する。

src/main.tsx : Reactアプリケーションの起動コード

Reactアプリケーションを実際に起動させるソースコードを記述する。

ReactDOMライブラリを使用して、Appコンポーネントをindex.htmlのroot要素にマウント (描画) している。
このファイルが実行されることにより、Reactアプリケーションが動作する。

また、このファイルでは、アプリケーション全体に影響する初期設定やグローバルなスタイルシートのインポートも行われることがある。
アプリケーションが起動する直後に実行したい処理がある場合は、このファイルに記述する。

src/App.tsx : メインのReactコンポーネント

アプリケーションのメインとなるReactコンポーネントである。
コンポーネントはReactにおける部品のようなもので、画面の一部分や機能をまとめたものである。

Appコンポーネントは、最上位のコンポーネントであり、アプリケーション全体の構造を定義する。

このファイルでは、function App() のような関数定義があり、その中でJSXを使用して画面の構造が記述されている。
初期状態では、Tauriのロゴや簡単なカウンタのボタン等が含まれている。(動作確認のためのサンプルコード)

実際の開発では、App.tsxファイルに全てを記述するのではなく、機能ごとに複数のコンポーネントを作成して、それらをApp.tsxで組み合わせる。
例えば、ヘッダコンポーネント、サイドバーコンポーネント、メインコンテンツコンポーネント等を別々に作成して、Appコンポーネントでそれらを配置する。

src/App.css : Appコンポーネントのスタイル

App.tsxコンポーネントの見た目を定義するCSSファイルである。

App.tsxファイルでは、App.cssをインポートしている。

Reactでは、コンポーネントごとにスタイルシートを分離して管理することが一般的である。
"このスタイルはどのコンポーネントで使われているのか" が明確になり、保守性が上がる。

また、TailwindCSSのようなCSSフレームワークを使用する場合は、このファイルの役割が変わることもある。

src/vite-env.d.ts : Viteの型定義ファイル

TypeScriptの型定義ファイルである。
ファイル名の末尾にある「.d.ts」というのは、declaration type scriptの略で、型の宣言のみを記述するファイル という意味である。

Viteが提供する型定義を参照する指示が記述されている。
これにより、Vite特有の機能、環境変数の読み込み、モジュールのインポート等に使用する時に、TypeScriptのエディタ上で補完および型チェックができる。

このファイルは、基本的に編集する必要はない。プロジェクト作成時に自動生成され、そのまま使用し続けるものである。
ただし、Vite以外の特殊な型定義を追加する場合は、このファイルを編集することもある。