Flutter環境構築手順（mac編）

# はじめに
Flutterを使用するプロジェクトに参画した際に学んだことを備忘録として残しておこうと思います。
まずは環境構築手順から。
また、利用規約の同意については自己判断でお願いします。（そもそも同意しないと使えませんが。。）

# １、FlutterSDK のインストールと PATH 設定
1、以下のリンクを開き、画面右上の「Get Started」ボタンをクリックする
ダウンロード先：[Flutter - Build apps for any screen](https://flutter.dev/)

![スクリーンショット 2023-03-13 19.28.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/c700fc94-91cf-578b-c1cb-56eeb575d388.png)

２、macOS を選択する

![スクリーンショット 2023-03-13 19.30.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/ef4ca9ba-567c-4da7-2f39-95d4bba538f5.png)

３、お使いのMacに応じてintel　or Apple Siliconどちらかのzipファイルをダウンロードする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/337d4a73-3118-cd5d-bd00-4fbb7967458a.png)

4、ターミナルを起動して、cdコマンドで解凍したい場所に移動する
```
cd ~/解凍先パス
```

5、zipファイルをダウンロードした際のページに、unzipコマンドが記載されているので実行する
&emsp;（参照しているMacがintelなのかM1以降なのかでコマンド表記が自動で変わるらしい。凄く助かる）

![スクリーンショット 2023-03-13 19.48.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/9db5b4ba-094b-95cc-5731-9d30e4bc6cac.png)

解凍するとFlutterという名のフォルダが出来ているはず。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/7f517169-4222-fde2-e2ab-50cbee0613c9.png)

6、以下のコマンドを実行し、使用しているシェルを確認する。
```
echo $SHELL
```
表示されたのが、/bin/zshだった場合、設定ファイル名は「.zshrc」
表示されたのが、/bin/bash の場合、設定ファイル名は「.bash_profile」

7、設定ファイルの有無を確認するためホームディレクトリに戻り、lsコマンドで確認する
  &emsp;（設定ファイルは隠しファイルのため -a オプションをつける）
```
cd 
ls -a
```
一覧が表示されるので、その中に設定ファイル名がなければ以下のtouchコマンドで作成し、あれば作成不要

zshの場合
```
touch .zshrc
```
bashの場合
```
touch .bash_profile
```

8、設定ファイルをopenコマンドで開き、Pathと環境変数を記載する

zshの場合
```
open .zshrc
```
bashの場合
```
open .bash_profile
```

９、ファイルに以下を追記し、保存してファイルを閉じる

```
export PATH="$PATH:[通したいパス]/bin"
```
入力例
```
export PATH="$PATH:$HOME/development/flutter/bin"
```

１０、Pathと環境変数の変更を反映させる

この工程を忘れがち。これやらないと変更結果が反映されませんので注意！

zsh の場合
```
source ~/.zshrc
```

bash の場合

```
source ~/.bash_profile
```

１１、whichコマンドでflutterのPathが反映出来ているか確認する

```
which flutter
```
表示例
```
[設定したパス]/bin/flutter/flutter
```
 が返ってきたら OK


# ２、Android Studio のインストールとセットアップ

続いては、Android Studioをインストールしていきます。
Androidのエミュレーターを使用するには必須ですね。

1、以下のリンクを開き、画面真ん中の緑の「Download Android Studio　〜」ボタンをクリックし利用規約が出てくるのでよく読み、納得出来たら同意する。

　 ダウンロード元：[Download Android Studio & App Tools - Android Developers](https://developer.android.com/studio)

![スクリーンショット 2023-03-14 11.58.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/54bb821a-7d06-0097-00a8-64580be448c2.png)


２、お使いのMacに応じてintel　or Apple Siliconどちらかのzipファイルをダウンロードする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/e238036b-3fc1-c6de-b489-e3045b49fb4d.png)

３、ダウンロードした dmg を開くと自動的に以下の画面が表示されるので、Android Studio.app のアイコンを Applications にドラッグ&ドロップする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/8893050f-42c0-87cc-b321-c978e400864d.png)


