Hello World (Windows)

Recipe ID: env-001

Windows 環境で Tauri アプリ開発を始めるための最初の一歩です。
必要なツールのインストールからプロジェクトの作成・起動するまでを解説します。

1. Microsoft C++ Build Tools のインストール

まず、Tauri のビルドに必要な C++ ツールチェーンをインストールします。

1. Microsoft C++ Build Tools のインストーラーをダウンロードして実行します。
2. 「ワークロード」タブで「C++ によるデスクトップ開発」にチェックを入れます。
3. 右下の「インストール」ボタンをクリックします。

2. WebView2 の確認

Windows 10/11 では通常インストール済みですが、念の為 WebView2 Runtime がインストールされていることを確認します(Evergreen Bootstrapper (エバーグリーンブートストラップ)をダウンロードして実行すれば確認できます)。
もし WebView2 Runtime がインストールされていれば、エバーグリーンブートストラップを実行した際に、「インストールできませんでした。Microsoft Edge Webview2 Runtime は既にシステムにインストールされています。」と表示されます。

3. Rust のインストール

プログラミング言語 Rust(およびそのパッケージマネージャ Cargo)をインストールします。

1. https://rustup.rs/ にアクセスし、インストーラー(rustup-init.exe)をダウンロードして実行します。
2. 画面の指示に従い、1 (Proceed with standard installation) を入力して Enter を押します。
3. インストール完了後、コマンドプロンプトや PowerShell を再起動します。

4. Node.js のインストール

Tauri のフロントエンド開発には Node.js が必要です。

1. Node.js 公式サイト から「LTS」バージョン(推奨版)のインストーラーをダウンロードして実行します。
2. 画面の指示に従ってインストールを完了してください。
3. インストール完了後、コマンドプロンプトや PowerShell を再起動し、以下のコマンドでバージョンが表示されることを確認します。

node -v
npm -v

5. プロジェクトの作成

ターミナル(PowerShellなど)を開き、以下のコマンドを実行してプロジェクトを作成します。

# インタラクティブにプロジェクトを作成
npm create tauri-app@latest

コマンドを実行するといくつか質問されます。シンプルに進めるため、以下のように選択してください。

  • Project name: hello-tauri
  • Identifier: com.hello-tauri.app
  • Frontend language: TypeScript / JavaScript
  • Url, npm...: npm
  • UI template: Vanilla
  • UI flavor: TypeScript

作成されたディレクトリに移動し、依存関係をインストールします。

cd hello-tauri
npm install

6. アプリの起動

以下のコマンドで開発モードでアプリを起動します。

npm run tauri dev

初回は Rust の依存関係のコンパイルに数分かかります。完了するとウィンドウが開き、"Welcome to Tauri" と記載された画面が表示されれば成功です!