モバイルアプリ開発環境として人気のFlutter。
アプリ開発に注力するために、しっかりと開発環境を構築していきましょう！
よし！開発を進めるためにはまず必要なのが「開発環境」の構築だ！！
Flutter開発環境を構築するのに必要な手順
Flutter開発環境の構築手順はざっと以下の通り行なっていけば問題ないでしょう！
Flutter本体（SDK）をインストールした後に実際にソースコードを編集したりするための環境であるIDE（統合開発環境）をインストールするという流れです。
手順はFlutter公式のこちらのページの内容を参考にしています。
開発環境構築に必要なスペック
開発環境を構築するにあたりまずは環境構築するPCのスペックやディスクの空き容量がシステム要件を満たしているか確認していきましょう！
本記事ではMacでの開発環境構築を実施しているので、Windows環境とは異なるという点にご注意ください。
しかし、今の自分のMacBookは2015年のモデル。古いので少し心配・・・
某A氏のMac情報
ちょっとググってみたところ「MacBookの平均寿命は4年」とのこと。・・・ぇ。
Flutter開発環境に必要となるシステム要件
公式ページに記載されていたシステム要件は以下の通りでした。(Mac版になります)
| 種別 | システム要件 |
|---|---|
| OS | MacOS |
| ディスク容量 | 2.8GB（IDEなどを除く） |
| ツール | Git、Xcode |
とりあえずはディスク容量に余裕があって、各ツールをインストールできれば大丈夫そうですね！
Flutterのインストール
まず初めに、FlutterのSDKをPCにインストールする必要があります。
ここから地味な環境構築作業を実際に行なっていきます。着実に進めていきましょう！
Flutterのダウンロード
以下のリンクからFlutter公式ページにアクセスして「Get the Flutter SDK」という箇所から自分のMacのCPUに合わせてFlutter SDKをダウンロードしてください。
Macの情報表示の画面でプロセッサの箇所を確認すればIntelなのか、Apple Siliconなのか分かります。
2015年モデルのMacbookはIntelでしたね。
ということで、僕は左側のIntel用のzipファイルをダウンロードしました。
Flutterの配置
ダウンロードしたFlutterのzipファイルを解凍して、任意のフォルダに格納しましょう！
公式のページを見るとコマンドでの実施方法が記載されていました。
cd ~/development
unzip ~/Downloads/flutter_macos_3.3.8-stable.zipコマンド操作に慣れている方は上記のようにコマンドで実行してもOKです！
ちなみにコマンドでやっていることは全然複雑なことをやっている訳ではなく、
- cd の行で「development」というディレクトリに移動
- unzipのコマンドで「development」内にダウンロードしたflutterのSDKを解凍して格納
ということをしているだけです！
コマンド操作が面倒だという方は、普通にコマンドを使用せずにFinderなどで作業してしまいましょう！
やりたいこととしては、
- ダウンロードしたzipファイルを解凍する
- 解凍したフォルダをわかりやすい階層に保存する。（後にPathを通したりするため）
これだけなので安心してください！
↓最終的にこんな感じに入っていれば大丈夫でしょう！
PATHの設定
そして次にPathの設定をし、その後に「flutter doctor」というコマンドを実行しなさいと公式ページにあります。
公式ページではまずお手軽にコマンドの実行を行うために一時的にPathの設定を以下のコマンドで実行しておりますが、これはあくまで一時的にしか反映されません。
export PATH="$PATH:`pwd`/flutter/bin"どちらにせよ設定しなくてはいけなくなるので、一時的な反映ではなく、ちゃんとPathの設定をしちゃいましょう！
(じつはMacでPathを通すのがちょっと面倒なので是非以下の手順をもとに設定してみてください)
シェルの確認
Macには「zsh」と「bash」の２種類のシェルがあるので、その種類によってPathの設定を書き込むファイルが異なります。
Macにはシェルが２種類あり！
- 「zsh」
- 「bash」
まずはシェルの確認からですね。
ターミナルを開いたら、以下のコマンドを実行してみてください。下のコマンドをコピペでOKですよ！
echo $SHELL（どちらにせよコマンド使うことになった・・・）
コマンドの実行結果によってシェルが判明します！
- 「/bin/zsh」だったあなた！→「zsh」
- 「/bin/bash」だったあなた！→「bash」
ちなみに僕の環境では「bash」でした。
シェルの種類がわかったということで、そのまま対象の設定ファイルをvimコマンドで編集しちゃいましょう！
「bash」だった方は以下のコマンドで！
vim .bash_profile「zsh」の場合は以下です！
vim .zshrc書き込む内容としては、「export PATH="$PATH:」に続いて、今回格納したFlutterのbinのPathを記述することになります。
以下のようになります。
export PATH="$PATH:[今回格納したFlutterのbinのPath]ユーザーフォルダの下に「development」フォルダを作って格納したという方が多いと思うので、以下のような感じなるかと！（{ユーザー名}の箇所は合わせて変更してください）
export PATH=$PATH:/Users/{ユーザー名}/development/flutter/bin記述を追加して保存したら、設定は完了です。ターミナルを再起動すればPathの設定が反映されているはずです。
flutter doctorの実行
おお、ここまで長かった・・・
それでは「flutter doctor」とかいうコマンドを実行できるか試してみましょう。
以下のコマンドを実行してみてください。
flutter doctor・・・どうでしょう。
とりあえずコマンドが認識されていれば、Pathの設定はOKです！
ここからflutter doctorの実行結果を確認しつつ、Xcodeのインストールなどが必要となりますが、とりあえず今日はここまでとしましょう。うん、よく頑張ったよ、おれ。
なんとかFlutterのコマンドが実行できるところまでは辿り着けました！
じょのさんも是非参考にして、構築してみてください！
おー。おつかれ！
でも最近Macの調子悪かったからWindowsで構築しようと思ってたんだよね。
だから、手順全然違うかも。
え・・・。
※WindowsではPathの設定方法など環境構築の方法が異なるので注意しましょう。
コメント