４、Android Studioを起動する（Launchpadにアイコンが追加されているはず。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/93cf2ea9-9117-8258-53cb-dd71ff4e98a2.png)


５、画面に従ってセットアップを完了する。（基本的にデフォルトのままNextや肯定的な選択肢を選べばよいかと。）
※ 以下の画像はピックアップしたもの

こだわりがなければ、Standardでよいと思います。
![スクリーンショット 2023-03-15 9.25.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/e8da1faf-21c4-acc6-1534-e423f2ea4382.png)
UIテーマはお好みで選択してください。　　　
![スクリーンショット 2023-03-15 9.25.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/4dd47cb9-6805-4173-6b18-7593473edf2d.png)
利用規約はしっかり確認してからAcceptを選択し、Finishボタンを押下する
![スクリーンショット 2023-03-15 9.25.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/56bd9b86-6394-d2c8-9aab-3086b4543d61.png)
そうすると色々ダウンロードが始まりますので終わるまで待ちます。
![スクリーンショット 2023-04-04 18.00.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/7575957f-af3c-e30f-a779-e5d7952e5fdd.png)
ダウンロードが終わったらFinishボタンを押下して閉じます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/2ee2c7e6-6db4-d2f7-f7d7-5774d531b24d.png)

６、FlutterとDartのプラグインをインストール
左側に表示されるメニュー一覧から Plugins を開き、「flutter」と検索する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/44d6e5bf-2d34-89b5-08c5-a5704b2c15c5.png)
検索結果で表示された以下のインストールボタンを押下する
![スクリーンショット 2023-04-04 18.03.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/4adfce17-5f25-e6d4-7091-73cb18188e7e.png)
利用規約はしっかり確認してからAcceptを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/39f86472-3d0a-1693-511e-8a2519ced1d5.png)
Dartのプラグインをインストールすると出た場合は、必要なので、Installボタンを押下する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/8786f881-ec22-d106-e730-13bfabd79273.png)
※ 上記の選択肢が出てこなければ、同じ手順で「dart」と検索し、検索結果で表示された以下のインストールボタンを押下する

Restart IDEとなっていたらInstall完了
![スクリーンショット 2023-04-04 18.07.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/ae2a9f81-2fef-f42e-d2bf-f31819076b1a.png)
プラグインを適応するためには再起動が必要
以下の選択肢が出てきた場合は、Restartボタンを押下し再起動させる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/8c809e3c-aa2d-f792-a868-663f8bbbe442.png)

７、SDKとAndroidエミュレータのインストール
左側メニューの「Projects」画面に戻り、「More Actions」>「SDK Manager」を押下する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/9f2c794f-4576-a366-64b7-6e93aee1f825.png)
エミュレータのためのAPIをインストールする。Preview以外のものを選択し、Applyボタンを押下する（今回は記事作成時点で最新のものを選択）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/99f1fd23-1195-8ea2-246f-18ada48822d0.png)
OKボタンを押下する
![スクリーンショット 2023-04-04 18.27.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/1b1df83c-c9af-4f99-e51f-942836cec1ea.png)
インストールが終わったら、Finishボタンを押下する
![スクリーンショット 2023-04-04 18.29.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/9251747e-7ac0-abcd-5ec7-e802ec01c4f5.png)
エミュレータをインストールする。画面右下の方の「Show package Details」にチェックいれると、詳細画面に切り替わるので、イメージを選択し、Applyボタンを押下する。
Macが、Apple Silicon または Intelで選択肢が変わる。
&emsp;Apple Siliconの場合：「Google APIs ARM 64 v8a System Image」
&emsp;Intelの場合：「Google APIs Intel x86_64 Atom System Image」
![スクリーンショット 2023-04-04 18.36.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/49c77720-6127-0a48-f153-5e51dd8984e7.png)
OKボタンを押下する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/5ec653ef-20ba-10fe-a25a-85af4c331169.png)
利用規約はしっかり確認してからAcceptを選択し、Nextボタンを押下する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/1bd2d23b-7f5c-9fc7-e419-651027ca7d4c.png)
　インストールが終わったら、Finishボタンを押下する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/036b370f-920a-466f-861d-70d99ac6b0c8.png)
SDK Tools タブを開き、画面右下の方の「Hide Obsolete Packages」のチェックを外すと
「Android SDK Tools (Obsolete)」の選択肢が出てくるのでチェックを入れる
![スクリーンショット 2023-04-04 18.24.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/346f385f-a177-412e-4beb-7a92e6f26b57.png)
Android SDK Command-line Tools （latest）にチェックを入れて、OKボタンを押下する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/67f254c3-f7e3-00e8-5717-394e1086da51.png)
OKボタンを押下する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/3f070c3f-c0ef-f3b2-4eed-0324b113ebb2.png)
　インストールが終わったら、Finishボタンを押下する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/f98b0343-42a6-3e9d-f842-429224ee4304.png)

