| title | プロジェクトの作成 | ||
|---|---|---|---|
| sidebar |
|
import { Steps } from '@astrojs/starlight/components'; import Cta from '@fragments/cta.mdx'; import TranslationNote from '@components/i18n/TranslationNote.astro';
Tauri が非常に柔軟である理由の１つは、事実上どのようなフロントエンド技術（フレームワーク）とも連携できることです。新しい Tauri プロジェクトを作成するための一助として、公式に維持管理されている「ユーティリティ create-tauri-app」があり、各フロントエンド技術用テンプレートがいくつか用意されています 。
create-tauri-app には、現在、以下のテンプレートが揃っています： 「* バニラ・モード」（HTML、CSS および JavaScript； フレームワークなし）、「Vue.js」、「Svelte」、「React」、「SolidJS」、「Angular」、「Preact」、「Yew」、「Leptos」、 および「Sycamore」です。 Awesome Tauri repo で見つかるコミュニティー作成のテンプレートやフレームワークも追加利用可能です。
<sup>\*</sup>**バニラ・モード**（英 vanilla）： プログラムやソフトウェアに改変・改修・カスタマイズなどが一切行なわれていない、提供されたまま（原型を留めたまま）の状態を指します。バニラ・モードでは、「Vue.js」以降に列挙されているフロントエンド・フレームワークが付加されません。《参考： [Wikipedia](https://ja.wikipedia.org/wiki/バニラ_(ソフトウェア))》
{/* TODO: redirect to integrate to existing front-end project specific docs */} あるいは、下記の「マニュアル・セットアップ」に従い、Tauri を現在作業中のプロジェクトに追加することで、あなたのコードを Tauri アプリに変換できます。
create-tauri-app を利用してプロジェクトを開始するには、プロジェクトを開始するフォルダーで、以下のコマンドのいずれかを実行します。どのコマンドを使用するかわからない場合は、Linux および macOS では「Bash」コマンド、Windows では「PowerShell」コマンドの使用をお薦めします。
画面のプロンプト表示に従って、「プロジェクト名」、「フロントエンド言語」、「パッケージ・マネージャー」、「フロントエンド・フレームワーク」、および（該当する場合は）フロントエンド・フレームワークのオプションを選択します。
:::tip[どれを選べばよいのか判りませんか？]
はじめての場合には、「vanilla／バニラ・モード」テンプレート（HTML、CSS、および JavaScript； フレームワークなし）を利用してプロジェクトを開始することをお薦めします。いつでも、後から、フロントエンドのフレームワークを統合 できます。
- どの言語をフロントエンドで使用するかを選択：
TypeScript / JavaScript - パッケージ・マネージャーを選択：
pnpm - ユーザー・インターフェイス（UI）テンプレートを選択：
Vanilla - ユーザー・インターフェイス（UI）フレーバーを選択：
TypeScript
:::
-
プロジェクトの名前とバンドル識別子（アプリの一意の ID）を選んでください：
? Project name (tauri-app) › 《プロジェクト名（tauri-app）》 ? Identifier (com.tauri-app.app) › 《識別子（com.tauri-app.app）》 -
フロントエンドの言語を選んでください：
? Choose which language to use for your frontend › 《？フロントエンドにはどの言語を使用しますか： 以下から選択》 Rust (cargo) TypeScript / JavaScript (pnpm, yarn, npm, bun) .NET (dotnet) -
パッケージ・マネージャーを選択します（選択肢が複数ある場合）：
TypeScript / JavaScript の場合の選択肢：
? Choose your package manager › 《パッケージ・マネージャーを選んでください》 pnpm yarn npm bun -
UI テンプレートとフレーバーを選んでください（選択肢が複数ある場合）：
Rust の場合の選択肢：
? Choose your UI template › 《UI テンプレートを選んでください》 Vanilla Yew Leptos SycamoreTypeScript / 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/)
設定が完了すると、テンプレートが作成され、選択したパッケージ・マネージャーを使ってどのようにそのテンプレートを利用するのかを提示します。もしパッケージ・マネージャーがシステム内の依存関係の不備を検出した場合には、パッケージ一覧が出力されて足りないパッケージのインストールが促されます。
{/* TODO: Can CTA offer to install the deps? */}
create-tauri-app の設定後、プロジェクト・フォルダーに移動して依存関係をインストールしたら、 Tauri CLI（コマンドライン・インターフェース）を使用して開発サーバーを起動します。
import CommandTabs from '@components/CommandTabs.astro';
これで新しいウィンドウが開き、あなたのアプリが実行されます。
おめでとうございます！ Tauri アプリの完成です！ 🚀
すでにフロントエンドが作成済みであるとか、自分自身で設定を行ないたいとかいう場合には、「Tauri CLI」を用いてそのプロジェクトのバックエンドを個別に初期化できます。
:::note 以下の事例では、新しいプロジェクトを始めていることを前提としています。アプリケーションのフロントエンドをすでに初期化している場合は、ステップ 1 を省略してください。 :::
1. プロジェクト用の新しいディレクトリを作成し、フロントエンドを初期化します。通常の HTML、CSS、JavaScript や、Next.js、Nuxt、Svelte、Yew、Leptos などの自分好みのフレームワークを使用できます。必要となるのは、ブラウザにアプリを供給する方法だけです。ほんの一例として、下記はシンプルな Vite フロントエンド・ビルドツールを設定する方法です：
<CommandTabs
npm="mkdir tauri-app
cd tauri-app
npm create vite@latest ."
yarn="mkdir tauri-app
cd tauri-app
yarn create vite ."
pnpm="mkdir tauri-app
cd tauri-app
pnpm create vite ."
deno="mkdir tauri-app
cd tauri-app
deno run -A npm:create-vite ."
bun="mkdir tauri-app
cd tauri-app
bun create vite"
/>
2. 次に、上記で導入したパッケージ・マネージャーを使用して Tauri の CLI ツールをインストールします。`cargo` を使用して Tauri CLI をインストールする場合には、「グローバル・インストール」する必要があります：
グローバル・インストール install globally： 通常パッケージはプロジェクト毎にインストールされますが（ローカル・インストール）、グローバル・インストールでは、どのプロジェクトからでも使われるコマンドなどを、インストールしたパッケージが PC のどこからでも実行できるように PATH 指定するものです。
<CommandTabs
npm="npm install -D @tauri-apps/cli@latest"
yarn="yarn add -D @tauri-apps/cli@latest"
pnpm="pnpm add -D @tauri-apps/cli@latest"
deno="deno add -D npm:@tauri-apps/cli@latest"
bun="bun add -D @tauri-apps/cli@latest"
cargo='cargo install tauri-cli --version "^2.0.0" --locked'
/>
3. フロントエンド開発サーバーの URL を決定します。これは、Tauri がコンテンツを読み込むために使用する URL のことです。たとえば、Vite を使用している場合、デフォルトの URL は `http://localhost:5173` です。
4. プロジェクト・ディレクトリに戻り、Tauri を初期化します：
<CommandTabs
npm="npx tauri init"
yarn="yarn tauri init"
pnpm="pnpm tauri init"
deno="deno task tauri init"
bun="bun tauri init"
cargo="cargo tauri init"
/>
上記のコマンドを実行すると、さまざまな質問項目に対するプロンプトが表示されます：
```sh frame=none
✔ 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 アプリが動作していることを確認するために、開発サーバーを実行します：
<CommandTabs
npm="npx tauri dev"
yarn="yarn tauri dev"
pnpm="pnpm tauri dev"
deno="deno task tauri dev"
bun="bun tauri dev"
cargo="cargo tauri dev"
/>
このコマンドは、Rust コードをコンパイルし、あなたが作成した Web コンテンツのウィンドウを表示します。
おめでとうございます！ Tauri CLI を用いて、新しい Tauri プロジェクトができあがりました！ 🚀