【初心者にやさしい】Flutter3での環境構築の手順書(WindowsとMac両方)

# 本記事の目的
　初めてFlutterを学習するあたっての環境構築が結構大変だったので、その手順の復習と、これからFlutterを学習していきたいという方への共有に。環境構築ができた方も、途中でこんなエラーがあったよというのがあればぜひ共有いただきたいです！

# 環境構築の大まかな手順
　① PCの準備
　② Flutter SDKのインストール
　③ Adroidアプリ用の環境構築
　④ iOSアプリ用の環境構築
　⑤ エディター準備

# いざ環境構築へ
　念のため、Windows PCとMac両方で環境構築を行ってみたので、双方の環境構築方法について紹介します。

## Windows PCでの環境構築

::: note warn 　
前提条件として以下の2点に気を付けてください。
 - __Windows7以降であること__ 
 - __PCの空き容量が1.7GB程度あること__ 
:::

### ① FlutterSDKのインストール

- まず、Flutterの公式サイトの「 __get started__　」から進みます。
![flutter toppage.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/df85116e-1cd8-1626-d1fe-bfce179c8207.jpeg)

- 今回はWindows PCでの環境構築なので、「 __Windows__ 」というところをクリックして進みます。
![flutter initial install page.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/a7c305c5-bd8a-3902-4a04-bb95fcd9eda1.png)

- FlutterSDKのzipファイルをインストールします。
![flutter sdk install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/18ad36e5-0c8a-c02d-4608-461bd325fbf0.png)

::: note warn
この時、zipファイルを展開して中身を置くフォルダの位置に注意しましょう。推奨されるのは、「 __C:\src\flutter__ 」などのCフォルダ直下の位置です。「 __C:\Program Files__ 」のような特別なアクセス権が必要となるフォルダには置かないようにしましょう。
:::

