Claude Media
Claude Codeで.NET MAUIアプリを開発する手順 — VS Code拡張で完結

Claude Codeで.NET MAUIアプリを開発する手順 — VS Code拡張で完結

Claude Codeで.NET(C#)のMAUIアプリを作る手順です。VS CodeにClaude Code拡張と.NET MAUI拡張を入れ、コード生成とビルド・デバッグを役割分担します。

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

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

Claudeが直接MAUIのビルドパイプラインを操作するわけではありません。2つの拡張は独立していて、担当が分かれています。

くらべる

2つの拡張の担当

コードを書く側

Claude Code拡張

C#・XAMLファイルの生成と編集、gitのコミット作成。選択範囲や@参照で、今見ているコードを渡せます。

動かす側

.NET MAUI拡張

プロジェクトの作成、環境の検査(Configure Android / Apple)、ビルド、エミュレータへのデプロイとデバッグ。

前提環境を整える

導入前に、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。iOS・Mac Catalystを狙うならXcodeとシミュレータランタイム、Androidを狙うならOpenJDK・Android 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だけです。

VS Codeに両拡張を導入する

  1. VS Codeの拡張機能タブ(Cmd+Shift+X / Ctrl+Shift+X)で「Claude Code」を検索してインストールします。VS Codeのフォークでも同じ手順で入り、Open VSXレジストリからも入れられます
  2. 同じ拡張機能タブで「.NET MAUI」を検索してインストールします。この拡張はC# Dev KitとC#拡張を自動で連鎖インストールします
  3. .NET MAUI拡張の案内に従い、Microsoftアカウントを接続します。Claude Code拡張は初回に別途、Anthropicアカウントでのサインインを求めます

Claude CodeはAnthropicアカウント、C# Dev KitはMicrosoftアカウントと、サインイン先が拡張ごとに異なります。

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

手順

プロジェクト作成からClaudeを開くまで

  1. 1

    作成を始める

    エクスプローラーのCreate .NET Projectを押すか、コマンドパレットから.NET: New Project...を実行します。

  2. 2

    テンプレートと保存先を決める

    テンプレート一覧で.NET MAUI Appを選び、保存先には空のフォルダを指定します。

  3. 3

    名前を入れて作成する

    プロジェクト名を入力して作成し、完了まで待ちます。フォルダを信頼するか尋ねられたら、信頼できる場所として許可します。

  4. 4

    Claudeのパネルを開く

    MainPage.xaml.csのようなC#ファイルを開き、エディタ右上のSparkアイコンを押します。このアイコンはファイルを開いているときだけ表示されます。

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

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

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

選択範囲が渡らないファイル

選択したコードは、渡らないファイルがあります。ワークスペース内でVS Codeのfiles.exclude・search.excludeに一致するファイルや、gitが無視するファイルでは、Claudeに届くのはパスまでです。gitが無視するファイルの除外は、VS Codeのsearch.useIgnoreFilesと拡張のrespectGitIgnoreの両方が有効なときに働きます(どちらも既定は有効)。ビルド出力のように.gitignoreに載るフォルダー内のファイルで質問したときに、選択した行が反映されない原因になります。

この除外はチャットパネルの話で、統合ターミナルで動かすCLIは選択範囲をファイルの種類を問わず送ります。署名用のキーストアや.envのように読ませたくないファイルには、Readの拒否ルールを用意します。

ターゲットは開発機の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からhot restartで実機にデバッグビルドを送る場合を除く)。Visual Studio(Windows版)側の手順にはMacのビルドホストとペアリングする方法もありますが、VS Codeでのチュートリアルはどれも手元のMac上で動かす構成です。Mac Catalyst向けのアプリは、起動もデバッグも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でAndroid SDKのパス、JAVA_HOMEでJava SDKのパスを指定します。Android SDKの場所は、Configure AndroidのSelect Android SDK locationでユーザー単位またはワークスペース単位に指定できます。プロジェクト単位にしたいときは、.csprojの$(AndroidSdkDirectory)に設定します。ライセンス未承諾なら、SDKのcmdline-tools/{version}/binで、昇格したターミナルからsdkmanager --licensesを実行します。

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ボタンで行います。デバッガーの選択を求められたらC#とプロジェクトの起動構成を選びます。Claudeが編集し、F5でエミュレータへ反映して確認する。この往復がこの環境での基本サイクルです。

Claudeが開発サーバーのようなバックグラウンドの処理を動かしている間は、プロンプトボックスの/tasksで一覧と出力を見られ、そこから止めることもできます。この機能はClaude Code v2.1.277以降が対象です。

Edit automaticallyやAutoモードでは、Claudeがsettings.jsonやtasks.jsonのようにVS Codeが自動で実行することがある設定ファイルも書き換えられます。デバッグの起動構成を扱うMAUIでは、信頼できないリポジトリではRestricted ModeかManualモードを使うという選択肢があります。

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

よくあるつまずき

既存リポジトリ直下を選んでプロジェクト作成に失敗する

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

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のLocationの項目でCommand Line Toolsの参照先を合わせます。シミュレーターが入らないときはXcode > Settings > Componentsでランタイムを入れます。

ANTHROPIC_API_KEYを設定したのにサインイン画面が出る

シェルでANTHROPIC_API_KEYを設定したのにサインイン画面が出る場合、GUIから起動したVS Codeがシェルの環境変数を引き継いでいない可能性があります。ターミナルからcode .で起動してシェル環境を継承させるか、Claudeアカウントでのサインインに統一します。

まとめ

Windows機で始めて後からiOSを足したくなったら、その時点でMacが要ります。Visual Studioのhot restartによる実機デバッグ以外、iOSとMac Catalystのビルドと署名はMac上でしかできず、VS Code経路にはhot restartがありません。

ビルドや環境の不具合は.NET MAUI拡張の診断で切り分け、Claudeには選択範囲や@参照で今見ているコードを渡して書き換えを任せます。Claude Code拡張自体の基本操作はClaude Code VS Code拡張機能の使い方にあります。Windows専用のWPFを画面なしで検証する設計はClaude CodeでWPFアプリを作るにまとめています。

参照した一次ソース

この記事の記述は、次の一次ソースと照合しています。更新時に参照先が変わった場合は一覧も更新します。

  1. learn.microsoft.com/en-us/dotnet/maui/get-started/first-app
  2. learn.microsoft.com/en-us/dotnet/maui/get-started/installation
  3. code.claude.com/docs/en/ide-integrations
  4. code.claude.com/docs/en/vs-code
この記事を共有:XはてブLinkedIn