コンテンツにスキップ
Tauri
GuidesReferencesBlogReleases

プロジェクトの作成

Tauri が非常に柔軟である理由の一つが、事実上どのようなフロントエンド・フレームワーク（開発技術）とも連携できることです。「create-tauri-app ユーティリティ」も用意されており、公式に維持管理されている各フロントエンド・フレームワーク用テンプレートを用いて Tauri プロジェクトを開始するときに役立ちます 。

この「create-tauri-app ユーティリティ」には、現在、以下のテンプレートが含まれています：　「vanilla」（HTML、CSS および JavaScript／フレームワークなし）、「Vue.js」、「Svelte」、「React」、「SolidJS」、「Angular」、「Preact」、「Yew」、「Leptos」、 および「Sycamore」です。 この他にも、Awesome Tauri repo で見つかるコミュニティー作成のテンプレートやフレームワークも追加利用が可能です。

あるいは、下記「マニュアル・セットアップ」に記載の処理を実行して、Tauri を現在作業中のプロジェクトに追加することででも、現行のコードを Tauri アプリに変更できます。

create-tauri-app ユーティリティを利用する

Section titled “create-tauri-app ユーティリティを利用する”

create-tauri-app を利用してプロジェクトを開始するには、プロジェクトの準備を始めるフォルダー内で、以下のコマンドのいずれかを実行します。どのコマンドを使用するかわからない場合は、Linux および macOS では「Bash」コマンド、Windows では「PowerShell」コマンドの使用をお薦めします。

