コンテンツにスキップ
Tauri
Guides References Blog Releases

プロジェクトの作成

Tauri が非常に柔軟である理由の１つは、事実上どのようなフロントエンド技術（フレームワーク）とも連携できることです。新しい Tauri プロジェクトを作成するための一助として、公式に維持管理されている「ユーティリティ create-tauri-app」があり、各フロントエンド技術用テンプレートがいくつか用意されています 。

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 を利用する

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

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

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

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

  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/)

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

開発サーバーの起動

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

cd tauri-app
npm install
npm run tauri dev

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

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

マニュアル・セットアップ

すでにプロントエンドができあがっているとか、自分自身で設定を行ないたいとかいう場合には、「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 を決定します。これは、Tauri がコンテンツを読み込むために使用する URL のことです。たとえば、Vite を使用している場合、デフォルトの URL は http://localhost:5173 です。

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

    npx tauri init

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

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

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

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

    npx tauri dev

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

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

次のステップは…

【※ この日本語版は、「Dec 31, 2024 英語版」に基づいています】


Doc-JP 2.00.00

© 2025 Tauri Contributors. CC-BY / MIT