Flutterの効率良い学び方
数ヶ月間Flutterに関する大量のインプットを行い、単純なアプリならサクッと、複雑なアプリでも都度調べながらなら慣れているiOSネイティブアプリ開発と比べても遜色ないレベルのものを普通に作れるであろう自信が出てきました。本記事では、自身の過去の取り組みを踏まえてFlutterを学ぶにはこういう道筋が良いだろうということを書いていきます。
まずはとにかく公式ドキュメント
Flutter Widget Inspector How to use the widget inspector, a powerful tool that allows you to explore widget trees…flutter.io
Flutterのドキュメントは非常に良く整っています。
この公式ドキュメントトップページ左のメニューに載っているドキュメントは一通り読むと良いです。
英語力は最重要
この先に進む前に、Flutterを学ぶにあたっての英語力の重要性について少し補足です。Flutterの公式ドキュメントやその他、良記事・良動画の大半は英語情報です。
PHPカンファレンス福岡2018で『ソフトウェアエンジニアが英語に慣れ親しむ方法』というLTで登壇しました。その中でおすすめコンテンツというのを紹介しましたが、それについてもっと掘り下げたものを記事として書いていこうと思います。medium.com
Flutterに限った話では無いですが、新し目の技術情報をキャッチアップするにはある程度以上の英語力が必須だと思っています。
- 英語の技術文書をまあまあスラスラと読めること(機械翻訳などに一部頼っても良いかも)
- 英語のセッション動画を大体理解できること(自動生成字幕などに一部頼っても良いかも)
Flutterの和書も発売予定ですが、ボリューム的にFlutterの一部分しかカバーできないはずなので、やはり日本語情報だけでは現状明らかに不十分です。
Amazonで掌田津耶乃のAndroid/iOSクロス開発フレームワーク Flutter入門。アマゾンならポイント還元本が多数。掌田津耶乃作品ほか、お急ぎ便対象商品は当日お届けも可能。またAndroid/iOSクロス開発フレームワーク…www.amazon.co.jp
もう数年してFlutterが良い感じに普及・成熟すれば現状のiOS・Android開発程度には、日本語情報だけでもまあまあなんとかなる状況にはなるかもしれません(そうなっても新しい情報はみんな英語なので大事なことに変わりないですが)。
以下、話をFlutterに戻します。
Flutter開発環境セットアップ
以下のドキュメントに順に従うと、ほとんどハマることなくFlutterの開発環境が用意できるはずです。
Please select the operating system on which you are installing Flutter: Install on Windows Install on macOS Install on…flutter.io
開発環境にどこか不備があれば、flutter doctor で指摘されます。僕はAndroidアプリの開発環境未整備で、セットアップに時間はかかったものの手順通りにやるだけでハマることなくすんなり整いました🙆
IDEはAndroid StudioとVisual Studio Code(VSCode)のどちらが良いか
セットアップ手順の途中で、エディターの選択が求められます。
You can build apps with Flutter using any text editor combined with ourcommand-line tools. However, we recommend using…flutter.io
- Android Studio: A complete, integrated IDE experience for Flutter.
- VSCode: A light-weight editor with Flutter run and debug support.
Google的には「どちらもオススメ」というスタンスだと解釈していますし、個人の好みで選べば良いとは思いますが、僕は以下の使い分けをしています。
- 自分で開発する時: Android Studio
- サンプルなど他のプロジェクトコードを参照する時: VSCode
初めはどちらも試用した上でAndroid Studioの方が高機能なのでそちらに寄せようとしましたがいくつもプロジェクトを開くと重くなってきて取り回しも悪くなるので、自分でガリガリ書かないプロジェクトを開いてソースを読んだり実行して挙動探ったりする程度の時はVSCodeで済ませています。しばらくその使い分けを続けていて、とてもしっくり来ています。
Flutter のライブコーディング動画など見ても同じ人が気分や用途によって使い分けていたりしますし、とりあえずどちらも使ってみて使い分け法を探るのが良いのではと思います。
簡単なチュートリアルを終えた後はUdacityのコースがオススメ
そのままの流れでGet startedの4:Write your first appで簡単なチュートリアルを終えるはずですが、Write your first app を終えただけだと色々出てきたWidgetをどう使い分けしていけば良いのか分からず、Stateless/Stateful Widgetの違いがいまいちピンと来なかったりするレベルだと思います。
そんな中、5: Learn moreのページに行き着いて、いくつか提示されている選択肢の中から次はどうしようかと迷うはずです。
とりあえず、それまでのバックグランドに応じて、Flutter for XXXを読むと面白いと思います。個人的には Flutter for iOS はしっかりと読みました。
そして、Flutterでの開発力を上げるためには、色々良いコンテンツがあって迷うところですが、今ならUdacity online Flutter Training(無料)が良いと思っています。今年2018年のGoogle I/O明けくらいにGoogleが提供した新し目のコースです。丁寧に作られた極めて良質な学習教材で、テンポ良く大事なことを凝縮して解説してくれています。
Learn from experts at Google how to use Flutter to craft high-quality native interfaces on iOS and Android devices in…www.udacity.com
概要は実際のコースの目次や以下など見るとイメージ湧くかと思いますが、実際に取り組むのが大事です💪
Build Native Mobile Apps with Flutter 2週間でFlutterの基礎を学べるオンライン講座です。Google I/O 2018でのFlutter Beta 3の発表に合わせてUdacityの講座...qiita.com
Build Native Mobile Apps with Flutter 2週間でFlutterの基礎を学べるオンライン講座です。Google I/O 2018でのFlutter Beta…qiita.com
レイアウトを体系的に学ぶ
チュートリアル系だと色々なレイアウトの仕方をなかなか体系的に学びにくいですが、レイアウトについて良くまとまった記事がいくつかあります。
特にこちらがオススメです:
Do you need simple layout samples for Flutter?
I present you my set of Flutter layout code snippets. I will keep it…proandroiddev.com
また、以下も似たような内容で、かつサンプルコード・解説動画もセットになっていて素晴らしいです:
Today I’m sharing a demo app that I’ve built to show how to use the most common layouts in Flutter.medium.com
Super Useful Flutter Layouts - Right in Your Pocket. 😉 - bizz84/layout-demo-fluttergithub.com
公式ドキュメントでは以下などで触れていて合わせて読むと良いと思います。
ここまで理解できれば、小規模なアプリならFlutterでまあまあ書ける自信が付くと思います。
ある程度以上複雑なアプリをFlutterで作るには
状態管理の仕方として、公式ドキュメントやUdacityコースなどによくまとまっているのは setState() で素朴に書くパターンです。
ただ、それだけだとある程度以上複雑なアプリを書くのは厳しくなってきます。この解決策を示したセッションとして、今年2018年のGoogle I/OのBuild reactive mobile apps with Flutterが非常にオススメです。
主に以下のパターンで同じUI要件をそれぞれどのように解決していくかが説明されています。
setState()で素朴に- Scoped Model (Fuchsia でも用いられている)
- Business Logic Component(BLoC)パターン
- (Redux, 少し触れられた程度)
次のフォローアップ記事も合わせて読むと捗ります。
At Google I/O, Matt and I gave a talk about state management called Build reactive mobile apps in Flutter. If you…medium.com
BLoCパターンは、ReactiveX (Dartでは Streams + rxdart)の理解もセットで必要でそれがよく分からない場合はちょっと敷居高く感じられるはずです。
また、それぞれのパターンを用いたソースコードは以下にあって、僕もBLoCパターンなどの理解を深めようと、何度も参照しています。
Companion repository to the "Build reactive mobile apps in Flutter" talk - filiph/state_experimentsgithub.com
BLoCパターンについては、僕も以下のサンプル作ったりもしましたが、今後詳細な解説記事書きたいなと思っています。
WEB+DB PRESS Vol.106のAndroid・iOSアプリ設計のサンプルをFlutterではどう書くかというサンプル https://www.amazon.co.jp/dp/4774199435?tag=mono0926-22…github.com
上記のGoogle I/O 2018セッション観たついでに以下も観ておくと良いと思います。
特に後者のセッションは、Codelabに置いてあるものと同じ題材を扱っていて学習しやすいです。
ここまでやると、Flutterの全体感が掴めてきて、あとは何をどうやって学ぶべきか自分なりに取捨選択できるようになるのではと思います。
その他補足
その他、これまで触れてきた中で良かったと思ったコンテンツを紹介していきます。
Cookbook
公式ドキュメントのCookbookは直近で必要なくともとりあえずすべて目を通しておくと見通しが良くなってオススメです。知らずに遠回りしてしまうことを防げます。
This cookbook contains recipes that demonstrate how to solve common problems while writing Flutter apps. Each recipe is…flutter.io
冒頭で強調したように、これに限らず公式ドキュメントはどれも大事ですが、その中でもCookbookは一つ一つ読みやすくて初めの方に目を通すコンテンツとしてオススメです。
それぞれ末尾に Complete example としてmain.dartのコードが置かれていますが、手元のプロジェクトのmain.dartにコピペすればそのまま動いて動作見たり弄ったりもしやすいです。
Flutterソースに含まれるexamples
特にFlutter galleryのソースを読むことが多いですが、Flutter公式サンプルとしてとても参考になります。
Flutter makes it easy and fast to build beautiful mobile apps. - flutter/fluttergithub.com
Android版はGoogle Playストアにもリリースされているものの、iOSのApp Storeには無いですが、普通に手元でビルドしてインストールすればOKです。UI見てこの実装はどうなっているのだろう？と疑問に思ったらソース見たりしています。
アニメーション
次のスライドがとても良くまとまっています。
スライド末尾で紹介されている通り、記事としては次などが参考になります。
- https://flutter.io/tutorials/animation/
- https://flutter.io/animations/
- Zero to One with Flutter
- Zero to One with Flutter, Part Two
もう一歩踏み込んだ丁寧なUdemy動画教材
上で紹介したUdacity講座だけだと特に複雑なアプリはまだ厳しい感があるのと、そのあたりにも踏み込んだGoogle I/O動画は時間の制約上説明不足でそれだけでは十分理解できないところがあるはずです。
Udemyには高評価なFlutter動画がすでにたくさんあって、その中でも筆者が信頼できそうで目次も良さそうだったこちらの動画を観てみたらかなり良かったです。
Everything you need to know for building mobile apps with Flutter and Dart, including RxDart and Animations!www.udemy.com
特に、Reactive Programming・BLoCパターンなどに数時間かけて丁寧に解説されていて、僕の知る限りこの方面でもっとも丁寧な解説だなと思いました。
ただ、人によっては全体的に丁寧過ぎると感じられるかもしれないので、適宜飛ばしたり早送りしたりして分からないところを重点的に観た方が良いと思います。
フォローしておくと良いメディア
Flutterはまだまだ高速に進化し続けているフレームワークなので、ある程度キャッチアップを終えても継続的なキャッチアップが必要です(どの技術でもそうですが特に)。
公式Twitterアカウント
ここから公式アナウンスがなされるのでウォッチ必須です👀
The latest Tweets from Flutter (@flutterio). Google’s mobile app SDK for building beautiful native apps on iOS and…twitter.com
GoogleはYouTube上での技術発信も盛んなものの、Flutterは個別に分かれておらずGoogle Developersアカウントに括られてしまっていますが、Flutter関連動画もこのTwitter公式アカウント経由でお知らせしてくれるので便利です。
The Google Developers channel features talks from events, educational series, best practices, tips, and the latest…www.youtube.com
大事な情報を過不足なく流してくれているので、あまり時間が取れない場合、このアカウントの流しているものに絞ってキャッチアップでも問題無いレベルかと思います。
Flutter WeeklyのTwitterアカウント
The latest Tweets from Flutter Weekly (@FlutterWk). A weekly newsletter for flutter fans by flutter fans. Subscribe at…twitter.com
毎週Flutter Weeklyにて良記事をキュレーションして配信してくれていますが、その公式Twitterアカウントです。
＠r_FlutterDev
The latest Tweets from FlutterDev (@r_FlutterDev). New posts from r/FlutterDev, a subreddit about Google's new UI…twitter.com
RedditのFlutterDev
個人的には、Twitterで流れてきたリンク経由で見ています。
Flutter Discord Server
個人的には、ウォッチはしておらずどうしても質問したい時に利用するイメージです。慣れてきたら回答もしたいところです(時間との兼ね合い的になかなか難しいですが)。
MediumのFlutter公式Publication
Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time…medium.com
その他、Mediumで良記事が多く掲載されているPublication
上記で紹介しきれなかったもの含めてたくさんの良質なコンテンツにお世話になりながらFlutterキャッチアップしています。日本語情報はまだまだ少ないですが、Flutterの英語情報がこんなに多いということは海外ではかなり盛り上がってきているのかなと想像しています🤔
次は、DartでFlutterプロジェクトをより快適に書くにあたってのTips集書きたいなと思っています🐶
