Claude Media
Claude Codeで.NET MAUIアプリを開発する
Claude Codeチュートリアル

Claude Codeで.NET MAUIアプリを開発する

VS Code拡張のClaude Codeと.NET MAUI拡張を組み合わせ、Android・iOS・macOS・Windows向けアプリをどこまで任せて作れるか手順で確認します。

読了目安 約8分

Claude CodeとMAUI拡張を組み合わせる

.NET MAUI(.NET Multi-platform App UI)は、1つのC#プロジェクトからAndroid・iOS・macOS・Windows向けアプリをビルドできるMicrosoftのフレームワークです。Visual Studio CodeにClaude Code拡張と.NET MAUI拡張を並べて入れると、コード生成とビルド・実行の両方をVS Code内で完結できます。

役割分担はシンプルです。ファイルの生成・編集はClaude Code拡張が担い、プロジェクト作成・ビルド・エミュレータへのデプロイは.NET MAUI拡張のコマンドが担います。Claudeが直接MAUIのビルドパイプラインを操作するわけではありません。この分業を先に押さえておくと、以降の手順で「どちらの拡張の機能か」に迷わずに済みます。

前提環境を整える

導入前に、2つの拡張それぞれが要求する前提を満たします。

  • Claude Code拡張: VS Code 1.94.0以降。Anthropicの有料プラン(Pro・Max・Team・Enterprise)またはClaude Consoleアカウントが必要で、APIキーは不要です
  • .NET MAUI拡張: Visual Studioサブスクリプション付きのMicrosoftアカウント(C# Dev Kit用)、.NET SDK、.NET MAUI SDK

.NET SDKが入っているかは次のコマンドで確認できます。

dotnet --version

.NET MAUI SDKが未導入なら、OSごとに次のコマンドでワークロードを追加します。

# Windows
dotnet workload install maui
 
# macOS
sudo dotnet workload install maui
 
# Linux
dotnet workload install maui-android

Linuxだけmaui-androidという別のワークロードIDになります。この違いは名前だけの問題ではなく、Linux環境がAndroidターゲットのみに対応し、iOS・macOS・Windows向けのビルドができないことを反映しています。

VS Codeに両拡張を導入する

  1. VS Codeの拡張機能タブ(Cmd+Shift+X / Ctrl+Shift+X)で「Claude Code」を検索してインストールします。CursorなどClaude Code拡張に対応するVS Codeフォークでも同じ手順で入り、非対応のエディタではOpen VSXレジストリから手動インストールします
  2. 同じ拡張機能タブで「.NET MAUI」を検索してインストールします。この拡張はC# Dev KitとC#拡張を自動で連鎖インストールします
  3. .NET MAUI拡張の案内に従い、Visual Studioサブスクリプション付きのMicrosoftアカウントでC# Dev Kitにサインインします。Claude Code拡張は初回起動時に別途ブラウザでのサインインを求めます

認証は拡張ごとに完全に別です。片方でサインイン済みでも、もう片方のサインイン画面は独立して表示されます。

MAUIプロジェクトをClaudeと作る

  1. VS CodeのエクスプローラーでCreate .NET Projectを押すか、コマンドパレットから.NET: New Project...を実行します
  2. テンプレート一覧から.NET MAUI Appを選びます
  3. プロジェクトの保存先には空のフォルダを指定します。既存ファイルが残るフォルダを選ぶとプロジェクト作成が失敗します
  4. プロジェクト名を入力し、作成の完了を待ちます
  5. MainPage.xaml.csのようなC#ファイルを開き、エディタ右上のSparkアイコンからClaude Code拡張のパネルを開きます

コードの実装はここからClaudeに任せられます。選択したコードは自動でClaudeに渡り、Option+K / Alt+Kで@MainPage.xaml.cs#5-10のような行範囲付きの参照も追加できます。書き方の詳細はVS Code拡張の@メンションでファイル・フォルダを参照するにまとめています。

選択したXAMLのボタンにタップ時のバイブレーションを追加して、
カウンターの値をローカル設定に永続化するように変更して

Manualモードでは、Claudeが提案した変更が差分ビューに表示され、承認するまでファイルは書き換わりません。AutoやEdit automaticallyモードでは大半のファイルがそのまま編集されます。提案を毎回確認してから反映したい場合はManualモードを選びます。

ターゲットは開発機のOSで決まる

.NET MAUIはクロスプラットフォームですが、どの開発機からでも4プラットフォームすべてをビルドできるわけではありません。開発機のOSがビルド可能なターゲットを制限します。

開発機のOSビルド可能なターゲット
Windowsビルド可能なターゲットWindows、Android
macOSビルド可能なターゲットAndroid、iOS、macOS(Mac Catalyst)
Linuxビルド可能なターゲットAndroid(maui-androidワークロードのみ)

iOS・Mac Catalyst向けのビルドと署名にはMacが必須です。Visual Studio(Windows版)にはリモートのMacビルドホストにペアリングしてWindows機からiOS開発を続ける機能がありますが、VS Code版の.NET MAUI拡張の公式手順にこの経路の記載はありません。iOS開発はMac上のVS Codeで完結させるのが現状の前提です。

デバッグ対象のデバイス・エミュレータは、VS Codeのステータスバーにある{ }アイコンから切り替えます。Android・iOS・macOS(Mac Catalyst)のいずれも同じ操作です。AndroidとiOSを並行して確認したい場合は、VS Code拡張で複数会話を並行実行する方法を使うと、プラットフォームごとにセッションを分けて作業できます。

プラットフォーム別の追加設定

Android向けにビルドする場合、Java SDK・Android SDK・エミュレータが必要です。もっとも手間が少ないのは、コマンドパレットで.NET MAUI: Configure Androidを実行し、続けてRefresh Android environmentでエラーが出ないことを確認する方法です。個別に導入した場合は、ANDROID_HOME環境変数でSDKパスを指定します。

iOS・Mac Catalyst向けは、Xcodeとコマンドラインツールのインストールが前提です。

xcode-select --install

インストール後、コマンドパレットで.NET MAUI: Configure Apple→Refresh Apple environmentを実行し、Xcodeのパスが正しく認識されているか確認します。実機デバッグには、Apple IDをXcodeに追加していることと、デバイス側でDeveloper Modeを有効化していることも必要です。

Gitとデバッグもここで完結する

Claude Codeはgitワークフローにも対応しています。コミットメッセージの作成やプルリクエストの作成をチャットで依頼できます。

MAUIアプリの変更をコミットして、このfeatureのPRを作って

ビルド・実行自体はF5キーか、エディタ右上のRunボタンで行います。Claudeが編集し、F5で実機・エミュレータへ反映して確認する。この往復がこの環境での基本サイクルです。Claudeがパッケージの復元のようなバックグラウンドタスクを実行している間は、プロンプトボックスに/tasksと入力すると進行状況を確認できます。

同じ.NET環境で外部サービスと連携するツールを自作したい場合は、C#でMCPサーバーを作るが公式C# SDKでの実装手順をまとめています。

よくあるつまずき

空でないフォルダを選んでプロジェクト作成に失敗する。.NET MAUI拡張は空のフォルダにしかプロジェクトを作成できません。既存のgitリポジトリ直下などを指定すると失敗するので、新規の空フォルダを用意してから作成します。

統合ターミナルでclaudeコマンドが見つからない。Claude Code拡張をインストールしただけではclaudeはPATHに追加されません。単体CLIを別途インストールしていないことが原因です。

Android SDKの場所をVS Codeが認識しない。ANDROID_HOMEが未設定か、Visual StudioでSDKを導入した場合のパス(WindowsではC:\Program Files (x86)\Android\android-sdk)とVS Code側の設定が食い違っていることが多い原因です。.NET MAUI: Configure AndroidのSelect Android SDK locationで明示的に指定し直します。

Xcodeを認識しない。xcode-select --installを実行していない、または複数のXcodeがインストールされていてコマンドラインツールが別バージョンを指している状態です。xcode-select -pで現在のパスを確認し、Xcode > Settings > LocationsでCommand Line Toolsの参照先を合わせます。

サインインしたはずなのにClaude Codeがサインイン画面に戻る。シェルにANTHROPIC_API_KEYを設定していると、VS CodeがGUI起動時にその環境変数を引き継がず、サインイン状態と競合することがあります。ターミナルからcode .で起動してシェル環境を継承させるか、Claudeアカウントでのサインインに統一します。

まとめ

Claude Codeと.NET MAUI拡張はどちらもVS Codeの独立した拡張機能で、コード生成はClaude、ビルド・実機反映は.NET MAUI拡張という役割分担で組み合わさります。開発機のOSでビルドできるターゲットが変わる点(Windows機ならWindows・Android、Mac機ならAndroid・iOS・macOS、LinuxはAndroidのみ)を先に押さえておくと、環境構築でつまずきにくくなります。Claude Code拡張自体の基本操作はClaude Code VS Code拡張機能の使い方で確認できます。

この記事を共有:XはてブLinkedIn

関連する記事

Claude Code をもっと見る →