【2023年最新版】Flutter3.3.10をMacに環境構築する手順の振り返り

## 記事の概要
・ Flutterの環境構築をする方法を、備忘録も兼ねてまとめてみました。

## 実行環境
* 実行日：2023年1月14日

|カテゴリ|バージョン情報|
|:--:|:--|
|【Flutter】|flutter_macos_arm64_3.3.10-stable|
|【Mac OS】| MacBook Air(M1, 2020) , macOS Monterey(v12.3.1)|


## 手順のまとめ（結論）
1. 任意のディレクトリにフォルダを作る （自分の場合は~/Desktop/Flutter）
2. Flutterフォルダ内に、Flutter公式ページから落としてきた.zipファイルを解凍
3. 自分の端末のShellを調べる（自分の場合は.zshrc）
4. .zshrcに環境変数$PATHを通す
5. **sourceコマンドを打つ** ←超重要
6. パスの確認（通っていなければ4. に戻る）
7. which flutterコマンドでflutterの確認
8. flutter doctorで足りないものの確認。不要ならインストール（自分はAndroid Studioがない）
9. 環境構築終了🎉

## 手順
### 1. 任意のディレクトリにフォルダを作る
* ~/DesktopにFlutterのためのフォルダを作りたいと思います。
* デスクトップを開いて、⌘+左クリックで、「新規フォルダの作成」を選択。
* Flutterという名前にして保存。
![スクリーンショット 2023-01-14 11.47.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087199/f6296cbb-a46e-39a4-4bf0-48d7ec03bede.png)

### 2. Flutterフォルダ内に、Flutter公式ページから落としてきた.zipファイルを解凍
https://docs.flutter.dev/get-started/install/macos#update-your-path

* 上記サイトにアクセスし、Intelのflutter_macos_arm64_3.3.10-stable.zipをダウンロード。
![スクリーンショット 2023-01-14 11.50.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087199/34ca3ebc-38e6-3361-f308-3e33089daad9.png)

🚨 Aplle Silicon搭載の端末は、Apple Silicon対応ver.をダウンロードしないと、動作不良を起こす可能性があります。🚨

* ダウンロード終了後、.zipファイルを右クリックで解凍。
* コマンドから解凍することもできます。

```ターミナル
 $ unzip ~/Desktop/Flutter/flutter_macos_arm64_3.3.10-stable.zip
```

## 3. 自分の端末のShellを調べる
* ターミナルで以下のコマンドを叩きます。
```ターミナル
$ echo $SHELL
```

* 自分の場合は`/bin/zsh`が帰ってきたので、.zshrcです。
```ターミナル
$ echo $SHELL
/bin/zsh
```

* 中には、`/bin/bash`が帰ってくる方もいらっしゃると思います。
```ターミナル
$ echo $SHELL
/bin/bash
```

## 4. .zshrcに環境変数$PATHを通す
### 4-1-1. 現在使用しているシェルが.zshの方
* $HOMEに格納されている.zshrcを編集してあげます。
```ターミナル
$ vi $HOME/.zshrc
```
* なお、`echo $HOME`を叩いてあげることで、$HOMEのディレクトリパスを表示させることができます。

### 4-1-2. 現在使用しているシェルが.bashの方
* $HOMEに格納されている.bash_profile, .bashrcを編集してあげます。（いずれか片方で問題ありません。）
```ターミナル
＃　いずれか片方でOK
$ vi $HOME/.bash_profile
$ vi $HOME/.bashrc
```
* なお、`echo $HOME`を叩いてあげることで、$HOMEのディレクトリパスを表示させることができます。

### 4-2. PATHの記述
* viが立ち上がるので、[i]キーを押してINSERTモードにしてあげます。
* そこに、以下のPATHを貼り付けておきましょう。

```ターミナル
$ export PATH="$PATH:[PATH_OF_FLUTTER_GIT_DIRECTORY]/bin"
```
なお、私の場合はFlutterフォルダを `~/Desktop/Flutter`に作成いたしましたので、以下のようになります。

```ターミナル
$ export PATH="$PATH:/Users/[PCのユーザー名]/Desktop/Flutter/flutter/bin"
```

* /Users/[PCのユーザー名]は、$HOMEに置き換えてもおそらく問題ないと思います。
* きちんと貼り付けることができたら、[esc]キーを押下後、`:wq`と入力します。そうすることで、.bashrcないし.zshrcを保存できます。

## 5. **sourceコマンドを打つ**
* なぜか、他のサイトであまり書いている人がいないのですが、`source`コマンドを打つことが非常に大事です。
* 下記のコマンドを実行することで、シェルの設定を反映させることができます。
* bashの方は、編集したファイル名を`.zshrc`と置き換えて実行してください。
```ターミナル
$ source $HOME/.zshrc
```

## 6. パスの確認
* ここまでできたら、下記コマンドを入力して、ちゃんと`$PATH`が通っているか確認しましょう。
```ターミナル
$ echo $PATH
```
* 先ほど設定したPATHがきちんと出力できていれば、PATHは通っています。
* うまいこといかないなーって方は、4.の工程に戻って、PATHを書いたファイルがちゃんと保存されているか確認しましょう。

## 7. which flutterコマンドでflutterの確認
* 下記コマンド入力で、`flutter`の位置を確認できます。
```ターミナル
$ which flutter
/Users/[PCのユーザー名]/Desktop/Flutter/flutter/bin/flutter
```

## 8.flutter doctorで足りないものの確認
* ここまで出来たらあと一息です。 `flutter doctor`コマンドを叩いて、必要なものを確認しましょう。
```ターミナル
$ which flutter
/Users/[PCのユーザー名]/Desktop/Flutter/flutter/bin/flutter
```
![スクリーンショット 2023-01-14 12.17.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087199/41609d93-1046-a6ce-e7b6-b5df70e5de0c.png)

* <font color="Green">[✔︎]</font>と書かれているのであれば、その項目の準備は整っているという意味です。
* 一方で、<font color="Red">[x]</font>と書かれているのであれば、その項目は追加でインストールが必要です。
* 自分の場合はAndroid Studioのインストールが必要でした。

## 終わりに
* 以上、Flutterの環境構築の手順をまとめてみました。
* もしお役に立てたのであれば、いいね！❤️していただけると嬉しいです。
* 今回初めてQiitaへ記事を投稿してみたのですが、もし至らない点などございましたら、お気軽にコメントなどでご指導いただけると幸いです。よろしくお願いいたします。

## 参考サイト
* https://docs.flutter.dev/get-started/install/macos
* https://docs.flutter.dev/get-started/install/macos#update-your-path