環境構築 (Flutter Roadmap Setup Development Environment)

## はじめに
Flutterを網羅的に学習するにあたって[Roadmap](https://roadmap.sh/flutter)を使って学習を進めることにしました。

この記事では、Flutter初学者やこれからFlutterを学習し始める方に向けて、Flutterロードマップの開発環境のセットアップについてまとめています。

RoadmapはFlutterだけでなく、他の言語やスキルのロードマップも提供されており、何から学習して良いか分からないと悩んでいる方にとって有用なサイトになっています。
ぜひ[Roadmap](https://roadmap.sh/)を利用して学習してみてください。

## Roadmapとは

簡潔に言えば、Roadmap.shは学習者にとっての**ガイドブック**であり、**学習の方向性を提供する学習ロードマップサイト**です。

初心者から上級者まで、ステップバイステップでスキルを習得するための情報が提供されています。

学習の進め方が分かりやすく示されているだけでなく、個々の項目に参考資料やリソースへのリンクも提供されているので、学習者は目標を設定し、自分自身のペースで学習を進めることができます。

## Setup Development Environment(開発環境のセットアップ)
FlutterロードマップSetup Development Environment(開発環境のセットアップ)では以下の2つのサイトが紹介されています。興味のある方はぜひお読みください。

- Get started with Flutter: https://docs.flutter.dev/get-started/install
- Installing Dart SDK: https://dart.dev/get-dart

## **1. Flutter SDKのインストール**
はじめに、Flutter SDKのインストールを行います。
[Flutterの公式ページ](https://docs.flutter.dev/get-started/install)から、インストールをしましょう。
### Windowsの場合
##### 1. Windowsを選択
![スクリーンショット 2023-08-06 23.25.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/f67ee763-c7d1-41c3-7271-2ee50212c596.png)

##### 2. zipファイルをダウンロード

「Get the Flutter SDK」にある「flutter_windows_3.10.6-stable.zip」を選択してzipファイルをダウンロードします。

![スクリーンショット 2023-08-06 23.26.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/a0f93733-5ea7-38b9-c36c-ef4a9e810ba6.png)

##### 3. ダウンロード後にzipファイルを解凍

「flutter」フォルダがありますので、適切なフォルダに配置してください。

### Macの場合
##### 1. macOSを選択
![スクリーンショット 2023-08-06 23.25.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/0de5a317-e282-9184-a80c-f255fcc9a41b.png)

##### 2. Macのチップを確認

1. Appleメニューから「このMacについて」を選択
2. 「**プロセッサ**」もしくは「**チップ**」の項目を確認してください。
3. `Intel`の記載があれば、「**Intel Mac**」 `M1`、`M2`の記載があれば、「**Appleシリコン Mac**」です。

https://tamoc.com/check-intel-mac/

**Intel Macの場合**
##### 3. zipファイルをダウンロード

「Get the Flutter SDK」にある「Intel (flutter_macos_3.10.6-stable.zip)」を選択してzipファイルをダウンロードします。
![スクリーンショット 2023-08-06 23.29.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/ff821a2d-56fc-4556-0c04-0018b435e2b4.png)

**Appleシリコン Macの場合**
##### 3. zipファイルをダウンロード

「Get the Flutter SDK」にある「Apple Sillicon (flutter_macos_arm64_3.10.6-stable.zip)」を選択してzipファイルをダウンロードします。
![スクリーンショット 2023-08-06 23.29.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/2103b20e-ee98-77da-4dee-ebf09cb73729.png)
##### 4. ダウンロード後にzipファイルを解凍

「flutter」フォルダがありますので、適切なフォルダに配置してください。

## **2. パスを通す**
PC上のどのフォルダでもflutterコマンドを利用できるようにするために、パスを通します。

### Windowsの場合
##### 1. 検索欄からenvと検索して、コントロールパネルを開きます。

##### 2. 「Advanced」のタブを開いて、下部にある「Environment Variables」をクリックします。

##### 3. 「Path」を選択して、「Edit」をクリックします。

##### 4. 「New」をクリックして、先ほどのFlutter SDKのインストールで作成したflutterフォルダ内の`binフォルダ`のpathを入力します。

##### 5. 以下のコマンドを入力してパスの確認をします。
```zsh
which flutter # 設定したパスが表示されれば、設定完了です
```

### Macの場合
##### 1. 使用しているシェルの確認
```sh
 echo $SHELL # bash もしくは zsh の表示がされます。
```

##### 2. `.zshrc`ファイルの作成
ユーザーフォルダにて以下のコマンドを入力して、`.zshrcファイル`を作成します。
```sh
# bashの場合
touch .bashrc
# zshの場合
touch .zshrc
```

##### 3. 作成したファイルを開く
```sh
# bashの場合
open .bashrc
# zshの場合
open .zshrc
```
##### 4. ファイルにPATHを追加
```zsh
export PATH="$PATH:[flutterフォルダまでのパス]/bin"
```
`command(⌘) + S`でファイルを保存した後、ファイルを閉じてください。

##### 5. パスの確認
```zsh
which flutter # 設定したパスが表示されれば、設定完了です。
```
    
## **3. Android Studioのセットアップ**
次に、Android Studioのインストールを行います。
[Android Studioの公式ページ](https://developer.android.com/studio)から、インストールをしましょう。

### Windowsの場合

##### 1. 「Download Android Studio ~~」 を選択
![スクリーンショット 0005-08-07 13.56.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/721f57fa-185e-30d5-b0ab-528f07260be7.png)

##### 2. 利用規約の同意にチェックマークを入れて、ダウンロードを選択

##### 3. ダウンロード完了後、Android Studioを起動して初期設定を行う

Google が Android Studio とその関連ツールの使用状況データ(パッケージ名やクラス名、プラグイン設定などのソフトウェア識別子、機能やリソースの使用方法など)を収集できるようするか否かのダイアログです。
使用状況統計を Google に送信する場合は右の「**Send usage statistics to Google**」を、送信しない場合は左の「**Don't send**」をタップしてください。基本は「**Don't send**」でOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/0523865a-2d7e-a310-bb28-8a5f3e055273.png)

##### 4. 開発環境のカスタマイズに関する選択

**Stadard**と**Custom** **2種類**の設定方法がありますが、ここでは**Standard**を選択します。後ほど変更もできるので、以下にそれぞれの内容を記載しておきます。

**Standard（標準）設定:**

簡単かつ迅速にAndroid Studioの設定を始めることができます。
Googleが推奨する一般的な設定が含まれており、新たにプロジェクトを作成したり、環境を切り替えたりする際に便利です。

**Custom設定(カスタム)設定:**
プロジェクトやチームの独自の要件に合わせて設定を調整できます。これにより、開発プロセスを最適化し、効率を向上させることができます。
プラグインやテーマ、キーマッピングなど、個人の好みに合わせて環境をカスタマイズできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/d3c22f17-d018-1304-8fbe-38b9e0993b34.png)

##### 5. UIのテーマを選択

好みのテーマを選択しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/433b0ddd-ca48-3856-e140-375bccf25025.png)

##### 6. Android Studioを使用する際の利用規約に同意

Googleが提供するAndroid Studioを利用する際に、ユーザーが同意する必要がある条件や制約の集合です。ライセンス契約は、ソフトウェアの使用方法、制約、責任、ライセンスの範囲などに関する重要な情報を提供しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/380b28e5-c47d-1188-3e05-df55574980f8.png)

