【Flutter×Mac】Flutterの環境構築をして"Hello World"を出力するまで

# 導入した背景

某プログラミングスクールに通って現在転職活動をしている未経験エンジニアです。だからといって転職で必要かと言われるとそうでもないのですが、ネイティブアプリに興味があったので実際に環境構築をしてみました。

## 前提
Flutterの環境構築をする前に、XcodeでSwiftに触れていました。
なのでこの記事内ではXcodeがすでに入っている前提で、記事を書いています。
実際に使うテキストエディタは```「VS code」```です。

### 導入済みのモノ
- Xcode
- VS code
- Homebrew




# 実際に導入してみた！

基本的には[Flutter公式ページ](https://flutter.dev/docs/get-started/install/macos)に沿っていきます。

## FlutterをMacデバイスにインストールする

下の画像の青いボタンから、Flutterをダウンロードします。


<img width="1403" alt="スクリーンショット 2019-09-12 21.07.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434778/f56107f3-f063-859a-4094-21ee94492137.png">


ダウンロードが終わったらZipファイルを解凍していきます。解凍場所は```ホームディレクトリ```や自分の好きな場所でいいと思います。

## Pathを通す

これ以降```flutter```コマンドを使っていくために、パスを通します。

```terminal
$ export PATH="$PATH:`pwd`/flutter/bin"   #パスを通す
$ source .bash_profile                    #設定を保存（必要に応じて）　
```

パスを通せたら```flutter```コマンドが使えるようになります。もしパスが通せてないとエラーが出るので、解凍したジップファイルの場所やパスの読み込みなどを確認してみてください。（ここで少し手間とったのでw)

## $ flutter doctorで必要なセットアップを確認する

パスが通ったことで早速```flutter```コマンドを使って環境構築で足りていないものを確認していきます。


```terminal
$ flutter doctor
```

このコマンドはFlutterやDartを使う上で必要なソフトウェアなどをチェックしてくれるコマンドです。

