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」か確認](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-13-jpg.webp)
Visual Studio Codeのインストールと日本語化
Visual Studio Codeのインストールと日本語化の手順は以下で紹介しています。
iOSの開発環境の整備
Visual Studio Codeに.Net MAUIのiOSの開発環境を整備していきます。
手順1:XCodeのインストール
XCodeのインストールはAppストアから行っていきます。以下の画像のように検索欄に「XCode」を入力してインストールしてください。
![AppストアからXCodeをインストール](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-15-1024x670.webp)
手順2:「xcode-select –install」のコマンドを実行
ターミナルから以下のコマンドを実行します。
xcode-select --install
コマンドを実行すると以下の画面が表示されます。「インストール」を選択してください。
![xcode-selectのインストール](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-16-jpg.webp)
以下のような画面が表示された場合、「同意する」を選択してください。
![xcode-selectの使用許諾契約](https://pg-himajin.com/wp-content/uploads/2024/02/page2080-48-jpg.webp)
しばらくすると以下の画面に切り替わりインストールが完了します。
![xcode-selectのインストール完了](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-17-jpg.webp)
Androidの開発環境の整備
Visual Studio Codeに.Net MAUIのAndroidの開発環境を整備していきます。
手順1:Android Studioのインストール
最新版のインストーラーは以下のリンクから取得できます。
インストール方法は以下のリンクから確認してください。
手順2:OpenJDKのインストーラーをダウンロード
MicrosoftからOpenJDKをダウンロードします。以下のリンクからダウンロードする画面に移動できます。
以下のような画面が表示されますので、対応しているOpenJDK(OpenJDK 17:2024/02/12 時点)を選択してください。
![](https://pg-himajin.com/wp-content/uploads/2024/02/page2080-33-1-jpg.webp)
手順3:OpenJDKをインストール
ダウンロードから先ほどダウンロードしたインストーラー(microsoft-jdk-17.0.10-macos-aarch64.pkg:2024/02/12 時点)を選択します。
![OpenJDKのインストーラー1](https://pg-himajin.com/wp-content/uploads/2024/02/page2080-40-jpg.webp)
以下の画面が表示されるので「続ける」を選択します。
![OpenJDKのインストーラー2](https://pg-himajin.com/wp-content/uploads/2024/02/page2080-43-jpg.webp)
以下の画面が表示されるので「続ける」を選択します。
![OpenJDKのインストーラー3](https://pg-himajin.com/wp-content/uploads/2024/02/page2080-44-jpg.webp)
以下の画面が表示されるので「同意する」を選択します。
![OpenJDKのインストーラー4](https://pg-himajin.com/wp-content/uploads/2024/02/page2080-45-jpg.webp)
以下の画面が表示されるので「インストール」を選択します。
![OpenJDKのインストーラー5](https://pg-himajin.com/wp-content/uploads/2024/02/page2080-46-jpg.webp)
以下の画面が表示されればインストール完了になります。
![OpenJDKのインストーラー6](https://pg-himajin.com/wp-content/uploads/2024/02/page2080-38-jpg.webp)
.Net MAUIの開発環境を整備
Visual Studio Codeに.Net MAUIの開発環境を整備していきます。
手順1:Visual Studio Codeに拡張機能「.Net MAUI」をインストール
以下の画像のように、Visual Studio Codeに拡張機能から「.Net MAUI」をインストールします。
![Visual Studio Codeに拡張機能「.Net MAUI」をインストール](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-10-1-1024x709.webp)
インストールが完了すると以下の画像のように5つの拡張機能がインストールされます。
![Visual Studio Codeに拡張機能「.Net MAUI」をインストール完了後](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-31-jpg.webp)
手順2:.Net SDKのインストーラーをダウンロード
最新版の.Net SDK(.Net 8:2023/12/03 時点)をダウンロードしていきます。
最新版の.Netのインストーラーは、Microsoftの公式サイトからダウンロードします。以下のリンクから画面を表示することができます。
以下の画面が表示されますので、環境に合わせてインストーラーをダウンロードしてください。以下の画像では「Arm64」を選択しています。
※「Arm64」「x64」が分からない方はこちら
![.Net 8.0 SDKのインストーラーのダウウンロードサイト](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-12-1024x764.webp)
以下の画面に移動されインストールが開始されます。
![.Net 8.0 SDKのインストーラーのダウウンロードが開始されるサイト](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-14-1024x768.webp)
手順3:.Net SDKをインストール
ダウンロードから先ほどダウンロードしたインストーラー(dotnet-sdk-8.0.100-osx-arm64.pkg:2023/12/03 時点)を選択します。
![.Net 8.0 SDKのインストーラーを起動](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-18-jpg.webp)
以下の画面が表示されるので「続ける」を選択します。
![.Net 8.0 SDKのインストーラー1](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-19-jpg.webp)
以下の画面が表示されるので「インストール」を選択します。
![.Net 8.0 SDKのインストーラー2](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-20-jpg.webp)
以下の画面が表示されればインストール完了になります。
![.Net 8.0 SDKのインストーラー3](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-21-jpg.webp)
手順4:.Net MAUIの開発環境をインストール
※この手順を行う前に、XCode と xcode-select のインストールは必ず先に行ってください。
ターミナルから以下のコマンドを実行します。インストールには長時間かかりますので完了するまでお待ちください。
sudo dotnet workload install maui
ここまで作業することで完了になります。お疲れ様でした。
新規プロジェクトを作成!!
新規プロジェクトを作成していきます。
手順1:「.Net プロジェクトを作成」を選択
以下の画像のように「.Net プロジェクトを作成」を選択します。
![「.Net プロジェクトを作成」を選択](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-22-1024x784.webp)
手順2:フォルダを選択
プロジェクトを配置するフォルダを選択します。以下の画像では「書斎/maui/SampleApp」を選択しています。
![プロジェクトのフォルダ場所を選択](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-23-1024x575.webp)
手順3:プロジェクト名を入力
プロジェクト名を入力します。以下の画像では「SampleApp」としています。選択したフォルダ名と合わせることをお勧めします。
![プロジェクトの名前を入力](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-24-1024x256.webp)
以下の画像のようになればプロジェクトの作成が完了します。
![プロジェクト完成](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-25-1024x782.webp)
アプリを実行!!
アプリを実行します。ここでは先ほど作成したプロジェクトを利用していきます。
手順1:「実行とデバッグ」を開く
以下の画像のように左のメニューから「実行とデバッグ」を選択します。
![「実行とデバッグ」を開く](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-26-jpg.webp)
手順2:「実行とデバッグ」を選択
以下の画像のように左のメニューから「実行とデバッグ」を選択します。
![「実行とデバッグ」を選択](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-27-jpg.webp)
手順3:.Net MAUIでデバッグ
.Net MAUIでデバッグするために以下の画像のように「.Net MAUI」を選択します。
![.Net MAUIでデバッグ](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-28-1-1024x229.webp)
初めてデバッグするプロジェクトでは、以下の画面が表示されることがあります。その場合は「このまま開く」を選択してください。
![.Net MAUIで初めてデバッグする際の画面](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-29-1024x786.webp)
以下のように実行されればデバッグ完了です。
![.Net MAUIのデバッグで起動されたアプリ](https://pg-himajin.com/wp-content/uploads/2023/12/page2080-30-1024x771.webp)
おわりに
macOSの.Net MAUIの開発環境は、Visual Studio for Macが2024年8月31日にサポート終了のため、Visual Studio Codeを利用していくことになりそうです。今後はこちらの環境を利用して様々な記事を紹介していきたいと思います。