Claude CodeでTauriアプリを開発する — 環境構築からRust連携まで

Tauriとは何か — Claude Codeで組む理由

Tauriは、Rustで書いたバックエンドとWeb技術のフロントエンドを組み合わせて、軽量なデスクトップ・モバイルアプリを作るフレームワークです。フロントエンドはReact・Vue・Svelteなど任意のフレームワークを使え、HTML・CSS・JavaScriptにコンパイルできれば組み込めます。

Tauriの強みは3つです。Rustのメモリー安全性を土台にした基盤、OSに標準搭載されたWebViewを使うことでの小さなバイナリサイズ、そして任意のフロントエンドを選べる柔軟なアーキテクチャです。公式ドキュメントでは、最小構成のTauriアプリは600KB未満に収まるとされています。Electronのようにブラウザーエンジンをアプリごとに同梱しない設計が理由です。

Claude Codeとの相性が良いのは、TauriプロジェクトがRustとJavaScript/TypeScriptの2言語にまたがるためです。バックエンドはsrc-tauri/配下のRustコード、フロントエンドはプロジェクトルートのJS/TSコードと、役割が物理的に分かれています。Claude Codeは両方のファイルを同時に読み書きでき、cargoやnpmのコマンドもBashツールから直接実行できます。

開発環境の前提条件

Tauriの開発にはRustのインストールが必須です。rustup経由でインストールし、OSごとに追加の依存が必要になります。

Linuxはディストリビューションごとにパッケージ名が違う点に注意が必要です。Debian/Ubuntu系はwebkit2gtk-4.1-devですが、openSUSEはwebkit2gtk3-develと表記が変わります。

Claude Codeにこれらのインストールコマンドを実行させる場合、aptやbrew、Xcodeのライセンス同意といった管理者権限を要する操作が混じります。Bashツールの許可設定を事前に確認し、対話式のプロンプトが出た場合は手動での承認を挟む前提で進めます。

xcode-select --install

Claude CodeでTauriプロジェクトを作成する

環境が整ったら、公式のスキャフォールディングツールcreate-tauri-appでプロジェクトを作成します。対話式にフロントエンドのテンプレートを選べます。公式テンプレートはVanilla・Vue.js・Svelte・React・SolidJS・Angular・Preact・Yew・Leptos・Sycamoreに対応しています。すでにあるプロジェクトにTauriを追加する経路も同じツールから用意されています。

npm create tauri-app@latest

作成されたプロジェクトは、ルート直下のJavaScriptプロジェクトとsrc-tauri/内のRustプロジェクトの2階層構成になります。src-tauri/にはCargo.toml、Tauriの設定ファイルtauri.conf.json、アイコン一式を置くicons/、そしてIPC(プロセス間通信)の許可設定を置くcapabilities/が含まれます。

開発サーバーは次のコマンドで起動します。フロントエンドのdevサーバーが先に立ち上がり、そこにネイティブのウィンドウが被さる形で表示されます。

npm run tauri dev

Claude Codeにこの構成でコードを書かせるときは、CLAUDE.mdに「Rustのコマンド実装はsrc-tauri/src/lib.rs、フロントエンドのUIはsrc/」のように役割を明記しておくと、編集対象を取り違えにくくなります。

既存プロジェクトへの追加とモバイル対応

すでにあるWebアプリをTauri化したい場合は、create-tauri-appで新規プロジェクトを作らずに、既存のコードベースへTauriを追加する経路も用意されています。フロントエンド側の構成はそのままに、src-tauri/だけを後付けする形です。

モバイル向けのビルドも同じCLIから扱えます。tauri android initでAndroidターゲットを初期化し、tauri android devで実機・エミュレーターに向けた開発モードを起動します。iOS向けはtauri ios initとtauri ios devが対応します。モバイル開発にはAndroid StudioやXcodeなど、デスクトップ開発とは別の前提ツールが追加で必要です。

環境まわりで原因が分からないエラーに当たったときは、tauri infoコマンドが役立ちます。Rust・Node.jsのバージョンやプロジェクト設定を一覧表示するので、Claude Codeに原因調査をさせる際は、最初にこの出力を渡すと切り分けが早くなります。

Rustとフロントエンドの境界をどう扱うか

TauriのIPCは、Rust側で#[tauri::command]を付けた関数を、フロントエンドのJavaScriptからinvoke()で呼び出す形です。ここで見落としやすいのがcapabilities/ディレクトリの存在です。新しいRustコマンドを追加しても、対応する権限をcapabilities/default.jsonのようなファイルで許可しない限り、フロントエンドから呼び出せません。

公式リファレンスが示すcapabilityファイルの例は次の構造です。

{
  "identifier": "main-user-files-write",
  "description": "mainウィンドウにファイル書き込み関連コマンドを許可する",
  "windows": ["main"],
  "permissions": ["core:default", "dialog:open"]
}

