Flutterの開発にてVScodeからiOSシュミレータと Androidエミュレータを使用する方法

# はじめに

- Android studioだと使いにくい（めんどくさい）特にGithub
- VSCodeでコードを書いて、シュミレータ、エミュレータでテストしたい
- Github Copilotを使いたい
- VSCodeはいいぞ

これらの要因でVSCodeでFlutterの開発を行なったほうがいいかなーって感じたので、色々調べた時のメモ的な感じです。

# 環境

- Macbook Air M2
- Flutter、Xcode、 Android studio、VSCodeは環境構築済み

環境構築したい方は私が別の記事でやってるのでそちらからどうぞ

https://qiita.com/Kento210/items/848533e12db3a12ddb87

# iosシュミレータを使いたい場合

<aside>
💡 VSCodeのFlutter拡張機能は必須です。絶対入れておきましょう

![スクリーンショット 2023-09-09 23.15.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/20737d6a-a92f-1ef2-012d-1fd3c8d2d742.png)


</aside>

`flutter: New Project`とコマンドパレットに入れて新しいflutterプロジェクトを立ち上げます

![スクリーンショット 2023-09-09 23.18.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/2cc193a7-c34b-3806-9ac0-43bed449e1ba.png)


ここでは割愛しますが、この次に作りたいもの（Applicationなど）、保存先のフォルダ、プロジェクト名を入れて立ち上げます。（GUI通りに操作すればおk）

iOS Simulatorを立ち上げます

```jsx
> open -a Simulator
```

一度立ち上げたら、Dockなどに残しておくと便利です。いつでも使えるので

![スクリーンショット 2023-09-09 23.24.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/dede7247-2d8a-676f-ab47-453fd0ba99f3.png)


立ち上がったのを確認したら、再度コマンドパレットから`flutter: Select Device`と入れます

![スクリーンショット 2023-09-09 23.26.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/3aa3ee7e-198c-3fb5-cd07-061e7a834eee.png)


先ほど起動した端末（iPhone 14 Pro Max）があるので選択します。

VSCodeの右下に端末が表示されていればOKです。

![スクリーンショット 2023-09-09 23.28.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/5a7a829d-e29b-63c9-a2eb-e4c9bd16352c.png)


あとはVSCodeのタブより実行とデバックを押すだけで起動します。

![スクリーンショット 2023-09-09 23.33.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/17e15284-91ae-6f89-770f-089e071ee68f.png)


![スクリーンショット 2023-09-09 23.32.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/c1dead53-c865-9208-f744-df1d1e8163b4.png)


# Androidエミュレータを使いたい場合

エミュレータを使う場合、デバイスが必要になります。

デバイスを作っていない場合以下の`Virtual Device Manager`より、

![スクリーンショット 2023-09-09 23.38.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/8dd4ea82-61b8-bb23-9913-a7495732588d.png)


`Create Device`を選択

![スクリーンショット 2023-09-09 23.38.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/1cf1534b-9174-594b-4598-2eb5c8802e8b.png)


作りたいハードウェアを選択して、

![スクリーンショット 2023-09-09 23.39.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/9719996d-e14a-e702-66e7-c66a5d07cac0.png)


イメージを入れて、名前を入力します。（ここでは省略）

![スクリーンショット 2023-09-09 23.39.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/337521d7-92bf-99c4-b780-fd33af0491e8.png)


上手くいくと先ほどの下に追加したデバイスが追加されます。

（私のには追加していないので無い）

![スクリーンショット 2023-09-09 23.43.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/9baee163-0ddd-3874-1214-7a89556310c2.png)


エミュレータの起動はとても簡単

先ほどと同じで`flutter: Select device`から作った Androidエミュレータを選択するだけ

![スクリーンショット 2023-09-09 23.45.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/6b8c751f-4e25-50b2-0049-24ef0ec3929f.png)


実行も先ほどと同じです。

ちなみに実行とデバックをF5に割り当てておけばF5押すだけで起動できるーなんてこともできます。

![スクリーンショット 2023-09-09 23.51.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3504047/1421a265-7e64-1578-3dab-91713d270b56.png)


# 参考

https://massu-engineer.com/flutter-vscode-emulator/

https://dev.classmethod.jp/articles/vscode-xcode-flutter/