Tauriとは

2022年に正式版が、2024年2月にver2.0がリリースされた新進気鋭のネイティブアプリ開発のフレームワークがTauriです！クロスプラットフォームに対応しているためWindows、Android、iOSなど幅広いデバイスを対象としてビルドできます。老舗であるElectronをかなり意識しているらしくネットの大海のそこら中に比較記事が上がっています。新時代の波を起こすフレームワークというわけですね。

そんなTauriですが、WEB開発者にとって大変に扱いやすいフレームワークとなっています。なんとTauriではElectron同様にフロント――つまりGUI部分の開発にHTMLやNode.jsといったお馴染みのフロントエンド技術をそのまま使えてしまうのです。反対に裏の処理ではRust言語を用いる必要がありますが、こちらのコーディングは最小限で済むようになっています。筆者もRust言語は初学者でしたが、公式ドキュメントを軽く読むだけで最低限の開発は可能でした。

そもそもどういう需要？

さて本題に入る前に前置きです。タイトルの通り『WEB開発者に向けたなんちゃってTauri開発』ですが、正直なところ前提条件がかなり怪しいかもしれません。 WEB開発者に明日からアプリ開発をゼロから頼みますわ！　なんてことはそうそう起き得ないでしょうし、理由があってがっつりとアプリ開発へ移行するなら1から勉強すべきです。

だからこそ、本記事はあくまでもなんちゃってアプリ開発です。ちょっとした息抜きや視点を広げる程度のものだとお考え下さい。

内容も筆者自身が自分専用のアプリの制作や、趣味で簡単なアプリを出してみたいと考え、手軽な開発方法を探した際の知見となっています。それでもWEB開発者がちょこっと興味を持った際に、お手軽に試せる情報として活用してもらえると嬉しいです!!

Tauriの始め方

では早速、Tauriの開発環境を用意してみましょう。 v2.tauri.app

※前提としてNode.jsとRustをローカルPCへインストールしておいてください。

まずはプロジェクトを配置したディレクトリ下で下記のコマンドを実行します。Node.jsならお馴染みの初期構築作業ですね。

※途中何度か質問されますが使い慣れた言語やフロントエンド技術を自由に選択してください。

npm create tauri-app {好きなプロジェクト名}

続いて下記のコマンドを実行します。

npm install

すると、上記のようなフォルダ構成が生成されるはずです。こちらも慣れている人からするとお馴染みの様子ですね。最後のコマンドを実行してテスト起動をしてみましょう！最初はRust側のプラグインインストールのため少し時間がかかります。

※時間がかかるどころか失敗する場合、Rustのインストールが上手くいっていない可能性があるため確認してくださいね。

npm run tauri dev

するとアプリケーションが起動します！

今回の僕は使い慣れたVueを選択したためこのような画面ですが、インストール時の選択によっては異なる画面が表示されるかもしれません。

では本当にWEBと同じフロントエンドなのかを見に行ってみましょう。エディタ（VSCode）でプロジェクトファルダを開きます。 index.html……親の顔より見たファイル名が目に入りますね。

明らかに先ほど起動したアプリの画面のエントリポイントに見えます。更にsrcフォルダ下も覗いてみるとApp.vueというこれまた慣れ親しんだ名前が飛び込んできます。

こちらもアプリ画面のメインとして描画されているコンポーネントファイルなのは明白でしょう。後はこれらのファイルをいつも通り、WEB開発の際と同じように編集していけば簡単にアプリとして起動できるというわけです。

そう。いつも通りに。もう迷うことはありませんね？

存分にこれまでの経験を生かしてアプリを開発してしまいましょう!!

Rustコマンドの活用

ここからはWEBフロントエンドではあまり馴染みのないRust側のお話が入ってきます。 TauriはWEBの技術をそのまま使えるフレームワーク、というお話は何度も繰り返していますが、WEBとネイティブアプリではどうしても変えられない差異があります。

それはフロントエンド、バックエンドという概念です。ネイティブアプリは当然ローカルのオフラインな環境で完結しています。（完全に通信をしないアプリはむしろ少ない気もしますが……ここでは通信しないことにします）

これは明らかにWEBとは異なる点です。WEBアプリの場合は静的サイトであろうとも、サイトが配置されているサーバーがあり、それをダウンロードして表示するクライアントの2つに分かれていますから。

WEBとTauriは明らかに違う。でもGUIは同じフロントエンドの技術を使っている。

ではバックエンドに値する構造は一体どこに？

その答えこそがRustによるOS側への通信となります。src-tauriフォルダという見慣れないディレクトリ配下がこのTauriのバックエンドに値するわけですね。

WEBと同じく、Tauriでもフロントエンドからバックエンドに問い合わせを行う手段があります。それがRustのCommandであり、Rust言語で予め定義されたものをフロントエンドから呼び出すことでアクセスすることが可能になります。

コマンドを作ってみよう

試しに簡単なコマンドを作ってみましょう。やることは実にシンプルです。『src-tauri/src/lib.rs』を開き、下記のように編集します。

// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! You've been greeted from Rust!", name)
}

#[tauri::command]
fn hello() {
    println!("Hello, ecbeing!");
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
        .invoke_handler(tauri::generate_handler![greet, hello])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

helloメソッドを新しく定義しhandlerの生成にそのhelloメソッドを指定した形ですね。

これだけでバックエンドにコマンドの定義は完了しました！

早速フロントエンドから呼び出してみましょう。こちらでやることはシンプルでinvokeメソッドでコマンド名を指定してあげるだけです。