8、ターミナルを起動し、以下のコマンドを実行することでAndroidのライセンスに同意する
```
flutter doctor --android-licenses
```
以下のように利用規約の同意を何度か求められるので「y」を入力する
```
Review licenses that have not been accepted (y/N)? y

Accept? (y/N): y
```
以下の文言が表示されたらライセンス同意手続きが完了する
```
All SDK package licenses accepted
```

# ３、Visual Studio Code のインストールと、Flutter,Dart のプラグイン導入

1、以下のリンクを開き、画面真ん中のMacボタンをクリックし、Zipファイルをダウンロードする

　 ダウンロード元：[Download Visual Studio Code](https://code.visualstudio.com/download)
![スクリーンショット 2023-04-04 19.18.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/670c736c-2297-eac6-fa57-db6cf1691d52.png)

２、ダウンロードした zip ファイルをダブルクリックで展開し、展開された VSCode アプリをアプリケーションフォルダにドラッグ&ドロップする（スクショ撮り忘れたため割愛。。）

３、VSCode を起動する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/eca4bae9-503c-db53-c11b-2b452a1dd93d.png)

４、FlutterとDartのプラグインをインストール
左側に表示されているメニューから、拡張機能のページを開き、「flutter」と検索し、Flutterを選択後、インストールボタンを押下する
![スクリーンショット 2023-04-04 19.27.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/a52c47ec-b691-182d-25df-665e6caa3e83.png)
以下のようになっていたらインストール完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/52d1819f-9db3-42f2-d9b4-e143c24cee63.png)
「Dart」と検索すると、FLutterと同時にインストールされているはず。されていなければ、こちらもインストールする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/c0196f39-ae84-542b-a600-cbe6eb0f66c7.png)
５、Vscodeを再起動する
プラグインを適応するためには再起動が必要

# 4、Xcode のインストールとライセンス同意
iOSエミュレータを起動するためにXcodeをインストールする

１、AppStoreを起動し、左側の検索バーに「Xcode」 と入力すると以下の画像のものが見つかるので、インストールするのだが、これがすごく時間かかる。。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/0bef88cd-6951-1667-7ebb-8b9970a661c9.png)
２、インストールが終了したら Xcode を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/328382af-a00c-c495-0200-95a1ae121e9d.png)
３、利用規約はしっかり確認してからAgreeボタンを押下し、ライセンスに同意する
![スクリーンショット 2023-04-04 19.51.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/ea1544a2-f895-eb37-9af7-a7e08672c891.png)
以下の画面が出てきたら、Installボタンを押下する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/9e9393bd-84cd-1461-8e03-11977e191750.png)
Countineボタンを押下する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/556b1ad9-a42e-61e0-7d8e-dfaf1c938f9a.png)
この画面になったらXcodeの準備は完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/4379c733-0e4f-496c-c9fa-c3efe22a3205.png)
４、シュミレータ起動
DockerにあるXcodeのアイコンを右クリックし、「Open Develop Tool」 → 「Simulator」を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/c7dff45a-172e-6c31-4dc5-2dae1ff10399.png)
iOSのシュミレータが起動する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/743aedba-3e0f-9681-80f8-7f4fdf9e477b.png)

