Flutterとは？
Flutterとは
Flutter公式サイトの説明を翻訳すると以下のように書かれています。
Flutterは、単一のコードベースから美しいネイティブコンパイルされたマルチプラットフォームアプリケーションを構築するための、Googleによるオープンソースフレームワークです。
https://flutter.dev
翻訳した文章だけだとなにやら難しい単語が並んでいますが、以下にFlutterの特徴を説明していきます。
クロスプラットフォーム開発が可能
1つのソースコードでWebアプリ、スマートフォン向けのモバイルアプリ、PC向けのデスクトップアプリ、組み込み系のシステムをもテスト、開発、ビルドができます。
各プラットフォームごとに開発する言語や環境が違うことによるコストを大幅に減らすことができます。
ホットリロードによる開発の効率化
ホットリロードとは、ソースコードを書き込むと直ちにその変更がアプリに反映されるという機能です。
従来のアプリケーション開発ではたとえ軽微な修正でも、一から時間のかかるコンパイルをして確認作業を行なっていました。さらにAndoroidとiOSの両方を確認しなければいけない場合で考えると、単純計算で2倍以上の作業時間を減らすことができるようになります。
JavaScriptライクなプログラム言語
Flutterで使用するプログラム言語は「Dart（ダート）」を採用しており、Dartは2011年にGoogleがJavaScriptの代替言語とするのを目的として公開された言語です。
もともとJavaScript自体は学習に際して敷居の低いプログラム言語として挙げられますが、そのJavaScriptに近しい文法を取り入れているためJavaScript経験者はもちろん、アプリ開発初心者でも学習しやすいプログラム言語といえます。
統一感のあるマテリアルデザイン
マテリアルデザインとはGoogleが提唱しているデザインのことです。見やすく、直感的に操作できるようなUIを定義しています。
Flutterではこのマテリアルデザインを標準のコンポーネントとして採用しています。もちろんiOSライクなデザイン（クパチーノデザイン）にも対応しています。
マテリアルデザインについての公式サイトを見てみるとよく分かりますが、非常に良くまとまったデザインになっていて見やすいと思います。最近のAndoroid端末でもこのマテリアルデザインを使った画面設計をされているのがよく分かります。
さて、ここまでざっくりとFlutternituite説明してきたので早速環境構築をしてみましょう！
Flutterの環境構築
ここではMacでFlutter開発を行うための環境を構築していきます。
まずは必要なエディタや統合開発環境（IDE）をインストールしましょう
| インストールするもの | インストール先 |
|---|---|
| Xcode | App Store |
| Android Studio | 公式のダウンロードページ |
| Visual Studio Code | 公式のダウンロードページ |
| Homebrew | ターミナルでコマンドを叩く（公式ページ参照） |
| CocoaPods | ターミナルでコマンドを叩く（公式ページ参照） |
| Flutter | 公式のダウンロードページ |
Xcodeのインストール
まずはインストールに時間がかかるXcodeからインストールしましょう。
これはApp Storeで「Xcode」と検索すると下画像に表示されているアイコンのアプリが出てくるので、こちらをインストールします。
Android Studioのインストール
- 次にAndroid Studioをインストールしていきます。まずは公式のダウンロードページにアクセスしましょう。
アクセスすると以下の画面が出るので、赤い丸で囲んだ部分をクリックします。
- ダウンロード規約が書いてあるので、同意チェックを入れて「Mac with Apple chip」の方のボタンを押してDMGファイルをダウンロードします。
Intel製のチップを使っている場合は「Mac with Intel chip」のボタンを押してDMGファイルをダウンロードしましょう。
- ダウンロードしたDMGファイルをアプリケーションフォルダにドラッグ＆ドロップしてからAndroid Studioを起動しましょう。
- セットアップウィザードに従って画面を進めていきましょう。
Install Typeは「Standard」、UI Typeはお好きな方で構いません。ライセンスの同意画面で「Accept」に切り替えてNextを押していくと必要なコンポーネントがインストールされます。
公式のサイトにもインストール方法が載っているのでこちらもぜひ参照してください！
Visual Studio Codeのインストール
- Visual Studio Codeをインストールしていきます。まずは公式のダウンロードページにアクセスし、下画像の赤丸部分をクリックしインストールしましょう。
赤丸の下部分に「Intel chip」、「Apple silicon」、「Universal」とありますが赤丸部分を押すとUniversalと同じファイルがダウンロードされます。
このUniversalのファイルはIntel製チップとAppleシリコンのどちらでも動くように作られたものなので、基本的にUniversalをダウンロードしておけば問題ありません。
- ダウンロードできたらAndroid Studioのときと同じようにセットアップウィザードに従って、インストールを行いましょう。
Homebrewのインストール
次にHomebrewというものをインストールしていきます。
- 公式サイトにアクセスします。
アクセスしたら、赤枠で囲んだ部分に書いてある通りに進めていきます。
- Macにデフォルトで搭載されている「ターミナル」を開きましょう。
- Homebrewの赤枠部分に書いてあったコマンド（以下にも記載）をコピーし、ターミナル上に貼り付けてEnterを押します。
インストールが始まり、正常に完了すると「Installation succesful!」と出ます。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"- インストールできているかの確認をしましょう。
以下に記載のコマンドをターミナル上にコピーしてEnterを押してみましょう。画像のようにバージョン確認ができたらOKです。
（バージョン情報はいつインストールしたかによって違います。）
brew --version
CocoaPodsのインストール
CocoaPodsをインストールしていきましょう。
他の方の記事を見るとCocoaPodsをインストールしなくてもFlutterの環境構築ができたような方はいましたが、CocoaPodsを入れている人の方多い感じがするのと、私自身がCocoaPodsを入れないとFlutterが動かなかったので手順として加えました。
- 公式サイトを一応載せておきますが、以下のコマンドをターミナル上で叩くだけで十分です。
PCのパスワードを要求されるので入力して、Enterを押しましょう。
sudo gem install cocoapods
Flutter SDKのインストール
公式のダウンロードページを参考に必要な部分を記載します。
- Apple SiliconのMacにFlutterをインストールするかたは先にターミナル上で以下のコマンドを叩きます。
このコマンドでRosseta2をインストールします。
sudo softwareupdate --install-rosetta --agree-to-license- 公式のダウンロードページにてFlutter SDKをインストールします。
Apple SiliconのMacの場合は右側のボタンからzipファイルをダウンロードしましょう。（ここではダウンロードフォルダに保存することにします。）
- ターミナル上でコマンドを打って、PATH（パス）を通します。PATHを通さないとFlutterを動かせないのでしっかり行いましょう。
３-１．pwdコマンドでカレントディレクトリを確認しましょう。以下のコマンドを叩くと現在参照しているディレクトリが確認できます。
pwd ３-２．カレントディレクトリ内にフォルダを作り、ダウンロードしたzipファイルを解凍します。
以下のコマンドを１行ずつ実行していきましょう。ここでは「develop」フォルダを作って、その中でzipファイルの解凍を行なっています。
mkdir ~/develop
cd ~/develop
unzip ~/Downloads/flutter_macos_3.7.0-stable.zip３-３．PATHを通すコマンドを実行して完了です。
export PATH="$PATH:`pwd`/flutter/bin"Flutterが環境構築できているか確認
まずここまでの作業をしている間に、Xcodeがしっかりインストール完了になったことを確認しましょう。
- まずは正常にPATHが通っているか確認。ターミナルを一度終了し、もう一度立ち上げてから以下のコマンドを実行しましょう。
正常にPATHが通っていれば、Flutterの実行ファイルまでのディレクトリパスを確認することができます。
（/Users/hogetarou/develop/flutter/bin/flutter のような感じで表示されます。）
which flutter- flutter doctorコマンドで依存関係が設定できているか確認します。
具体的には、Android StudioやXcode、Chromeが使えるかやFlutterのSDKが使えるようになっているかを確認することができます。
ターミナル上で以下コマンドを実行してみましょう。
flutter doctorすべて正常にインストール・設定ができていれば下の画像のようにオールグリーンのチェックが入ります。
正常でなかったときの対処方法
まずは以下のコマンドを実行して詳細を確認してみましょう。
flutter doctor -v表示される結果の中に、各ツールのインストール場所や正常にできていない原因や参考URL等が出てきます。
その情報を元に検索をかけてみれば、公式サイトやその他ブログなどに解決策が載っているかもしれません。
おわりに
この記事ではApple SiliconのMac OSにて、Flutterで開発を行うための環境構築を行いました。
すでに開発経験がある人にとってはかなり簡単に環境構築できたかもしれません。
開発未経験の方でも比較的楽に構築できる内容だと思いますので、つまづいても根気よく環境構築を頑張りましょう！