##### 7. Android StudioにFlutterプラグインを導入

インストール後、Dartプラグインを導入するかのダイアログが表示されるため、「Install」をタップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/1aa90ebd-3dc4-a274-ccc7-d361e4e1cf3c.png)

##### 8. ライセンスに同意
コマンドを実行していくつかのライセンスに同意します。それぞれ内容を確認して`y`を押下します。

```dart
flutter doctor --android-licenses
```

### Macの場合

##### 1. 「Download Android Studio ~~」 を選択
![スクリーンショット 0005-08-07 13.56.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/721f57fa-185e-30d5-b0ab-528f07260be7.png)

##### 2.Macのチップを確認

 利用規約の同意にチェックマークを入れて、端末のチップに対応したものをダウンロードします。
**Intel Macの場合**
![スクリーンショット 0005-08-07 13.58.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/c59cb8a9-7443-a6b3-e7f9-e625970aba72.png)

**Appleシリコン Macの場合**
![スクリーンショット 0005-08-07 13.58.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/d1fe3f55-6235-6f1d-b4f0-ce9c14d8d4e7.png)

##### 3. ダウンロード完了後、Android Studioを起動して初期設定を行う

Google が Android Studio とその関連ツールの使用状況データ(パッケージ名やクラス名、プラグイン設定などのソフトウェア識別子、機能やリソースの使用方法など)を収集できるようするか否かのダイアログです。
使用状況統計を Google に送信する場合は右の「**Send usage statistics to Google**」を、送信しない場合は左の「**Don't send**」をタップしてください。基本は「**Don't send**」でOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/0523865a-2d7e-a310-bb28-8a5f3e055273.png)

