Flutterを使ってみよう｜環境構築

## MacOSの環境

- オペレーティングシステム: macOS (64-bit)
- ディスク要領: 2.8 GB (IDEツールなどのサイズは含まない)
- ツール: Flutterは下記のコマンドが利用可能であることが必要です
  - bash
  - curl
  - git 2.x
  - mkdir
  - rm
  - unzip
  - which

※上記のコマンドは、MacOS標準コマンドです。もしコマンドがない場合はダウンロードしておきましょう。
私はMacbook Pro 16インチにしてbashがインストールされていなかったのでbashをインストールします。

brewコマンドをインストールしていない方はこちらです。

```
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

brewを使ってbashをインストールします。

```
brew install bash
```

brewでインストールしたbashは /usr/lacal/bin/bash にあるので、これをログインシェルとして変更する。

/etc/shells の中に ```/usr/local/bin/bash```を追記する。

```
sudo vi /etc/shells
```

chshコマンドでログインシェルとして変更する。

```
chsh -s /usr/local/bin/bash
```

Terminalを再度立ち上げたらbashで起動します。
以上で、bashの設定は完了です。

## Flutter SDKのダウンロード

1. FlutterSDKの安定したリリースバージョンを入手します。
ここでは最新バージョン(2019/12/10現在)を載せておきます。
[flutter_macos_v1.9.1 + hotfix.6-stable.zip](https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.9.1+hotfix.6-stable.zip)
過去のバージョンを入手したい場合は[こちら](https://flutter.dev/docs/development/tools/sdk/archive)をご覧ください。

2. ダウンロードしたZIPファイルを任意の場所に解凍します。
   今回、私は~/developフォルダの中に解凍したflutterフォルダを置きます。

    ```
    cd ~/develop
    unzip ~/Downloads/flutter_macos_v1.9.1+hotfix.6-stable.zip
    ```

3. Flutterツールのパスを通す

    ```
    export PATH="$PATH:~/develop/flutter/bin"
    ```
  
    これだと、新しくTerminalを立ち上げた時にパスがまた初期化されてしまうので、パスを永続化します。

    ```
    source $HOME/.bashrc
    ```

    Terminalを再起動し、次のコマンドでパスが通っているか確認します。

    ```
    echo $PATH
    ```

    ~/develop/flutter/bin が表示されたら永続化されています。

## iOSセットアップ

### Xcodeインストール

FlutterでiOSアプリを開発するにはXcodeが必要です。

1. [Web](https://developer.apple.com/xcode/)または[MacAppStore](https://itunes.apple.com/us/app/xcode/id497799835)でXcodeの安定した最新バージョンをインストールします。
2. Terminalから次を実行して、新しくインストールされたバージョンのXcodeを使用するようにXcodeのコマンドラインツールを設定します。

    ```
    sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    sudo xcodebuild -runFirstLaunch
    ```

    コマンドでXcodeのライセンスに同意します。

    ```
    sudo xcodebuild -license
    ```

    spaceで下まで読み、agreeと入力しライセンスに同意します。

### iOSシミュレーターをセットアップ

Flutterでの開発をiOSシミュレーターで実行、テストする場合は次の手順を実行します。

1. iOSシミュレーターを起動します。

    ```fff
    open -a Simulator
    ```

2. シミュレーターのメニュー[ Hardware ] > [ Device ]で、シミュレーターが64ビットデバイス（iPhone5s以降）を起動しているか確認し、任意のものを起動します。

## Androidセットアップ

### Android Studioをインストール

1. [Android Studio](https://developer.android.com/studio)をダウンロードし、インストールします。
2. Android Studioを起動し、「Android Studio Setup Wizard」を実行します。  
   これにより、最新のAndroid SDK、Android SDK Platform-Tools、およびAndroid SDK Build-Toolsがインストールされます。  
   これらはFlutterでAndroid開発をする際に必要です。

### Android StudioにFlutterプラグインをインストール

1. Android Studioを起動します。
2. [ Configure ] > [ Plugins ]
3. 検索バーで```flutter```を検索します。
4. Flutterをインストール
5. インストール後、Android Studioを再起動します。

### Androidエミュレーターをセットアップ

Flutterでの開発をAndroidエミュレーターで実行、テストする場合は次の手順を実行します。

1. Android Studioを起動します。
2. [ Configure ] > [ AVD Manager ] > [ Create Virtual Device... ]
3. デバイスを選択し、[ Next ]  
   私はPixel 3を選択しました。
4. システムイメージ（x86やx86_64）を選択し、[ Next ]  
   私はAPIレベル29のx86を選択しました。
5. Emulated Performanceは[ Hardware - GLES 2.0 ]を選択し、[ Finish ]
6. 作成したデバイスのAction[ ▶︎ ]でAndroidエミュレーターを起動できます。

## Visual Studio Codeのセットアップ

Flutterが使えるIDEツールならなんでもいいのですが、今回はVS CodeでFlutterの環境を整えます。
[Visual Studio Code](https://code.visualstudio.com/)をダウンロードしてください。

### Flutterプラグインのインストール

1. VS Codeを起動します。
2. サイドメニューのEXTENSIONSでFlutterと検索します。
3. 検索結果のFlutterをインストールします。（Dartプラグインもインストールされます）

### Flutter Doctorでセットアップを検証

セットアップの検証がOutputで行われます。
検証結果を見て足りないものは対応しましょう。
足りないものについては、何をすれば良いか親切に教えてくれるので解決できます。

1. ⌘＋Shift＋P でコマンドパレットを開きます。
2. "doctor"と入力し、Flutter: Run Flutter Doctorを選択してEnterを押します。

## Flutterアプリを触ってみる

1. VS Codeを起動します。
2. ⌘＋Shift＋P でコマンド、Flutter: New Projectを選択します。
3. 今回はテストアプリとして"test_app"(プロジェクト名)を入力し、Enterを押します。
4. 保存場所を指定した後に、自動で新規ウィンドウが開かれます。
5. プロジェクトが出来上がるまで少し待ちましょう。
6. main.dartファイルが勝手に開かれ、サンプルコードが記述されています。

### シミュレーターにビルド

1. 好きなシミュレーターを起動しましょう。
2. 私はiOSのシミュレーターを起動しました。
3. シミュレーターが起動できたら、VS Codeの[ デバッグ ] > [ デバッグの開始 ]を選択します。
4. Xcodeビルドが始まります。
5. ビルドが終了すると、シミュレーターで「Flutter Demo Home Page」というサンプルアプリが開かれます。

### ホットリロードを体験

Flutterにはホットリロード機能が搭載されています。
保存をすると再度ビルドをしなくても、自動で反映される機能です。
またホットリロード時に、状態をそのままで反映することができます。
とりあえず、実際に現在開かれているサンプルアプリで試していきましょう。

1. main.dartの23行目の以下を書き換えます。
  
    ```dart:main.dart
    home: MyHomePage(title: 'Flutter Demo Home Page'),
    ```

2. 書き換えた後に、保存をしてみましょう。

    ```dart:main.dart
    home: MyHomePage(title: 'Test App'),
    ```
    
    シミュレーターのアプリに1秒ほどで即反映されます。

3. アプリの＋マークを何度か押して、表示されている数字を増やしましょう。  
   この表示されている数字は、状態を持っています。
   状態と言っても、グローバルな数字を持っているだけですが、通常はテスト中に再ビルドすると、この状態は初期化されて、0に戻ります。
   ですが、Flutterは状態を保ったまま反映を行えます。

4. 再度、先ほどの場所を書き換えて、保存してみましょう。

    ```dart:main.dart
    home: MyHomePage(title: 'Test App Ver2'),
    ```

    状態を保ったまま反映ができたと思います。
    これがFlutterのホットリロードです。

## 最後に

今回はFlutterの開発環境構築編を書かせていただきました。
どこかの誰かのお役に立てれば幸いです。ご覧いただきありがとうございました。