- 次に「 __PATHを通す__ 」作業を行います。「PATHを通す」とは、 __指定のコマンドを使用したい場合に、どの場所からでもそのコマンドを使用できるようにするために、場所(PATH　）を明確にしておくこと__ です。今回の場合で言えば、「 __flutterコマンド__ 」を使用できるようにしたいので、インストールした「FlutterSDK」がある場所を明記していきます。
![MicrosoftTeams-image (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/bf94d0a2-637a-912d-5e99-d369aa5c8a1e.png)
スタートメニューから「env」と検索すると、写真のようなコントロールパネルが出てくるので、これを開きましょう。
![MicrosoftTeams-image (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/e5c12d74-411b-f142-fa00-f74af28a9f19.png)
すると、上の写真のような画面が出てくるので、「 __環境変数 __」というところから進み、PATHとして、FlutterSDKがある場所のパスを記載しましょう。「 __C:\src\flutter__ 」下に置いているのであれば、「 __C:\src\flutter\flutter\bin__ 」のようなパスになるはずです。必ず「 __bin__」まで記載しましょう。

- これで「flutterコマンド」を使用できるようになったので、WindowsであればコマンドプロンプトもしくはPowerShellから、以下のコマンドを打ってみましょう。

```
$ flutter doctor
```

これは、flutterを使用したアプリケーション開発に必要なツールの準備状況を表示してくれるコマンドになります。このコマンドを入力すると、例えば以下のような表示が出ます。

```
[-] Android toolchain - develop for Android devices
    • Android SDK at D:\Android\sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://docs.flutter.dev/setup/#android-setup for detailed instructions.
```
最終的には、全てのツールに「✔️」マークがつき、準備万端の状態にすることを目指します。次からはそれらのツールのインストール方法について解説します。

### ② Androidアプリの開発環境構築
　このステップでは、FlutterでAndroidアプリを実装するために必要なツールのインストール方法などをご紹介します。

-　まず、「 __AndroidStudio__ 」をインストールします。
![androidstudio install.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/a4ffc260-08bf-65bc-b79e-e5b868d68749.png)

- インストールが完了したら、zipファイルを展開し、AndroidStudioを起動します。そして、「Android Studio Setup Wizard」から各種設定を完了させます。まずは、「 __Flutterプラグイン__ 」をインストールします。
![welcome to androidstudio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/0a276365-1791-a326-91cf-2a64bde2e9c1.png)
![dart flutter plugin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/ab27506b-5acb-3864-9ed5-aa4a00c46157.png)
検索して、インストールを完了させましょう。

- これで、「 __New Flutter Project__ 」という項目が出るようになったと思うので、新規プロジェクトを作成しましょう。
![android sdk manager.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/aa9d2582-6694-cbd9-3880-9f6ceab44e68.jpeg)
「 __SDK Manager__ 」から「 __SDK Tools__ 」を選択し、必要なツールを適用させます。
![android sdk tools.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/59603d9b-f91e-4947-14a5-34881c2d15c2.png)
少なくとも、上の写真の3つは選択して、「 __Apply__ 」し、「 __OK__ 」と進みましょう。

- 最後に「 __Android Emulator__ 」の準備をして、Androidアプリ実装のための環境構築は完了です！右上の「 __Device Manager__ 」から「 __Create Device__ 」へと進み、エミュレーターを作成します。
![android emulator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/e9950462-35ba-1fe9-296b-2144879d5b0e.png)

::: note warn
基本的に好きなデバイスを選んで作成していけば問題ありませんが、「Emulated Performance」の「Draphics」だけ必ず「 __Hardware__ 」に設定しておきましょう。エミュレーター上で画面描画するときの速度が最も早くなります。デフォルトでは「 __Automatic__ 」になっているのですが、描画時に画面が落ちる事象が何度かありました。
:::
- 作成が完了すると、右側に作成済みのエミュレーターが表示されるので、「▶︎」を押して、エミュレーターを立ち上げてみましょう。以下の写真のように立ち上がれば問題ありません。
![androidemulator 見た目.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/83713a10-71bb-f76c-a37e-178074e563ab.jpeg)
これで、WindowsでAndroidアプリを開発するための環境の基礎が整いました！
::: note
ちなみにエミュレーターだけでなくWindowsデスクトップでもアプリをシミュレートしながら開発したい場合は、「 __Visual Studio__ 」が必要となります。
必要な場合は、こちらも一緒に準備しましょう。 
:::

![additional setup.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/8bc5b629-a47d-0dc9-0e48-e0e7bc29ae90.png)

## Macでの環境構築

::: note warn 　
前提条件として以下の2点に気を付けてください。
 - __Mac OSであること__ 
 - __PCの空き容量が2.8GB程度あること__ 
:::

### ① FlutterSDKのインストール
- Windowsの時と同じように、まずは「get started」→「install」から「 __macOS__ 」を選択します。 すると、以下のように、FlutterSDKをインストールする画面が出てきますので、ご自身のMacの状態に応じて、適切な方のFlutterSDKを選んでインストールします。
![Mac flutter sdk.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/9827682c-aa6c-d2ef-25c1-5a8e0023be2e.png)
特にこだわりがない限り、ここに説明されている手順通りに進めば問題ありません。

- ターミナルから「flutter doctor」を実行して、必要なツールの状況を確認しましょう。
```
$ flutter doctor
```
```
[-] Android toolchain - develop for Android devices
    • Android SDK at D:\Android\sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://docs.flutter.dev/setup/#android-setup for detailed instructions.
```
- PATHを通します。公式の手順に沿って行えば問題ありません。お使いのMacのSHELLの種類だけしっかりと確認して作業を完了させましょう。
![Mac PATHを通す.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/43cf1fe1-e307-52a9-3659-250eba3e2820.png)
### ② iOSアプリの開発環境構築
- 次に、iOSアプリを開発していくために必要な「 __Xcode__ 」をインストールしていきます。
![install Xcode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/0307307f-0942-998b-c3c6-048f0c1e29bd.png)

::: note warn
私の場合、このXcodeのインストールで30分ほどかかりました。他にも時間がかかったとおっしゃっていた方も多いので、把握しておいてください。
:::

- iOSシミュレーターが立ち上がることを確認します。コマンドで立ち上げてもいいですし、GUI操作で立ち上げても構いません。どちらにせよ、以下のようにシミュレーターが立ち上がることを確認できれば大丈夫です。
![iOS simulator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/8035d721-9464-68aa-5341-3755bc311331.png)
![iOSシミュレーター見た目.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/2a7beac3-9aa2-888a-a7e1-35154e4c3bd3.jpeg)

- これで、基本的なMacでのiOSアプリ開発のための環境の基礎は整いました！

## エディターの準備
　次にエディターを準備します。基本的に __AndroidStudio__ もしくは __VS Code__ でのコーディングになるかと思いますが、AndroidStudioについては前述したので、ここではVS Codeの準備方法について解説していきます。

- まず、VS Codeのインストールページへ遷移します。
![editor page.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/df168bf9-b27c-1657-2ef7-923836b34bb2.png)

- VS Codeをインストールします。ご使用のOSを指定してインストールしてください。
![vs code install page.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/8913a5bf-a264-5fd7-0aaf-f4c3c2044e0c.png)

- インストールが完了したら、VS Codeを起動させ、必要な「 __プラグイン__ 」の導入を行います。「 __プラグイン__ 」とは、VS Codeでデフォルトの機能を拡張して様々なことができるようにするために追加するツールのことを指します。今回は、Flutterを使用した開発を効果的に行うために、「 __Flutter__ 」というプラグインを導入します。
![vscode plugin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/c7f14883-2841-4830-2fc9-bdff35839c7a.png)
検索窓で「Flutter」と検索して、インストールしましょう。この時、同時に「 __Dart__ 」というプラグインもインストールされることを確認しておきましょう。

- これで、VS CodeでFlutterのアプリ開発を始めるための準備が整いました！最後にターミナルから以下のコマンドを入力し、準備が整っているかどうか最終確認しましょう。

```
$ flutter doctor
```
　以下のようになっていれば、問題ありません。
![flutter doctor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2375287/e6af04e1-90ca-f9ad-0fab-5dbdfba4e391.png)

::: note
もしここで、「Xcode」のところに、「CocoaPods not installed.」と出ていても、現時点では問題ありません。しかし、後々様々なライブラリを導入する時に、これがないと機能しなくなってしまうようなので、今の時点で入れておいて良いと思います。CocoaPodsの導入方法は以下の記事が参考になりますよ！

[【iOS開発】 CocoaPodsが何なのか〜導入までまとめ](https://pursue.fun/tech/how-to-cocoapods/)

[Flutter大学 環境構築④【番外編】CocoaPods入れちゃってもいいよ](https://zenn.dev/kboy/books/ca6a9c93fd23f3/viewer/5232dc#ios-%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97) 
:::

## まとめ
　これで環境構築の方法解説は終わりです。私もやってみたのですが、結構大変だと感じました。しかし、Flutterは公式ドキュメントが丁寧なので、一つ一つステップを踏んで実行していけば、しっかりと環境構築はできると思います。この記事も一つの参考になったならば光栄です。
　また、環境構築をしていく中で、「__こんなエラーあったよ__ 」などあれば共有していただけるとありがたいです！！

## 参考
- [Flutter公式](https://flutter.dev/)
- [【iOS開発】 CocoaPodsが何なのか〜導入までまとめ](https://pursue.fun/tech/how-to-cocoapods/)
- [Flutter大学 環境構築④【番外編】CocoaPods入れちゃってもいいよ](https://zenn.dev/kboy/books/ca6a9c93fd23f3/viewer/5232dc#ios-%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97)