### 補足
M1以降のMacだと、Xcodeインストール後に、以下のコマンドを実行しないといけないようです。
```
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
```
このコマンドを実行すると、ライセンス規約についての表示が出てきたら内容確認してretrun/Enterキーを押下する（出ない時もある？）
```
sudo xcodebuild -runFirstLaunch
```

# 5、Homebrew のインストール
MacOS専用ではあるが、パッケージ管理（FlutterSDK..etc)には最適なのでインストールする。

1、以下のリンクを開き、記載してあるコマンドをターミナルで実行する
　　ダウンロード元：[Homebrew](https://brew.sh/index_ja)
![スクリーンショット 2023-04-04 19.48.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/c082670e-d440-644d-58a8-23c6f6cf66f1.png)
このワードが表示されたら、文字のごとく RETURN/ENTERキーを押下する
```
Press RETURN/ENTER to continue or any other key to abort:
```

２、インストールされたか確認する
```
brew -v
```
バージョンが表示されていたら成功
```
Homebrew 2.5.5
```

### 補足
M1以降のMacだと、ディレクトリ構成が変わるらしく、「/usr/local」ではなく「opt/homebrew」にhomebrewをインストールする必要があるようです。
１、ホームに移動する
```
cd /
```
２、lsコマンドでホーム直下にoptフォルダがあるか確認する
```
ls
```
optフォルダがあれば、cdコマンドで移動し、lsコマンドで直下にhomebrewフォルダがあるか確認する
```
cd /opt 
ls
```
そもそも、optフォルダがなければ作成する
```
mkdir opt
```
opt直下にHomebrewをインストールする
```
mkdir homebrew && curl -L https://github.com/Homebrew/brew/tarball/master | tar xz --strip 1 -C homebrew
```
設定ファイルを開く
```
open ~/.zshrc
```
Pathを追加し、保存する
```
export PATH="/opt/homebrew/bin:$PATH"
```
修正内容を反映するためのおまじないコマンドをお忘れなく
```
source ~/.zshrc
```

# 6、CocoaPods のインストール
iOSのライブラリ管理のために導入する

その前に、デフォルトでMacに搭載されているRubyを最新化する必要があるので
Rubyのパッケージ管理のためにrbenvを導入する

１、Rubyのパッケージ管理ツールを最新化する（MacはデフォルトでRubyが入ってます）
rbenvをインストールする
```
brew install rbenv 
```
rbenvの初期設定
```
rbenv init 
```
以下の記載を.zshrc または .bash_profileに追加しろと出てくるので追加する
```
eval "$(rbenv init - zsh)"
```
2、設定ファイルに以下を追記し、保存してファイルを閉じる
zshの場合
```
open .zshrc
```
bashの場合
```
open .bash_profile
```
以下を記載する
```
eval "$(rbenv init - zsh)"
```
修正内容を反映するためのおまじないコマンドをお忘れなく
zsh の場合
```
source ~/.zshrc
```
bash の場合
```
source ~/.bash_profile
```
インストールされたか確認する
```
rbenv versions
```
初回であれば、systemが表示されていれば成功
```
* system
```
rbenvでインストールできる最新verを以下のコマンドで確認する
```
rbenv install --list
```
以下のように表示されるはず（今回は3.1.4を使用する）
```
2.7.8
3.0.6
3.1.4
jruby-9.4.2.0
mruby-3.2.0
picoruby-3.0.0
truffleruby-22.3.1
truffleruby+graalvm-22.3.1
```
最新のものをインストールする
```
rbenv install 3.1.4
```
標準で使用するバージョンを指定する
```
rbenv global 3.1.4
```
Rubyのバージョンを確認する
```
ruby -v
```
以下のようにバージョンが出てきたら成功
```
ruby 3.1.4p223 (2023-03-30 revision 957bb7cb81) [arm64-darwin22]
```

4、ターミナルで以下のコマンドを実行し、CocoaPods をインストールする
```
sudo gem install cocoapods
```
３、セットアップする
```
pod setup
```
4、インストール出来ているか確認する
```
pod --version
```
バージョンが表示されたら成功
```
1.12.0
```

# 7、fvm のインストール
Flutterのバージョン管理のために導入する
fvmを使用することで、Flutterのバージョンの切り替えが容易になる

１、ターミナルで以下のコマンドを実行し、Homebrew経由でfvmをインストールする
```
brew tap leoafarias/fvm
brew install fvm
```

２、設定ファイルをopenコマンドで開き、Pathと環境変数を記載する
zshの場合
```
open ~/.zshrc
```
bashの場合
```
open ~/.bash_profile
```
Pathを追記する
```
export PATH="$PATH:$HOME/fvm/default/bin"
```
修正内容を反映するためのおまじないコマンドをお忘れなく
zsh の場合
```
source ~/.zshrc
```
bash の場合
```
source ~/.bash_profile
```

# 8、fvmの使用方法

１、インストール可能なFlutterバージョン一覧を確認する
```
fvm releases
```
２、flutterをインストールしてバージョン指定する
```
fvm install <バージョン>
```
使用するバージョンを指定する
```
fvm use <バージョン>
```
全てのプロジェクトに反映したい場合はglobalを指定する
```
fvm global <バージョン>
```
３、アンインストールする時は以下のコマンドを実行する
```
fvm remove <バージョン>
```
４、インストール済みのFlutterバージョンを確認する
```
fvm list
```

# 9、動作確認

ここまできたら、flutter doctorコマンドで環境を確認してみましょう

ターミナルから、以下のコマンドを実行する
```
fvm flutter doctor
```
以下のように全てチェックになっていれば成功
```
[✓] Flutter (Channel stable, 3.7.7, on macOS 13.1 22C65 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.1)
[✓] IntelliJ IDEA Community Edition (version 2019.3.2)
[✓] VS Code (version 1.73.1)
[✓] VS Code (version 1.77.0)
[✓] Connected device (2 available)
[✓] HTTP Host Availability
```

1、flutterプロジェクトの作成
ターミナルで任意のディレクトリ上にcdコマンドで移動し、以下のコマンドを実行する
```
flutter create myapp
```
※「myapp」は作成したいアプリ名で置き換える

2、VSCode の「開く」から、1 で作成したプロジェクトのフォルダ（myapp）を選択して開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/eed7041a-7b21-c252-b044-799c978ad870.png)

