【Mac版】Visual Studio Codeで.Net MAUIをインストールする方法

Visual Studio for Macが2024年8月31日にサポートが終了になります。

そこで当記事では、Visual Studio Codeで.Net MAUIの開発環境を整備する方法を紹介していきたいと思います。

※Visual Studio for Macのサポート終了について

紹介環境

紹介に利用する環境は、macOS(Arm64)になります。環境が異なる場合、手順が異なりますので、ご了承ください。

「Arm64」「x64」の調べ方

「Arm64」「x64」が分からない方は、以下のコマンドを実行することで確認できます。macOSの場合は、ターミナルになります。

uname -m

実行してみた結果は、以下の画像のようになります。以下の画像の場合、「Arm64」になります。

ターミナルで「Arm64」か「x64」か確認

Visual Studio Codeのインストールと日本語化

Visual Studio Codeのインストールと日本語化の手順は以下で紹介しています。

iOSの開発環境の整備

Visual Studio Codeに.Net MAUIのiOSの開発環境を整備していきます。

手順1:XCodeのインストール

XCodeのインストールはAppストアから行っていきます。以下の画像のように検索欄に「XCode」を入力してインストールしてください。

AppストアからXCodeをインストール

手順2:「xcode-select –install」のコマンドを実行

ターミナルから以下のコマンドを実行します。

xcode-select --install

コマンドを実行すると以下の画面が表示されます。「インストール」を選択してください。

xcode-selectのインストール

以下のような画面が表示された場合、「同意する」を選択してください。

xcode-selectの使用許諾契約

しばらくすると以下の画面に切り替わりインストールが完了します。

xcode-selectのインストール完了

Androidの開発環境の整備

Visual Studio Codeに.Net MAUIのAndroidの開発環境を整備していきます。

手順1:Android Studioのインストール

最新版のインストーラーは以下のリンクから取得できます。

インストール方法は以下のリンクから確認してください。

手順2:OpenJDKのインストーラーをダウンロード

MicrosoftからOpenJDKをダウンロードします。以下のリンクからダウンロードする画面に移動できます。

以下のような画面が表示されますので、対応しているOpenJDK(OpenJDK 17:2024/02/12 時点)を選択してください。

手順3:OpenJDKをインストール

ダウンロードから先ほどダウンロードしたインストーラー(microsoft-jdk-17.0.10-macos-aarch64.pkg:2024/02/12 時点)を選択します。

OpenJDKのインストーラー1

以下の画面が表示されるので「続ける」を選択します。

OpenJDKのインストーラー2

以下の画面が表示されるので「続ける」を選択します。

OpenJDKのインストーラー3

以下の画面が表示されるので「同意する」を選択します。

OpenJDKのインストーラー4

以下の画面が表示されるので「インストール」を選択します。

OpenJDKのインストーラー5

以下の画面が表示されればインストール完了になります。

OpenJDKのインストーラー6

.Net MAUIの開発環境を整備

Visual Studio Codeに.Net MAUIの開発環境を整備していきます。

手順1:Visual Studio Codeに拡張機能「.Net MAUI」をインストール

以下の画像のように、Visual Studio Codeに拡張機能から「.Net MAUI」をインストールします。

Visual Studio Codeに拡張機能「.Net MAUI」をインストール

インストールが完了すると以下の画像のように5つの拡張機能がインストールされます。

Visual Studio Codeに拡張機能「.Net MAUI」をインストール完了後

手順2:.Net SDKのインストーラーをダウンロード

最新版の.Net SDK(.Net 8:2023/12/03 時点)をダウンロードしていきます。

最新版の.Netのインストーラーは、Microsoftの公式サイトからダウンロードします。以下のリンクから画面を表示することができます。

以下の画面が表示されますので、環境に合わせてインストーラーをダウンロードしてください。以下の画像では「Arm64」を選択しています。

※「Arm64」「x64」が分からない方はこちら

 .Net 8.0 SDKのインストーラーのダウウンロードサイト

以下の画面に移動されインストールが開始されます。

 .Net 8.0 SDKのインストーラーのダウウンロードが開始されるサイト

手順3:.Net SDKをインストール

ダウンロードから先ほどダウンロードしたインストーラー(dotnet-sdk-8.0.100-osx-arm64.pkg:2023/12/03 時点)を選択します。

 .Net 8.0 SDKのインストーラーを起動

以下の画面が表示されるので「続ける」を選択します。

 .Net 8.0 SDKのインストーラー1

以下の画面が表示されるので「インストール」を選択します。

 .Net 8.0 SDKのインストーラー2

以下の画面が表示されればインストール完了になります。

 .Net 8.0 SDKのインストーラー3

手順4:.Net MAUIの開発環境をインストール

※この手順を行う前に、XCode と xcode-select のインストールは必ず先に行ってください。

ターミナルから以下のコマンドを実行します。インストールには長時間かかりますので完了するまでお待ちください。

sudo dotnet workload install maui

ここまで作業することで完了になります。お疲れ様でした。

新規プロジェクトを作成!!

新規プロジェクトを作成していきます。

手順1:「.Net プロジェクトを作成」を選択

以下の画像のように「.Net プロジェクトを作成」を選択します。

「.Net プロジェクトを作成」を選択

手順2:フォルダを選択

プロジェクトを配置するフォルダを選択します。以下の画像では「書斎/maui/SampleApp」を選択しています。

プロジェクトのフォルダ場所を選択

手順3:プロジェクト名を入力

プロジェクト名を入力します。以下の画像では「SampleApp」としています。選択したフォルダ名と合わせることをお勧めします。

プロジェクトの名前を入力

以下の画像のようになればプロジェクトの作成が完了します。

プロジェクト完成

アプリを実行!!

アプリを実行します。ここでは先ほど作成したプロジェクトを利用していきます。

手順1:「実行とデバッグ」を開く

以下の画像のように左のメニューから「実行とデバッグ」を選択します。

「実行とデバッグ」を開く

手順2:「実行とデバッグ」を選択

以下の画像のように左のメニューから「実行とデバッグ」を選択します。

「実行とデバッグ」を選択

手順3:.Net MAUIでデバッグ

.Net MAUIでデバッグするために以下の画像のように「.Net MAUI」を選択します。

.Net MAUIでデバッグ

初めてデバッグするプロジェクトでは、以下の画面が表示されることがあります。その場合は「このまま開く」を選択してください。

.Net MAUIで初めてデバッグする際の画面

以下のように実行されればデバッグ完了です。

.Net MAUIのデバッグで起動されたアプリ

おわりに

macOSの.Net MAUIの開発環境は、Visual Studio for Macが2024年8月31日にサポート終了のため、Visual Studio Codeを利用していくことになりそうです。今後はこちらの環境を利用して様々な記事を紹介していきたいと思います。