identifierでcapabilityを識別し、windowsで対象ウィンドウを指定、permissionsに許可するコマンドを列挙する形です。Claude CodeにRustコマンドを追加させたあと、フロントエンドから呼んで権限エラーになる場合は、まずこのファイルへの許可漏れを疑うのが早道です。

このファイルはコマンド追加のたびに手作業で更新する対象なので、Claude Codeに新しい#[tauri::command]を書かせるときは、CLAUDE.mdに「Rustコマンドを追加したらcapabilities/配下のJSONも同じ変更セットに含める」と明記しておくのが実用的です。ファイルを分けて依頼すると、コマンド定義だけが先に実装され、許可の追記が後回しになったまま気づかれないことがあります。同様に、フロントエンドの型定義(invoke<T>()の戻り値型)とRust側の関数シグネチャがずれるケースも、両方を1つの編集単位として指示すると防ぎやすくなります。

Rust側のコンパイルエラーが読みにくいときは、公式ドキュメントにVS Code・RustRover・Neovim向けのデバッグ環境セットアップガイドが個別に用意されています。エディター側のデバッガーとTauriプロジェクトを接続する手順がまとまっています。

バイナリサイズをさらに詰めたい場合は、src-tauri/Cargo.tomlにリリース用プロファイルを追加します。

[profile.release]
codegen-units = 1
lto = true
opt-level = "s"
panic = "abort"
strip = true

codegen-units = 1とlto = trueでリンク時最適化を有効にし、opt-level = "s"でサイズ優先のコンパイルに切り替えます。strip = trueでデバッグシンボルを取り除く設定です。

作り始める前に画面構成やRustコマンドの一覧を整理しておきたい場合は、cc-sddでClaude Codeの仕様駆動開発を実践するのような仕様駆動の進め方も選択肢になります。フロントエンド部分だけを先に確認したいときは、devサーバーが通常のlocalhostである性質を利用して、Claude Code DesktopアプリプレビューでWebアプリを検証するの手順でブラウザー側から動作を見ることもできます。

よくあるつまずき

cargoコマンドが見つからない

Rustはrustup経由でインストールし、シェルを再起動してPATHを反映させる必要があります。Claude Codeのセッションを開き直さないとPATHの変更が反映されないこともあります。

Linuxでビルドエラーになる

ディストリビューションによってwebkit2gtk系パッケージの名前が異なります。Debian/Ubuntu系とArch Linuxはlibwebkit2gtk-4.1-dev系のパッケージ名で統一されていますが、openSUSEはwebkit2gtk3-develと表記が変わります。AlpineベースのDockerコンテナではmuslのCライブラリが原因でリンカーエラーになることもあり、-staticパッケージの追加インストールが必要になる場合があります。Claude CodeでCI・サンドボックス環境のビルドを自動化する際は、ベースイメージがAlpineかどうかを先に確認します。

フロントエンドからinvoke()が失敗する

前述のとおり、capabilities/にコマンドの許可設定を追加していないことが原因です。エラーメッセージに権限不足の旨が出ていないか確認します。

WindowsでWebView2関連のエラーが出る

Windows 10のビルド1803より前の環境ではWebView2ランタイムが未搭載です。WebView2ランタイムの導入が必要です。

devUrlの設定漏れでウィンドウが真っ白になる

フロントエンドのdevサーバーのURLをtauri.conf.jsonのbuild.devUrlに指定していないと、Tauriがどこを表示すればよいか分かりません。フレームワーク側のポート番号と一致させます。

配布用ビルドを作る

tauri buildはリリースモードでのビルドと、プラットフォームごとのインストーラー生成を一括で行います。生成されるバンドル形式はOSごとに違い、Windowsはmsi、macOSはdmg、Linuxはdebやappimageなどです。

バンドル生成だけを個別に制御したい場合は、ビルドとバンドルの手順を分けられます。tauri build --no-bundleでビルドのみ実行し、tauri bundle --bundles dmgのように形式を指定してバンドルだけをやり直せます。

ほとんどのプラットフォームはコード署名を要求します。署名なしで配布すると、インストール時にOS側から警告が出たり、実行そのものを拒否されたりします。証明書の取得・設定は配布計画の初期段階から見込んでおく必要があります。

用途別の向き不向き

まとめ

Claude CodeでTauriアプリを作る流れは、Rustと前提パッケージの導入、create-tauri-appでのプロジェクト作成、npm run tauri devでの起動確認という順です。つまずきの大半は、Linuxのパッケージ名の違いか、capabilities/でのIPC許可漏れに集約されます。原因が分からないときはtauri infoの出力をClaude Codeに渡すところから始めます。配布用ビルドはtauri buildで作成でき、プラットフォームごとのインストーラーやアプリストア向けバンドルを生成します。ビルド・配布の細かい設定は、プロジェクトごとのtauri.conf.jsonに書き込まれます。Claude Codeを使った開発ツールの導入事例はClaude Code開発ツール導入事例にまとめています。