Tauri + React + TypeScript 開発環境構築メモ (Windows編)

この手順書は、Tauriを使ってReactベースのデスクトップアプリを開発するための環境をゼロから構築する流れをまとめたものです。

Step 1: 開発ツールのインストール（PCへの初回設定）

Microsoft C++ Build Tools

1. 公式サイトから「Build Tools のダウンロード」をクリックしてインストーラーを実行します。
2. 開いたウィンドウの「ワークロード」タブで、「C++によるデスクトップ開発」 にだけチェックを入れ、インストールします。

Rust

1. PowerShell（またはターミナル）を開き、以下のコマンドを実行してインストールします。

   winget install --id Rustlang.Rustup
   

2. インストール後、ターミナルを再起動し、以下のコマンドでバージョンが表示されれば成功です。

   cargo --version
   

Node.js

• 公式サイトからLTS版（推奨版）をダウンロードしてインストールします。

Step 2: VS Codeの準備

VS Codeでの開発を快適にするための拡張機能をインストールします。

1. VS Codeの拡張機能タブを開きます。
2. 以下の2つを検索してインストールします。
   • Tauri (公式)
   • rust-analyzer (Rust言語のサポート)

Step 3: 新規プロジェクトの作成

ここからは、新しいアプリを作るたびに毎回行う作業です。

1. プロジェクトを作りたいフォルダ（例: Desktop/work）でターミナルを開きます。
2. 以下のコマンドを実行します。

   npm create tauri-app@latest
   

3. 対話形式で以下のように設定していきます。
   • Project name: アプリの名前を入力 (例: my-tauri-app)
   • Identifier: アプリの識別子を入力 (例: com.yourdomain.appname)
   • Choose which language...: TypeScript / JavaScript を選択
   • Choose your package manager: npm を選択
   • Choose your UI template: React を選択
   • Choose your UI flavor: TypeScript を選択

Step 4: プロジェクトの起動とGit連携

1. 作成されたプロジェクトフォルダに移動します。

   cd my-tauri-app
   

2. (推奨) VS Codeでこのフォルダを開き直します。

   code .
   

3. (推奨) Git/GitHubでの管理
   1. GitHubで新しいリポジトリを作成します。
   2. VS Codeのターミナルで、GitHubに表示される以下のコマンドを実行して紐付けとプッシュを行います。

      git init
      git add .
      git commit -m "first commit"
      git remote add origin <あなたのリポジトリURL>
      git push -u origin main
      

4. 依存パッケージのインストール
   アプリの動作に必要なライブラリをインストールします。

   npm install
   

5. 開発サーバーの起動
   以下のコマンドで開発用のデスクトップアプリを起動します。

   npm run tauri dev
   

   Note
   初回起動時のみ、バックエンド(Rust)のコンパイルに数分〜10分以上かかることがあります。ターミナルに Blocking... と表示されても焦らず、アプリが立ち上がるまで気長に待ってください。

トラブルシューティング

初回ビルドでフリーズ・クラッシュする場合

npm run tauri dev を初めて実行した際、ビルドが異常に長い時間（数十分〜1時間以上）フリーズしたり、以下のようなエラーでクラッシュすることがあります。

(exit code: 0xc0000409, STATUS_STACK_BUFFER_OVERRUN)

これは多くの場合、あなたのコードではなく、開発環境に原因があります。

原因：セキュリティソフトとの競合

この現象の99%の原因は、ウイルス対策ソフト（またはWindows Defender） です。

Rustコンパイラは、高速化のためにCPUの全コアを使い、何千・何万というファイルを同時に読み書きします。この「同時多発的な激しい動き」をセキュリティソフトが脅威と誤認識し、一つ一つのファイルをリアルタイムでスキャンしようとします。

この監視プロセスがコンパイラの動作に割り込むことで、メモリ不足を引き起こしたり、予期せぬ動作を誘発したりして、最終的にフリーズやクラッシュに至ります。

解決策：コンパイラの並列実行数を制限する

セキュリティソフトの設定を変更できない環境でも使える、非常に効果的な解決策です。
コンパイラに 「そんなに焦らず、一個ずつ順番に、ゆっくり作業してね」 とお願いすることで、セキュリティソフトの監視に引っかかりにくくなり、ビルドを安定して完了させることができます。

手順1：ビルドキャッシュをきれいにする

まず、前回のエラーで中途半端なファイルが残っている可能性があるため、それらを削除してクリーンな状態にします。
ビルドの成果物は src-tauri/target フォルダに出力されます。このフォルダを手動で削除するか、ターミナルで以下のコマンドを実行してください。

cargo clean

手順2：ビルド設定ファイルを作成する

プロジェクトのルートディレクトリ（package.json と同じ階層）に、コンパイラの動作を制御するための設定ファイルを作成します。

1. ターミナルで以下のコマンドを実行し、.cargo フォルダを作成します。
   （Windowsのエクスプローラーでは.から始まるフォルダは作りにくいため、コマンドが確実です）

   mkdir .cargo
   

2. 作成した .cargo フォルダの中に、config.toml という名前で新しいファイルを作成します。
3. config.toml に以下の内容を記述して保存します。

   [build]
   jobs = 1
   

   これは、Rustのビルドシステム(Cargo)に対して「同時に実行する作業（ジョブ）は1つだけにしてね」と指示する設定です。

手順3：Rustのツールチェーンを最新にする（念のため）

古いバージョンのツールに、特定の環境で問題を起こすバグが含まれている可能性もあるため、ツールチェーンを最新にしておきましょう。

rustup update

手順4：再度ビルドに挑戦！

これで準備は万端です。改めてビルドを開始しましょう。

npm run tauri dev

今度のビルドは、一度にたくさんのコンパイルが走るのではなく、一つずつ順番に進んでいくはずです。時間はかかりますが（初回6〜10分程度）、CPUへの負荷が分散されるため、クラッシュせずに完了する可能性が格段に上がります。