【Day2】Tauri v2を始めるための環境を作ろう【QAC24】


# あなたは環境構築される側です。なるべく耐えてくださいね。

Tauri v2 を初めて行くのですが、まずは環境構築が必要です。
動かすためには「Rust」「Node.js」が必要です。

なお、以下の Tauri 公式の記事も参考になると思いますので是非。

https://v2.tauri.app/start/prerequisites/

## Rust のインストール

それでは以下のページにアクセスしましょう。

https://www.rust-lang.org/ja/tools/install

ここで、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 の上で実行しちゃおう～みたいなやつです。

https://nodejs.org/en/

上記のリンクからダウンロードページにアクセスしましょう。

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 を使っていきます。

https://pnpm.io/ja/installation

上記のリンクからインストール方法を確認しましょう。

`npm install -g pnpm`というコマンドを実行することで、pnpm をインストールすることができます。
他にもスタンドアロンのインストーラーもあるようですが、今回は npm 経由でインストールしてみましょう。

インストールが完了したら、ターミナルを開いて`pnpm -v`と入力してみましょう。
（もしかしたらターミナルの再起動が必要かもしれません）

バージョンが表示されればインストール成功です。

## プロジェクトを作ってみよう

環境構築はインストールだけでは終わりません。

次はプロジェクトを作ってみましょう。

プロジェクトフォルダを作りたいフォルダにターミナルで移動して、以下のコマンドを実行しましょう。

```bash
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`のスキーマを出してくれたり、コマンドパレットから現在のプロジェクトを起動したりできる。