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-androidLinuxだけmaui-androidという別のワークロードIDになります。Linuxで対応するターゲットはAndroidだけです。
VS Codeに両拡張を導入する
- VS Codeの拡張機能タブ(
Cmd+Shift+X/Ctrl+Shift+X)で「Claude Code」を検索してインストールします。VS Codeのフォークでも同じ手順で入り、Open VSXレジストリからも入れられます - 同じ拡張機能タブで「.NET MAUI」を検索してインストールします。この拡張はC# Dev KitとC#拡張を自動で連鎖インストールします
- .NET MAUI拡張の案内に従い、Microsoftアカウントを接続します。Claude Code拡張は初回に別途、Anthropicアカウントでのサインインを求めます
Claude CodeはAnthropicアカウント、C# Dev KitはMicrosoftアカウントと、サインイン先が拡張ごとに異なります。
MAUIプロジェクトをClaudeと作る
プロジェクト作成からClaudeを開くまで
- 1
作成を始める
エクスプローラーのCreate .NET Projectを押すか、コマンドパレットから
.NET: New Project...を実行します。 - 2
テンプレートと保存先を決める
テンプレート一覧で.NET MAUI Appを選び、保存先には空のフォルダを指定します。
- 3
名前を入れて作成する
プロジェクト名を入力して作成し、完了まで待ちます。フォルダを信頼するか尋ねられたら、信頼できる場所として許可します。
- 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アプリを作るにまとめています。
参照した一次ソース
この記事の記述は、次の一次ソースと照合しています。更新時に参照先が変わった場合は一覧も更新します。