あなたは環境構築される側です。なるべく耐えてくださいね。
Tauri v2 を初めて行くのですが、まずは環境構築が必要です。
動かすためには「Rust」「Node.js」が必要です。
なお、以下の Tauri 公式の記事も参考になると思いますので是非。
Rust のインストール
それでは以下のページにアクセスしましょう。
ここで、rustup のインストール方法が記載されていると思います。
自分のプロセッサの bit 数にあったRUSTUP-INIT.EXE(xx-BIT)をダウンロードするボタンを押して、まずは Rustup をダウンロードしましょう。
今更 32bit とか 64bit の違いがわからない人はいないでしょう...64bit を選べば大体問題ないです。
ダウンロードしたらrustup-init.exeを起動しましょう。
後は画面の指示(英語)に従ってインストールを進めていきます。
よっぽどの事情がない限りは Enter キーを押していけば、デフォルトの設定でインストールされるはずです。
インストールが完了したら、ターミナルを開いてrustc -Vと入力してみましょう。
rustc のバージョンが表示されればインストール成功です。
(ターミナルの再起動が必要な場合があります)
...おっと、ターミナルが分かりませんか？
PowerShell やコマンドプロンプトの事ですが、Windows であれば Windows Terminal という便利なアプリがあります。
入ってない場合は Microsoft Store からインストールしてみてください。
ちなみに、rustcとは Rust のコンパイラのことです。
Rust のコードを単体で実行可能な形態(.exe)とかに変換してくれるツールです。（雑に言えば）
Node.js のインストール
次に Node.js をインストールしましょう。
Node.js とは、大体 Web ブラウザ上で実行される JavaScript を PC の上で実行しちゃおう～みたいなやつです。
上記のリンクからダウンロードページにアクセスしましょう。
LTS と書かれているやつをダウンロードして、頑張ってインストールしましょう。
記事を書いてる時点での LTS は v22.11.0 です。
ちなみに私のパソコンに入っているのは v20.10.0 です。
（正直 node のバージョンシステムが一番分かりにくくて困る）
インストールが完了したら、ターミナルを開いてnode -vと入力してみましょう。
node のバージョンが表示されればインストール成功です。
同様にnpm -vと入力してみましょう。
npm のバージョンが表示されればインストール成功です。
pnpm のインストール
そしてここからは宗派が分かれてしまうのですが、Node.js のパッケージマネージャーには様々なものがあります。
パッケージマネージャーとは...Python でいうところの pip...C#でいうところの NuGet みたいなもんで、外部のライブラリをインストール、管理するためのソフトウェアです。
npm は Node.js の標準的なパッケージマネージャーですが、pnpm というものもあります。
pnpm はそのPerformant NPMという名前の通り、npm よりも高速であるとされています。
pnpm の他にも、yarn というパッケージマネージャーもありますが、今回は pnpm を使っていきます。
上記のリンクからインストール方法を確認しましょう。
npm install -g pnpmというコマンドを実行することで、pnpm をインストールすることができます。
他にもスタンドアロンのインストーラーもあるようですが、今回は npm 経由でインストールしてみましょう。
インストールが完了したら、ターミナルを開いてpnpm -vと入力してみましょう。
（もしかしたらターミナルの再起動が必要かもしれません）
バージョンが表示されればインストール成功です。
プロジェクトを作ってみよう
環境構築はインストールだけでは終わりません。
次はプロジェクトを作ってみましょう。
プロジェクトフォルダを作りたいフォルダにターミナルで移動して、以下のコマンドを実行しましょう。
pnpm create tauri-app
すると、プロジェクトを作るために必要な名前やバージョン、プロジェクトの種類などを聞かれるので、それぞれ入力していきましょう。
? Project name (tauri-app) ›
これは、プロジェクトの名前です。
デフォルトではtauri-appとなっていますが、なんか適当にかっこいい名前を入力しましょう。
（今回はqac24-sampleとしておきました）
? Identifier (com.qac24-sample.app) ›
これは、プロジェクトの識別子です。
識別子っていうと少し難しいですが、com.[プロジェクト名].appがテンプレートっぽいので、それでもいいかもしれません。
過去に Android アプリや iOS アプリを作ったことがある人は、その時から使ってる Bundle ID を使ってもいいでしょう。
? Choose which language to use for your frontend ›
フロントエンドの言語を選択します。
今回は TypeScript を使いたいのでTypeScript / JavaScriptを選択しましょう。
? Choose your package manager ›
パッケージマネージャーを選択します。
今回は pnpm を使いたいのでpnpmを選択しましょう。
? Choose your UI template ›
UI テンプレートを選択します。
今回は特殊なものは使いたくないので、Vanillaを選択しましょう。
? Choose your UI flavor ›
多分 UI の細かい部分を聞いてるんだと思います。
TypeScript を使いたいのでTypeScriptを選択しましょう。
Template created!
これでプロジェクトが作成されました。
凄い簡単！！
cd [プロジェクト名]でプロジェクトフォルダに移動して、pnpm iと実行してみましょう。
これでプロジェクトの依存関係(pnpm 側)がインストールされます。
以降の記事において、記載がなければプロジェクトフォルダでのコマンド実行などを想定しています！
準備は整った...！
ついに環境構築が完了しました。
次回からは実際に目の前で GUI アプリケーションを実行してみせます。
という訳で今日もお疲れ様でした！
おまけ
VSCodeを使用している人向けに、今回のアドベントカレンダーを進めていくうえで便利と思われる拡張機能を紹介しておきます。
(IDってので検索するとヒットします。)
HTML関連
Auto Rename Tag
ID: formulahendry.auto-rename-tag
HTML のタグをリネームすると、対応するタグもリネームされる。
便利かも。
TypeScript関連
Prettier - Code formatter
ID: esbenp.prettier-vscode
Prettierというコードフォーマッターを使うための拡張機能。
設定を行えば、TypeScriptのコードを綺麗に整形してくれる。
Prettify TypeScript: Better Type Previews
ID: MylesMurphy.prettify-ts
TypeScript の型を綺麗に表示してくれる拡張機能。
カーソルを変数とかに合わせると、その型の中身を表示してくれる。
Rust関連
rust-analyzer
ID: rust-lang.rust-analyzer
RustをVSCodeで扱うなら必須の拡張機能。
Rustのコードを解析してくれるので、エラーが出たりすると教えてくれる。
Tauri
ID: tauri-apps.tauri-vscode
Tauriの設定ファイルのtauri.conf.jsonのスキーマを出してくれたり、コマンドパレットから現在のプロジェクトを起動したりできる。