Flutterの効率良い学び方
数ヶ月間Flutterに関する大量のインプットを行い、単純なアプリならサクッと、複雑なアプリでも都度調べながらなら慣れているiOSネイティブアプリ開発と比べても遜色ないレベルのものを普通に作れるであろう自信が出てきました。本記事では、自身の過去の取り組みを踏まえてFlutterを学ぶにはこういう道筋が良いだろうということを書いていきます。
まずはとにかく公式ドキュメント
Flutterのドキュメントは非常に良く整っています。
この公式ドキュメントトップページ左のメニューに載っているドキュメントは一通り読むと良いです。
英語力は最重要
この先に進む前に、Flutterを学ぶにあたっての英語力の重要性について少し補足です。Flutterの公式ドキュメントやその他、良記事・良動画の大半は英語情報です。
Flutterに限った話では無いですが、新し目の技術情報をキャッチアップするにはある程度以上の英語力が必須だと思っています。
- 英語の技術文書をまあまあスラスラと読めること(機械翻訳などに一部頼っても良いかも)
- 英語のセッション動画を大体理解できること(自動生成字幕などに一部頼っても良いかも)
Flutterの和書も発売予定ですが、ボリューム的にFlutterの一部分しかカバーできないはずなので、やはり日本語情報だけでは現状明らかに不十分です。
[2020/02/11 追記] 和書も増えてきました
現時点で、商業出版されているFlutter和書としてはさらに以下が増えました。
特に前者は、献本していただきレビューも書きました。
ただ、内容の充実度・正確性・情報の新しさ・表現力(図・動画など)、どれをとっても公式情報(+質の高いネット記事・動画講座など)の方が優れているので、どうしても日本語情報に頼りたい、という場合以外は個人的にはあまりお勧めしません(逆に言うと得意な日本語でざっくり雰囲気掴みたいなどの場合には良いと思います)。
もう数年してFlutterが良い感じに普及・成熟すれば現状のiOS・Android開発程度には、日本語情報だけでもまあまあなんとかなる状況にはなるかもしれません(そうなっても新しい情報はみんな英語なので大事なことに変わりないですが)。
以下、話をFlutterに戻します。
Flutter開発環境セットアップ
以下のドキュメントに順に従うと、ほとんどハマることなくFlutterの開発環境が用意できるはずです。
開発環境にどこか不備があれば、flutter doctor で指摘されます。僕はAndroidアプリの開発環境未整備で、セットアップに時間はかかったものの手順通りにやるだけでハマることなくすんなり整いました🙆
IDEはAndroid StudioとVisual Studio Code(VSCode)のどちらが良いか
セットアップ手順の途中で、エディターの選択が求められます。
- 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 のライブコーディング動画など見ても同じ人が気分や用途によって使い分けていたりしますし、とりあえずどちらも使ってみて使い分け法を探るのが良いのではと思います。
それ以外のエディターの選択肢
エディタ縛られるのは邪悪 #Vimmer というコメントを見かけたので補足すると、Android Studio・VSCode以外の好きなエディターで開発することもできます。公式ドキュメントでもあくまでこれら2つのエディターは推奨として書かれています。
You can build apps with Flutter using any text editor combined with our command-line tools. However, we recommend using one of our editor plugins for an even better experience. With our editor plugins, you get code completion, syntax highlighting, widget editing assists, run & debug support, and more.
Dartのドキュメントには以下のように書かれていて、例えばVim用のOSSプラグインとFlutter CLIを組み合わせて開発も可能です。
The following Dart plugins are unsupported and available as open source.
ただ、公式でサポート・推奨しているAndroid Studio・VSCodeから選んだ方が基本的にスムーズだとは思います。
簡単なチュートリアルを終えた後は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が提供した新し目のコースです。丁寧に作られた極めて良質な学習教材で、テンポ良く大事なことを凝縮して解説してくれています。
概要は実際のコースの目次や以下など見るとイメージ湧くかと思いますが、実際に取り組むのが大事です💪
[2020/02/11 追記] 次の動画講座も良さそうです
上のUdacityのコースよりも後にできた次のコースも良さそうです。色々学習済みの今の自分にとって得るものがやや少なそうと思って実際に取り組んでないので責任を持って勧めるのが難しいですが、Flutterチーム製作で評判の良いコースなので間違いなさそうです。
以下もUdemyのコースとほぼ同内容のようなので、Udemyでセール価格でなければこちらでも良さそうです。
先に紹介したUdemyのコースの上位互換では無さそうですが、その後に取り組むのも、あるいはこちらだけというのもどちらもありだと思います。
レイアウトを体系的に学ぶ
チュートリアル系だと色々なレイアウトの仕方をなかなか体系的に学びにくいですが、レイアウトについて良くまとまった記事がいくつかあります。
特にこちらがオススメです:
また、以下も似たような内容で、かつサンプルコード・解説動画もセットになっていて素晴らしいです:
公式ドキュメントでは以下などで触れていて合わせて読むと良いと思います。
ここまで理解できれば、小規模なアプリならFlutterでまあまあ書ける自信が付くと思います。
ある程度以上複雑なアプリをFlutterで作るには
状態管理の仕方として、公式ドキュメントやUdacityコースなどによくまとまっているのは setState() で素朴に書くパターンです。
ただ、それだけだとある程度以上複雑なアプリを書くのは厳しくなってきます。この解決策を示したセッションとして、今年2018年のGoogle I/OのBuild reactive mobile apps with Flutterが非常にオススメです。
主に以下のパターンで同じUI要件をそれぞれどのように解決していくかが説明されています。
setState()で素朴に- Scoped Model (Fuchsia でも用いられている)
- Business Logic Component(BLoC)パターン
- (Redux, 少し触れられた程度)
次のフォローアップ記事も合わせて読むと捗ります。
BLoCパターンは、ReactiveX (Dartでは Streams + rxdart)の理解もセットで必要でそれがよく分からない場合はちょっと敷居高く感じられるはずです。
また、それぞれのパターンを用いたソースコードは以下にあって、僕もBLoCパターンなどの理解を深めようと、何度も参照しています。
BLoCパターンについては、僕も以下のサンプル作ったり、個人的にかなり悩んだBLoC Providerについての記事を書きました。
上記のGoogle I/O 2018セッション観たついでに以下も観ておくと良いと思います。
特に後者のセッションは、Codelabに置いてあるものと同じ題材を扱っていて学習しやすいです。
ここまでやると、Flutterの全体感が掴めてきて、あとは何をどうやって学ぶべきか自分なりに取捨選択できるようになるのではと思います。
[2020/02/11 追記] BLoCよりもまずはprovider + ChangeNotifierなどを用いたパターンがまずお勧め
経緯などは FlutterのBLoC(Business Logic Component)のライフサイクルを正確に管理して提供するProviderパッケージの解説 の冒頭にも追記しましたが、現在ではprovider + ChangeNotifierなどを用いたパターンがまずお勧めです(おそらく今後当分これが基本パターンとして定着するかと思います)。
詳しくは、以下など参考にしてください。
providerを適切に扱うためには、それが内部的に利用しているInheritedWidgetの理解も重要です。
そして、最近はstate_notifier がとてもお勧めです。
また新しい別物ができたというより、immutableなstateでカチッと書くという、provider + ChangeNotifierの延長線上のイメージです。
その他補足
その他、これまで触れてきた中で良かったと思ったコンテンツを紹介していきます。
Cookbook
公式ドキュメントのCookbookは直近で必要なくともとりあえずすべて目を通しておくと見通しが良くなってオススメです。知らずに遠回りしてしまうことを防げます。
冒頭で強調したように、これに限らず公式ドキュメントはどれも大事ですが、その中でもCookbookは一つ一つ読みやすくて初めの方に目を通すコンテンツとしてオススメです。
それぞれ末尾に Complete example としてmain.dartのコードが置かれていますが、手元のプロジェクトのmain.dartにコピペすればそのまま動いて動作見たり弄ったりもしやすいです。
Flutterソースに含まれるexamples
特にFlutter galleryのソースを読むことが多いですが、Flutter公式サンプルとしてとても参考になります。
Android版はGoogle Playストアにもリリースされているものの、iOSのApp Storeには無いですが、普通に手元でビルドしてインストールすればOKです。UI見てこの実装はどうなっているのだろう？と疑問に思ったらソース見たりしています。
[2020/02/11 追記] flutter/samples リポジトリの方が活発
現在では、2018年6月に追加されたflutter/samples リポジトリの方がサンプルが充実してきて、メンテナンスも積極的に行われています。
ざっくり、以下のような棲み分けがされているように感じています🧐
- Flutter本体に含まれるexamples: master最新の変更に合わせた検証用途
- flutter/samples: 一般向けのサンプル
アニメーション
次のスライドがとても良くまとまっています。
スライド末尾で紹介されている通り、記事としては次などが参考になります。
- https://flutter.io/tutorials/animation/
- https://flutter.io/animations/
- Zero to One with Flutter
- Zero to One with Flutter, Part Two
ただ、そちらで紹介されているのはカスタムアニメーション中心ですが、次のようなよりお手軽な既存のアニメーションWidgetで済む場合も多いです。
フォローしておくと良いメディア
Flutterはまだまだ高速に進化し続けているフレームワークなので、ある程度キャッチアップを終えても継続的なキャッチアップが必要です(どの技術でもそうですが特に)。
https://flutter.dev/community に一覧されていますが、僕が特にウォッチしているものを紹介します。
公式Twitterアカウント
ここから公式アナウンスがなされるのでウォッチ必須です👀
大事な情報を過不足なく流してくれているので、あまり時間が取れない場合、このアカウントの流しているものに絞ってキャッチアップでも問題無いレベルかと思います。
YouTubeのFlutterチャンネル
GoogleはYouTube上での技術発信も盛んで、その質・量ともに素晴らしいです。
2019年2月22日以前の動画はこちらGoogle Developersチャンネルにて配信されていて Flutterプレイリスト などにまとめられていましたが、それ以降は新設されたFlutterチャンネルにて配信されています。Firebaseチャンネルなどと同様の扱いになって、Flutterに力が入れられている感じが伝わってきます🐶
Flutter Weekly
毎週Flutter Weeklyにて良記事をキュレーションして配信してくれています。
個人的には、 Twitterアカウントの ＠FlutterWk 経由で見て、さらに毎週日曜日夜くらいに配信されるメールもざっと眺めて見落としがあればさらにチェックしています。
RedditのFlutterDev
Flutterに関する色々な議論・雑談が繰り広げられています。タイトルが面白そうだったら本文見て、内容によってはコメントのやり取りまで読んでいます。
個人的には、主にTwitterアカウントの ＠r_FlutterDev で経由で見ています。
Flutter Discord Server
個人的には、ウォッチはしておらずどうしても質問したい時に利用するイメージです。慣れてきたら回答もしたいところです(時間との兼ね合い的になかなか難しいですが)。
MediumのFlutter公式Publication
その他、Mediumで良記事が多く掲載されているPublication
上記で紹介しきれなかったもの含めてたくさんの良質なコンテンツにお世話になりながらFlutterキャッチアップしています。日本語情報はまだまだ少ないですが、Flutterの英語情報がこんなに多いということは海外ではかなり盛り上がってきているのかなと想像しています🤔
本記事ではFlutterを体系的に学ぶおすすめの流れを書きましたが、具体的なTipsについて知りたい場合はこちらご覧ください:
