はじめに
本連載では次の図のようなお絵描きのデスクトップアプリを作りますが、よくあるPhotoshop風ではなく、Illustrator風のベジェ曲線のお絵描きアプリです。最初だけ1回クリック、それ以降はクリック＆ドラッグ、クリック＆ドラッグ・・・を繰り返すことで、1本に繋がった曲線が一筆書きで描けます。
完成したお絵描きアプリは、こちらで公開しています。Webブラウザ版では作成したデータを保存できませんが、デスクトップアプリ版ではRust側からデータの読み書きをサポートしています。
このお絵描きアプリは「HTML5＋CSS＋JavaScript」で構成されたWebページでできています。さらに、Tauri 2.0を使って、Webページをデスクトップアプリとして構築しています。Tauri 2.0は、Webページをインターフェースとして使い、それをRustでコーディングしてデスクトップアプリとして構築します。
連載の流れ
この連載は、以下のように進んで行きます。
| 回数 | 内容 |
|---|---|
| 第1回 | 「Rust」「Tauri 2.0」の基礎知識と環境整備 |
| 第2回 | Rustの基本文法 |
| 第3回 | 「HTML5＋CSS＋JavaScript」の知っておくべき文法 |
| 第4回 | 黒色のベジェ曲線を一筆書きで描く方法 |
| 第5回 | アンドゥとリドゥの実装 |
| 第6回 | メニュー機能、ファイルの読み込み処理の実装 |
| 第7回 | メニュー機能で保存メニューの実装 |
では、Rustの基本情報から学んでいきましょう。
「Rust」の基本情報
「Rust」は、WindowsでもmacOSでもLinuxでもクロスプラットフォームに対応した高速でスマートなプログラミング言語です。「Rust（ラスト）」とは、錆という意味でロゴマークもそこからデザインされたのでしょう。
Rustのメモリの管理の仕方、「所有権」とは？
Rustはメモリの管理の仕方がスマートな、とても優れたプログラミング言語です。
「所有権」という独特な概念でメモリを管理して、ビルド時にメモリリークが起こる可能性を排除するので、極めてメモリリークが起こりにくくなっています。例えば、次の図のように「スコープ」内だけ変数にメモリを所有する権利を与えて「スコープ」を抜けるときには、「所有権」を持つ変数のメモリを解放します。
Rustの追加機能、「クレート」とは？
他にも、Rustで書かれた「クレート」という追加機能で機能を拡張できるため、車輪の再発明をしなくても済みます。クレートはPythonでいうパッケージや、モジュールに当たる拡張機能のことです。さらにPythonと違ってインタプリタ言語ではなくコンパイル言語なので、処理が高速です。
「Tauri 2.0」の基本情報
「Tauri 2.0」はちょうどElectronのRust版です。
Electronとは、WebページをChromium（以前のGoogle ChromeのHTMLレンダリングエンジン）と、JavaScriptで作られたNode.jsでデスクトップアプリを構築する技術です。次の図のように、コードエディタ「Visual Studio Code」もElectronで開発されていますが、今後はElectronよりさらに優れたTauri 2.0がメジャーになっていくと思われます。
Tauri 2.0もRustと同様に、Windowsや、macOS、Linuxにもクロスプラットフォームに対応したフレームワークであり、さらにスマートフォンのiOSや、iPadOS、Androidアプリも作れます。本連載ではパソコン向けのデスクトップアプリ開発だけを解説します。
Tauri 2.0の仕組み
Tauri 2.0は、「HTML5＋CSS＋JavaScript」のWebページをデスクトップアプリとして作れるRustのクレートで、Tauriバージョン1系とは互換性がありません。
Tauri 1.0で作ったプロジェクトは、Tauri 2.0でプロジェクトを作り直して移植する必要があります。本連載では移植ではなく、最初からTauri 2.0のプロジェクトから作り始めます。
簡単にTauri 2.0を説明すると、次の図のような仕組みになっています。
Tauri 2.0の役割とは？
Tauri 2.0は、次の図のようにソフトウェア設計モデルでいうMVCに似ています。
MVCは、ModelやView、Controllerで構成された設計モデルです。ViewがUIなどの見た目を扱い、Modelが中身の処理を行い、Controllerがユーザーからの指示を受けて、ViewとModelを繋ぎます。
まさにTauri 2.0は、ViewがフロントエンドのWebページである「HTML5＋CSS＋JavaScript」のUIに当たり、ModelがバックエンドのRustに当たり、Controllerがフロントエンドとバックエンドを繋ぐブリッジ（JavaScriptとRustで渡す橋）に当たります。
