Help us understand the problem. What is going on with this article?

VSCodeでFlutterに触ってみる[環境構築][MAC]

はじめに

Qiita初投稿です。
Napps Creators Cafe Vol. 1に参加させて頂き、初めてflutterに触りました。
その当日に教えて頂いたこと、個人的にflutterの環境構築等で躓いたことを、備忘録的に書いていきたいと思います。

VSコードでとりあえずflutterを触ってみたい!という人にオススメの記事です。

この記事での目標

モバイルアプリ開発ではビルド時間が長いことによる生産性低下が問題になりがちですが、
FlutterではHot Reload/Restartによって基本的にビルドは初回のみで済みます。
開発環境・プロジェクト規模によって差はあるはずですが、短い時間でコードの変更がアプリに反映されます。

flutterならではの、[Hot Reload],サクサク開発の片鱗を体感することがゴールです。

Flutter SDKの設定

Flutterの公式サイトから
スクリーンショット 2019-12-09 1.35.48.png
SDKをダウンロードします。

スクリーンショット 2019-12-07 18.22.51.png
VSCodeではflutterでの開発を助けてくれる便利な拡張機能があります。
同時にInstallしておくことをオススメします。

DLしたファイルに対しての操作スクリーンショット 2019-12-09 1.37.47.png

上記は操作は、zipファイルを解凍する。
解凍したflutterファイルを通して、ターミナルでコマンドを入力できるようにする操作です。

躓きポイント①

以後、flutterファイルに対して、パスを通しておかないと
flutterから始まるコマンドが使えないので、DLしたファイルに対して、予めパスを通しておくことをオススメします。

Zsh 入門者のための超速設定ガイド
↑パスを通す?となる僕のような初学者向けの記事です。
macOS Catalina以降ではデフォルトのシェルがzshになっているので、非常に参考になります。。

躓きポイント② (create appできない)

公式サイトの手順に沿って進めると、
新規のアプリ制作のコマンドを入力する項目に辿り着きます。
スクリーンショット 2019-12-09 1.49.41.png

しかし、VSコードのターミナルにて
flutter create [my_app]しようとすると、
このようなエラーに直面します。
スクリーンショット 2019-12-09 2.03.32.png

簡単に説明すると、
Flutterで開発環境を作る際にダウンロードするファイルについて、安全性が保証できない。
安全性を確認できないと、進めないよ
という警告です。(macOS Catalina以前では確認できていないようです。)

結論から申し上げますと、こちらのコマンドで、エラーが詰まっている部分をスルーできます。
sudo xattr -d com.apple.quarantine /PATH_TO_YOUR_FLUTTER_HOME/bin/cache/artifacts/libimobiledevice/idevice_id

[ /PATH_TO_YOUR_FLUTTER_HOME/bin/ ]の部分はflutterファイルへのPATHを入力してください。

例えば、
VSCodeでflutterファイルを開いて、[ Commabd + J ]でターミナルを開き、
pwdをすることで確認できます。

参考にさせて頂いたサイト↓
“idevice_id”は、開発元を検証できないため開けません。への対処法

躓きポイント③ (Xcodeのエミュレーターが使えない)

エミュレーターは、デスクトップ上に、仮想の端末を用意して、挙動を確認するできる機能です。

スクリーンショット 2019-12-09 2.21.34.png

VScodeであれば、デバックを開始から、実機での開発環境をXcodeのエミュレーターを通して、使用することができます。

スクリーンショット 2019-12-09 2.23.49.png

しかし、
VScodeのメニュタブから、
Xcodeのエミュレーターが選択できない。(存在していない)状況に陥りました。

そこで、最初にやっておくべきコマンドがこちら

sudo xcode-select —switch /Applications/Xcode.app/Contents/Developer

このコマンドを実行することによって、
VScodeがXcodeのエミュレーターを認識するようになります。

エラーがないか確認する

flutter doctorをターミナルで入力します。
このコマンドの意味は、開発環境内での(VScode ⇄ Xcode ⇄ other..)依存関係に問題がないか確認できます。

「HOT ReRoad」を見てみよう。

少し分かりにくいかもしれませんが、該当部分を変更すると、
エミュレーター(実機のテスト環境)に、変更がすぐに適用されます。

Image from Gyazo

flutterは、
Hot Reload/Restartによって、実装と確認のフィードバックサイクルが極めて速い(ビルドで数十秒以上程度待たされることの多いネイティブ開発環境と比べて)ことが大きな強みのようです。

最後に

最初に興味を持つきっかけになった、先駆者様のサイトを紹介させて頂きます。
Flutter FAQ 🇯🇵

今回、アプリ開発初学者である私が、flutterを実際に触ってみるところまで、簡単に紹介させて頂きました。
どこから興味があるけど、どこから取っついていいか分からない!
という同じような初学者の方に少しでも参考になれば幸いです。
勉強会を開いて頂いた[Napps Creaters Cafe]様には、この場を借りて、感謝申し上げます。

Yono_dev
銃とパソコンが大好き!! はやくエンジニアになりた〜〜い!! 1996 / Fukuoka / frontend
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away