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

導入した背景

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

前提

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

導入済みのモノ

• Xcode
• VS code
• Homebrew

実際に導入してみた！

基本的にはFlutter公式ページに沿っていきます。

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

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

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

Pathを通す

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

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

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

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

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

$ 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公式より)

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

実際に出てくるのはこんな感じで出てきます。

緑のチェックボックスだったり、「！」だったり「×」だったりが出ていると思います。最終的にはこれを全て緑のチェックボックスで埋め尽くしせば環境構築はおしまいです！

こんな感じ！

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

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

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

VS codeでFlutterの拡張機能をインストールします。

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

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

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

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

[!] 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で認識させるためには以下のコマンドを実行する必要があるということなので、早速やっていきます。

$ sudo gem install cocoapods
$ pod setup

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

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

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

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

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

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の公式ホームページから、Androidアプリの開発用ソフトウェアをダウンロードします。724MBあるのでまあまあ時間がかかります。

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

[!] 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用のライセンスを通す必要がありそうなので、こちらに書かれているコマンドを実行していきます。

$ flutter doctor --android-licenses

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

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

Android Studio上の設定

基本的にはXcodeやVScodeで行なったように、Android StudioでもFlutterとDartのプラグインをインストールするだけです。
　
　
まずAndroid Studioを開きます。

　
Android Studioを開くと右下にconfigureがあると思うので、そちらからPluginsを選択します。

　 MarcketPlaceで**FlutterとDart**と検索すると、それぞれのプラグインがあるので両方インストールします。 　　 　 これでAndroid StudioでFlutterとDartが使えるようになりました。 早速```$ flutter doctor```でできているかを確認します。 　 　 よし！これでほぼほぼ環境構築は終わりましたね！ あとは上の画像の```[!] 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)

$ 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/[e-mail] (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"を打ってみよう

　
ここからは公式ホームページのこちらのチュートリアルを参考にしていきます。
　
実際に打っていくファイルはmain.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でそのやり方を載せてあります。

　
一番下のバー（デフォルトだと青です）の一番右のiPhoneXS(iOS simulator)をクリックすることで、iOSかAndroidか、使うシミュレーターデバイスの洗濯ができます。
　
そして

デバックを選択してデバックを開始をクリックすると

　
無事"Hello World"が出力されました！！！

お疲れ様でした。

チュートリアルを少しやってみた

　
この後のチュートリアルでは『英単語を２つランダムに組み合わせたリストアプリ』みたいなものを作りながら、FlutterとDartについて学ぶことができます。全編英語ですが、Javaよりのコードだったり、Javaをやったことがなくても、classやreturnなどのおなじみのコードが出てくるので、スタートとしてはとっつきやすいのかなと、今の段階では感じます。

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

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

を感じました。
これは公式ホームページにもFlutterの特徴が書いてある。

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

ま、SwiftもXcodeも全く詳しくないので参考にしないでくださいw
　

これから実際に深掘りして触っていく予定ですが、そこで感じたことだったりをまた記事にできたらと思います。