Vscode上で作成したプロジェクトが開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/1aacaa82-742b-706c-445d-166cd039962c.png)

3、ターミナルをVscode上で開く
メニューからターミナル → 新しいターミナルを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/8782f18a-0ccc-54d9-df18-85be3e63ef99.png)
Vscodeの下の方に以下のようにターミナルが開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/79bd3208-0fa7-8531-6fbd-a127d1c5537d.png)

４、flutter doctor コマンドを実行する
```
fvm flutter doctor
```
以下のように全てチェックになっていれば成功
```
[✓] Flutter (Channel stable, 3.7.7, on macOS 13.1 22C65 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.1)
[✓] IntelliJ IDEA Community Edition (version 2019.3.2)
[✓] VS Code (version 1.73.1)
[✓] VS Code (version 1.77.0)
[✓] Connected device (2 available)
[✓] HTTP Host Availability
```

４、VScode上で、「comannd」+「Shift」+「p」を入力するとコマンドパレットが開くので、検索バーに「flutter :Launch Emulator」と入力する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/43711a66-fb68-d139-8d2e-f88a38be0667.png)

5、エミュレータを選択する（画像だとiOS）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/c10762fb-15d0-ae13-caef-379cea273997.png)

6、VSCodeのターミナルで以下のコマンドを実行するとサンプルアプリが起動する
``` 
fvm flutter run
```
7、選択した端末のシミュレータが起動し、サンプルアプリが起動することを確認出来れば環境構築は完了です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005191/0b443cfc-f9ba-2aab-8689-880ab4613edf.png)