sh <(curl https://create.tauri.app/sh)

画面のプロンプト表示に従って、「プロジェクト名」、「フロントエンド言語」、「パッケージ・マネージャー」、「フロントエンド・フレームワーク」、および（該当する場合は）「フロントエンド・フレームワークのオプション」を選択します。

新しいプロジェクトを準備する手順

Section titled “新しいプロジェクトを準備する手順”

  1. プロジェクトの名前とバンドル識別子（アプリの一意の ID）を選んでください：

    ? Project name (tauri-app) ›　《プロジェクト名？（tauri-app）》
    ? Identifier (com.tauri-app.app) ›　《識別子？（com.tauri-app.app）》

  2. フロントエンドの言語を選んでください：

    ? Choose which language to use for your frontend ›
    《フロントエンドにはどの言語を使用しますか？：　以下から選択》
    Rust  (cargo)
    TypeScript / JavaScript  (pnpm, yarn, npm, bun)
    .NET  (dotnet)

  3. パッケージ・マネージャーを選択します（選択肢が複数ある場合）：

    TypeScript / JavaScript の場合の選択肢：

    ? Choose your package manager ›　《パッケージ・マネージャーを選んでください：》
    pnpm
    yarn
    npm
    bun

  4. UI テンプレートとフレーバーを選んでください（選択肢が複数ある場合）：

    Rust の場合の選択肢：

    ? Choose your UI template ›　《UI テンプレートを選んでください：》
    Vanilla
    Yew
    Leptos
    Sycamore

    TypeScript / JavaScript の場合の選択肢:

    ? Choose your UI template ›　《UI テンプレートを選んでください：》
    Vanilla
    Vue
    Svelte
    React
    Solid
    Angular
    Preact
    

    ? Choose your UI flavor ›　《UI フレーバーを選んでください：》
    TypeScript
    JavaScript

    .NET の場合の選択肢：

    ? Choose your UI template ›　《UI テンプレートを選んでください：》
    Blazor  (https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor/)

設定が完了すると、テンプレートが作成され、設定されたパッケージ・マネージャーを使ってそのテンプレートを操作する方法が表示されます。もしパッケージ・マネージャーがシステム内の依存関係に不備を検出した場合には、不足しているパッケージの一覧が表示され、そのパッケージをインストールするように促されます。

開発サーバーの起動

Section titled “開発サーバーの起動”

create-tauri-app での設定が完了した後、自分のプロジェクト・フォルダーに移動して依存関係をインストールしたら、 Tauri CLI （コマンドライン・インターフェース）を使用して「開発サーバー」を起動します。

cd tauri-app
npm install
npm run tauri dev

これで新しいウィンドウが開き、あなたのアプリが実行されているのが確認できます。

おめでとうございます！　 Tauri アプリの完成です！ 🚀

マニュアル・セットアップ（Tauri CLI）

Section titled “マニュアル・セットアップ（Tauri CLI）”

すでにフロントエンドができあがっているとか、自分自身で設定を行ないたいとかいう場合には、「Tauri CLI」を用いてそのプロジェクトのバックエンドを個別に初期化できます。

  1. プロジェクト用の新しいディレクトリを作成し、フロントエンドを初期化します。通常の HTML、CSS、JavaScript や、Next.js、Nuxt、Svelte、Yew、Leptos などの自分好みのフレームワークを使用できます。必要となるのは、ブラウザにアプリを供給する方法だけです。ほんの一例として、下記はシンプルな Vite フロントエンド・ビルドツールを設定する方法です：

    mkdir tauri-app
    cd tauri-app
    npm create vite@latest .

  2. 次に、上記で導入したパッケージ・マネージャーを使用して Tauri の CLI ツールをインストールします。cargo を使用して Tauri CLI をインストールする場合には、「グローバル・インストール」《脚注参照》する必要があります：

    npm install -D @tauri-apps/cli@latest

  3. フロントエンド開発サーバーの URL を決定します。この URL は、Tauri があなたのコンテンツを読み込むために使用する URL のことです。たとえば、Vite を使用している場合、デフォルトの URL は http://localhost:5173 です。

  4. プロジェクト・ディレクトリに戻り、Tauri を初期化します：

    npx tauri init

    上記のコマンドを実行すると、さまざまな質問項目に対するプロンプトが表示されます：

    ✔ What is your app name? tauri-app　《アプリ名は何ですか？ 例「tauri-app」》
    ✔ What should the window title be? tauri-app　《ウィンドウ・タイトルは何にしますか？ 例「tauri-app」》
    ✔ Where are your web assets located? ..　《web 関連データはどこに置きますか？ 「...」》
    ✔ What is the url of your dev server? http://localhost:5173 　《開発サーバーの URL は何ですか？ 例「http://localhost:5173」》
    ✔ What is your frontend dev command? pnpm run dev　《フロントエンドの開発コマンドは何ですか？ 例「pnpm run dev」》
    ✔ What is your frontend build command? pnpm run build　《フロントエンドのビルド・コマンドは何ですか？ 例「pnpm run build」》

    これにより、必要な Tauri 環境設定ファイルと共に src-tauri ディレクトリがあなたのプロジェクトに作成されます。

  5. vite.config.ts にある server.watch.ignored オプションを設定し、Vite が src-tauri ディレクトリを監視しないようにします：

    vite.config.ts
    import { defineConfig } from "vite";
    

    export default defineConfig({
      server: {
        watch: {
          ignored: ["**/src-tauri/**"],
        },
      },
    });

  6. Tauri アプリが動作していることを確認するために、開発サーバーを実行します：

    npx tauri dev

    このコマンドは、Rust コードをコンパイルし、あなたが作成した Web コンテンツをウィンドウに表示します。

おめでとうございます！　 Tauri CLI を用いて、新しい Tauri プロジェクトができあがりました！ 🚀

次のステップは…

Section titled “次のステップは…”

【※ この日本語版は、「Jun 30, 2026 英語版」に基づいています】




《訳注》

グローバル・インストール　「グローバルにインストールする（globally install）」とは、インストールするパッケージやツールを、PC 上のどの場所（フォルダ／プロジェクト）からでも参照・実行できるように、共通の場所にインストールしておく方法です。

Support on Open CollectiveSponsor on GitHub

© 2026 Tauri Contributors. CC-BY / MIT