##### 4. 開発環境のカスタマイズに関する選択

**Stadard**と**Custom** **2種類**の設定方法がありますが、ここでは**Standard**を選択します。後ほど変更もできるので、以下にそれぞれの内容を記載しておきます。

**Standard（標準）設定:**

簡単かつ迅速にAndroid Studioの設定を始めることができます。
Googleが推奨する一般的な設定が含まれており、新たにプロジェクトを作成したり、環境を切り替えたりする際に便利です。

**Custom設定(カスタム)設定:**
プロジェクトやチームの独自の要件に合わせて設定を調整できます。これにより、開発プロセスを最適化し、効率を向上させることができます。
プラグインやテーマ、キーマッピングなど、個人の好みに合わせて環境をカスタマイズできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/d3c22f17-d018-1304-8fbe-38b9e0993b34.png)

##### 5. UIのテーマを選択

好みのテーマを選択しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/433b0ddd-ca48-3856-e140-375bccf25025.png)

##### 6. Android Studioを使用する際の利用規約に同意

Googleが提供するAndroid Studioを利用する際に、ユーザーが同意する必要がある条件や制約の集合です。ライセンス契約は、ソフトウェアの使用方法、制約、責任、ライセンスの範囲などに関する重要な情報を提供しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/380b28e5-c47d-1188-3e05-df55574980f8.png)

##### 7. Android StudioにFlutterプラグインを導入

インストール後、Dartプラグインを導入するかのダイアログが表示されるため、「Install」をタップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/1aa90ebd-3dc4-a274-ccc7-d361e4e1cf3c.png)

##### 8. ライセンスに同意
コマンドを実行していくつかのライセンスに同意します。それぞれ内容を確認して`y`を押下します。

```dart
flutter doctor --android-licenses
```

## **4. Xcodeのセットアップ**
##### 1. App StoreからXcodeのダウンロードとインストールを行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/7a22ab12-6837-0894-f35c-4902b8b345df.png)

##### 2. ライセンスに関するダイアログを確認
パスワードを求められるので、PCのパスワードを入力して「OK」をタップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/8bf84bc0-81ed-6bbf-694d-9a2a9bebc14a.png)

##### 3. cocoapodsをインストール

コマンドを実行して、cocoapodsをインストールします。パスワードを求められるので、PCのパスワードを入力してください。
```zsh
# cocoapodsをインストール
sudo gem install cocoapods
```

## **5. Flutterプロジェクトの作成**

##### 1. Android Studioを開いて、「New Flutter Project」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/fae0a5c6-2098-4245-b64d-692e882a540e.png)

##### 2. Flutter SDK pathを設定
Flutter SDK pathを設定する画面が開かれるので、使用するSDKのpathを指定しましょう。
基本はデフォルトのまま「Next」でOKです。

##### 3. プロジェクト名を設定
プロジェクトの名前やlocationを設定し、`Finish`をタップしましょう。
![スクリーンショット 2023-08-11 15.50.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/214710d0-1415-5ee8-2e46-7cbb40aaced8.png)


##### 4. アプリを作成
以下の画面が表示されれば、設定完了です。実際にアプリを作成していきましょう。
![スクリーンショット 2023-08-11 15.51.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/5197454d-d4a6-1710-9cf2-a328afd615d9.png)

## 5. まとめ
以上Flutterの開発環境セットアップ手順についてでした。

Flutter SDKのインストールから始まり、WindowsとMacでそれぞれの設定を行います。
これにより、環境構築が完了すればすぐに実際のアプリ開発に取り組むことができます。

この記事を通じて、Flutterの環境構築に関するステップを丁寧に理解し、実際に手を動かすことで、より効果的な学習を進めることができるでしょう。
初めての方でも安心して、Flutterの世界へ足を踏み入れてみてください。

## 参考資料
https://zenn.dev/kazutxt/books/flutter_practice_introduction/viewer/06_chapter1_environment

https://blog.flutteruniv.com/flutter-entrance/

https://zenn.dev/noe489/articles/b5a3571770250b