右往左往しながら何とかMAUIを起動できてワクワクした話！

# はじめに
今までMVCやWebAPIを中心に触ってきたのですが、初めてMAUIを触ってみました。
今回は以下の公式ドキュメントに沿ってMAUIの「Hello World」を立ち上げる作業を行っただけではありますが、私の力不足も多数あり、スムーズにいかなかったのでそれまでの作業記録を残しておきたいと思います。

https://docs.microsoft.com/ja-jp/dotnet/maui/get-started/installation

https://docs.microsoft.com/ja-jp/dotnet/maui/get-started/first-app

## Visual Studio 2022 プレビューのインストール
まずは`Visual Studio 2022 プレビュー`をインストールします。

https://visualstudio.microsoft.com/ja/vs/preview/

ワークロードは`デスクトップとモバイル` > `.NETによるモバイル開発`にチェックを入れてインストールします。
![maui1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/59a1d3b1-4da3-d726-ae3e-0d208e81ef2e.png)

## はじめてのMAUIの起動
`Visual Studio 2022 プレビュー`を起動し、プロジェクトテンプレートは`.NET MAUI App(Preview)`を選択します。
![maui2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/0b0ca07a-a202-c9a5-ed88-01a87540ad58.png)

プロジェクトが作成された後に`Android Sdk License`が表示されるので`同意`をクリックします。
![maui3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/ac169f9b-7650-29b3-9fcc-b75ea806a492.png)

※「このアプリがデバイスに変更を加えることを許可しますか？」というポップアップが出てきますがそちらは「はい」を押します。

`Android Emulator`ボタン（以下の赤枠部分）をクリックします。
![maui8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/c48e9e54-a72a-2bd5-6a66-8043f10eb1d8.png)

`既定のAndroidデバイスを作成する`画面が表示されるので、こちらも一旦公式ドキュメントに従って`Create`を選択します。
![maui5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/138ecccc-8616-8812-e9b4-50ffbb723675.png)

ライセンスの同意を求められるので`同意する`を選択します。
![maui6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/f7fb5bdc-1886-aaff-f4f5-7a3987ed9341.png)

エミュレータのダウンロードが始まるので2～3分ほど待ちます。
![maui10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/c98479aa-21df-dc26-7a50-d0874fcb35ac.png)

## ここまでは順調だったのだけど...
上記までは順調だったのですが、ここからが結構大変でした(;´∀｀)
公式ドキュメントではこの後`Androidデバイスマネージャー`画面を「×」で閉じた後にデバッグ実行の箇所が「Pixel - API 30(Android 11.0～)」という表示に変わっていたのですが、僕のVisual Studioでは変わらず`Android Emulator`のまま...。
公式ドキュメントではそのままそのボタンを押して正常にMAUIアプリが起動しています。
![maui26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/478463ca-0da7-b994-0dca-17a424a2939f.png)


**どこかで間違えた...？？**

とりあえず、もう一度`Android Emulator`ボタンを押してみます。
やはり以下のように`Androidデバイスマネージャー`画面が出るので、赤枠部分をクリックしてエミュレーターを起動させてみます。
![maui7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/088ba101-11e9-9993-9346-7b1426241ec5.png)

んー。真っ黒だなぁ...。ここから立ち上がるのかな？と思ったりもしたのですが、何も変わらず...。

![maui24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/0400568a-af9d-5512-825c-20b34729fe42.png)

ん？これは何か起動のボタンに見えるぞ？と以下の赤枠のボタンをクリックしてみたら...

**起動しました！**
![maui9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/ef573d0e-8bc9-8f7b-74d4-9e9491d5bcc7.png)

とはいえ、これはあくまでエミュレータを起動させただけで.NET MAUIのアプリがデプロイされているわけではないのでちょっと違う...

### 仕方なく一度Visual Studio 2022 プレビューを閉じて再起動してみる

ちょっと分からなくなってしまったので、一度Visual Studio 2022 プレビューを閉じてもう一度新しくプロジェクトを作ってみました（上記の`はじめてのMAUI起動手順と同様`）。

すると...あれ？？？公式ドキュメント通りの表記になってる？！
これで正常に起動ができるのかな？と赤枠部分をクリックします。

![maui25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/0f5936b4-fdec-fab8-d340-ccde72e2dbee.png)

.........

.........

うーん、なんででしょうか...しばらく待ってみるとデプロイされるのかな？
と思いましたが特に変わらず...

![maui12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/2515e482-2f72-748b-c894-6f852c03b164.png)


ししし仕方ない！もう一度Visual Studioを閉じて新しくプロジェクトを作るのだ！！
Android Emulatorもちゃんと新しく`Create`して...
![maui10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/aa6f778c-87ca-44bc-6faf-e7d6cfbe1e57.png)

デバッグ実行のボタンもちゃんと公式ドキュメント通りになってる！！
![maui25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/97dc8504-0e5b-9e61-6c1a-72127aabb540.png)

ボタンを押すと...
![maui17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/5bee9170-f133-035d-6044-205852d6dd13.png)

.........

.........

ななななんでだ～～( ；∀；)

## 棚からぼた餅？？
仕方なく上記の状態のまま、Googleで色々と検索していたのですが、特にそれっぽい原因も見つけられずいたのですが、気づいたら画面が以下のように変わっていました（笑）
![maui18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/420810b4-971d-cc54-34ec-9c3222a1420c.png)

あ...もしかしてエミュレータが起動して、そこへのMAUIアプリのデプロイに時間がかかるとかだったんですかね？(;^_^A
偶然デバッグを止めずにGoogleで検索したりしていたので、まさに棚からぼた餅的な感じでした（笑）

## とりあえず起動できた！
`Click me`をクリックすると、正常にカウントアップされていくのが分かります。
![maui19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/1bfc80b3-07ff-997f-0157-1e926e98835c.png)

# おわりに
ということで、慣れている方でしたらすぐに出来る内容かとは思いますが、僕はかなり手間取っちゃいました(;´∀｀)
スマホアプリなどは作ったことがなく、デバッグ実行してみたらスマホの画面が出てきたこと自体が新鮮でワクワクしますね！
これを機にMAUIを通してスマホアプリ等の勉強もしていきたいと思います。

# おまけ
.NET 6では`ホットリロード`もあるとのことでついでに試してみました。
以下のようにXamlのテキストの一部を変更してみるとすぐに反映されることが分かります（画像だと分かりにくいですが...）。
![maui21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538249/a76ab9c7-bda9-cc04-eb37-c1c922552a94.png)

この機能もたくさん使うことになりそうなので、今後の開発がとても楽しみです！