>```$ flutter doctorの公式説明```
This command checks your environment and displays a report to the terminal window. The Dart SDK is bundled with Flutter; it is not necessary to install Dart separately. Check the output carefully for other software you might need to install or further tasks to perform (引用元：[Flutter公式より](https://flutter.dev/docs/get-started/install/macos))

基本的には```$ flutter doctor```を打った際に出てきた指示にしたがっていけば、自然と環境構築ができるはず。

実際に出てくるのはこんな感じで出てきます。
<img width="978" alt="スクリーンショット 2019-09-12 21.02.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434778/889ca6fb-1366-b8ab-3616-3aa7decee462.png">

緑のチェックボックスだったり、「！」だったり「×」だったりが出ていると思います。最終的にはこれを全て**緑のチェックボックス**で埋め尽くしせば環境構築はおしまいです！
<img width="549" alt="スクリーンショット 2019-09-12 12.45.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434778/ec4d4022-4917-72b2-5854-a1c49594d657.png">

こんな感じ！

## 足りないモノを準備していく

前提でもあげていたんですが、XcodeとVS codeのインストールは済んでいるのでそちらは済んでいることとします。

### VS codeでFlutterの拡張機能をインストールする

VS codeでFlutterの拡張機能をインストールします。
<img width="1404" alt="スクリーンショット 2019-09-12 21.52.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434778/87956e11-5d60-c80a-30da-bc62c4c218cd.png">

VS codeは一旦これでOKです。

次はiOSの設定をしていきます。


## iOS用の環境を構築していく

Xcodeをインストールしている状態で```$ flutter doctor```を実行すると以下のようなエラーが出ます。

```terminal
[!] Xcode - develop for iOS and macOS (Xcode 10.3)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        sudo gem install cocoapods
        pod setup
```

DartをXcodeで認識させるためには以下のコマンドを実行する必要があるということなので、早速やっていきます。

```terminal
$ sudo gem install cocoapods
$ pod setup
```

この２つのコマンドを実行すると結構長いインストールが始まるので、終わるまで待機します。
無事に終わり、再び```$ flutter doctor```コマンドを打つと先ほどまで「！」だった箇所がしっかりと緑色のチェックマークに変わっていますね。


<img width="830" alt="スクリーンショット 2019-09-12 22.01.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434778/3bb7c870-bc15-297c-a54b-16a3d70ae8bc.png">

ここまでくればあとはあと少しです！
次はアンドロイド用の設定をしていきます。


## Android用の環境構築をしていく

先ほどのiOSではあらかじめXcodeをインストールしていたのですが、Androidの開発環境用のソフトウェアはインストールしていなかったので、そちらから行なっていきます。


実際に``` $ flutter doctor```で出ているエラーを確認してみると、Android開発用ソフトウェアのインストールを先にする必要がありそうなので、そこから初めてみる。


```terminal
Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/setup/#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
      You may also want to add it to your PATH environment variable.

```

　
　

[Android Studio](https://developer.android.com/studio/index.html)の公式ホームページから、Androidアプリの開発用ソフトウェアをダウンロードします。724MBあるのでまあまあ時間がかかります。


<img width="1405" alt="スクリーンショット 2019-09-12 22.10.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434778/976ccd53-fb3b-7146-f124-69fa84dd4569.png">

再び``` $ flutter doctor```で確認してみると、


```terminal
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
```

お！エラー文が変わった！これをみる限りAndroid用のライセンスを通す必要がありそうなので、こちらに書かれているコマンドを実行していきます。

```terminal
$ flutter doctor --android-licenses
```
 
 
実行するとかなり長い規約が英文で流れてきますが、指示に従っていきます。
そして最後まで行くと```All SDK package licenses accepted```と出るので完了です。

<img width="856" alt="スクリーンショット 2019-09-12 22.19.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434778/daef28c5-a96f-e7b8-8e75-82f37a1b9676.png">

よし！ちゃんと緑のチェックボックスになってる！
（さっき説明したiOSと説明した順序が逆になっているので、この画像ではまだiOSの設定ができていませんが、気にしないでください。）
　
Androidの設定はこれでおしまい！と言いたいんですが、あと１つだけ残っています。先ほどインストールした**Android StudioでFlutterとDartを使えるようにする**作業が残っています。これが終わればHello　Worldまであと少しです！

### Android Studio上の設定

基本的にはXcodeやVScodeで行なったように、Android StudioでもFlutterとDartのプラグインをインストールするだけです。
　
　
まず**Android Studio**を開きます。
<img width="776" alt="スクリーンショット 2019-09-12 22.26.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434778/63ad9573-2192-160d-c358-bd9c859b09c9.png">
　
Android Studioを開くと右下に**configure**があると思うので、そちらから**Plugins**を選択します。

<img width="895" alt="スクリーンショット 2019-09-12 22.26.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434778/a5202d32-6dd2-3632-5059-9716b789d58d.png">
　
MarcketPlaceで**FlutterとDart**と検索すると、それぞれのプラグインがあるので両方インストールします。
<img width="794" alt="スクリーンショット 2019-09-12 22.26.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434778/c36d2f46-115d-f226-dd01-46105a0a097a.png">
<img width="804" alt="スクリーンショット 2019-09-12 22.26.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434778/e59cfc94-4e28-4118-628e-4765a2da7d96.png">
<img width="797" alt="スクリーンショット 2019-09-12 22.27.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434778/62834d59-6736-3685-8822-450924439681.png">
　　
　
これでAndroid StudioでFlutterとDartが使えるようになりました。
早速```$ flutter doctor```でできているかを確認します。
　
<img width="775" alt="スクリーンショット 2019-09-12 22.35.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434778/f59c30ac-4844-48c3-f168-6d407454d581.png">
　
よし！これでほぼほぼ環境構築は終わりましたね！
あとは上の画像の```[!] Connected device ! No devices available```の部分ですが、まずはアプリを作成して、VS codeで実際にコードを書いていきましょう！

　
# VScodeを使って"Hello World"を出力しよう
 
筆者はこれまでRubyやRuby on RailsをVScodeで書いてきたという理由から、VScodeでの説明になります。

## アプリケーションを作成する
Railsで新規アプリケーションの作成だと```$ rails new```でしたが、Flutterだと```$ flutter create アプリ名```でで新規アプリが作成できます。Railsとと似ててとっつきやすかったですね。（Laravelの時は苦戦したのでw)
 
 
```terminal
$ flutter create flutter_sample

Creating project flutter_sample...
  flutter_sample/ios/Runner.xcworkspace/contents.xcworkspacedata (created)
  flutter_sample/ios/Runner/Info.plist (created)
  flutter_sample/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png (created)
 
(中略)
 
All done!
[✓] Flutter is fully installed. (Channel stable, v1.9.1+hotfix.2, on Mac OS X 10.14.5 18F132, locale ja-WS)
[✓] Android toolchain - develop for Android devices is fully installed. (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS is fully installed. (Xcode 10.3)
[✓] Android Studio is fully installed. (version 3.5)
[✓] VS Code is fully installed. (version 1.37.1)
[!] Connected device is not available.

Run "flutter doctor" for information about installing additional components.

In order to run your application, type:

  $ cd flutter_sample
  $ flutter run

Your application code is in flutter_sample/lib/main.dart.

```
　

この時にFlutterの丁寧さを感じました。
Railsばかりスクールでやってきたので、ネイティブアプリのディレクトリ構造が全くわからなかった私は、最後の一文を読んだ時「え！main.dart.をいじっていけばいいのか！」と感動しました。しかも実行するときには「```flutter run```すればいいよ！」なんて教えてくれるし！優しいFlutter。

　
## 実際に"Hello World"を打ってみよう
　
ここからは公式ホームページの[こちらのチュートリアル](https://flutter.dev/docs/get-started/codelab)を参考にしていきます。
　
実際に打っていくファイルは```main.dart.```なのでそちらで作業を進めていきます。
 
チュートリアルでは元のコードを消して下のコードに書き換えるように指示が出ているので、やってみます。

```dart:lib/main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
```

コード自体はこれでOK。あとは実際にシミュレーターで確認していきましょう。

　
### Flutterアプリをシミュレーターで確認する
　
VScodeでシミュレータでアプリを確認する場合、VScodeの```デバック(F5)```を使います。
そのためにはVScodeで対応するデバイスのシミュレータを選択する必要があります。下のGifでそのやり方を載せてあります。

[![Image from Gyazo](https://i.gyazo.com/6b3ff7bd7e8725a5dbbecc4cd3d1f562.gif)](https://gyazo.com/6b3ff7bd7e8725a5dbbecc4cd3d1f562)
　
一番下のバー（デフォルトだと青です）の一番右の```iPhoneXS(iOS simulator)```をクリックすることで、iOSかAndroidか、使うシミュレーターデバイスの洗濯ができます。
　
そして

<img width="1399" alt="スクリーンショット 2019-09-12 22.59.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434778/28cec7d1-e6fc-8472-660f-b5f72b6741e2.png">

デバックを選択して```デバックを開始```をクリックすると
<img width="1402" alt="スクリーンショット 2019-09-12 23.07.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434778/b1949255-d3df-257f-62e5-670819a76449.png">
　
無事"Hello World"が出力されました！！！

お疲れ様でした。

# チュートリアルを少しやってみた
　
この後のチュートリアルでは『英単語を２つランダムに組み合わせたリストアプリ』みたいなものを作りながら、FlutterとDartについて学ぶことができます。全編英語ですが、Javaよりのコードだったり、Javaをやったことがなくても、classやreturnなどのおなじみのコードが出てくるので、スタートとしてはとっつきやすいのかなと、今の段階では感じます。
<img width="1403" alt="スクリーンショット 2019-09-12 23.08.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434778/9a98dee9-a37d-cccd-7ae2-ac7b71bd35f6.png">

Flutterを少しだけ触った印象として

- Stateful　Hot Reloadで開発スピードが早い。コードがシミュレーターに反映されるスピードの速さやそれまでの労力が少ない。
- 「イイ感じのデザイン」がすぐに実装できる

を感じました。
これは[公式ホームページ](https://flutter.dev)にもFlutterの特徴が書いてある。
<img width="1169" alt="スクリーンショット 2019-09-12 23.22.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434778/4e1a5a87-9c50-9d70-eb58-850025d3877d.png">


実際にSwiftをXcodeで触っていた時はいちいちデバックしてシミュレーターを起動しないといけなかったので、Stateful　Hot Reloadは本当にストレスなく開発できるんじゃないかと思います。

ま、SwiftもXcodeも全く詳しくないので参考にしないでくださいw
　
 
これから実際に深掘りして触っていく予定ですが、そこで感じたことだったりをまた記事にできたらと思います。