Flutterの効率良い学び方

“Spider-Man leaning on concrete brick while reading book” by Raj Eiamworakul on Unsplash

数ヶ月間Flutterに関する大量のインプットを行い、単純なアプリならサクッと、複雑なアプリでも都度調べながらなら慣れているiOSネイティブアプリ開発と比べても遜色ないレベルのものを普通に作れるであろう自信が出てきました。本記事では、自身の過去の取り組みを踏まえてFlutterを学ぶにはこういう道筋が良いだろうということを書いていきます。

まずはとにかく公式ドキュメント

Flutterのドキュメントは非常に良く整っています。

この公式ドキュメントトップページ左のメニューに載っているドキュメントは一通り読むと良いです。

英語力は最重要

この先に進む前に、Flutterを学ぶにあたっての英語力の重要性について少し補足です。Flutterの公式ドキュメントやその他、良記事・良動画の大半は英語情報です。

Flutterに限った話では無いですが、新し目の技術情報をキャッチアップするにはある程度以上の英語力が必須だと思っています。

  • 英語の技術文書をまあまあスラスラと読めること(機械翻訳などに一部頼っても良いかも)
  • 英語のセッション動画を大体理解できること(自動生成字幕などに一部頼っても良いかも)

Flutterの和書も発売予定ですが、ボリューム的に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.
https://flutter.io/get-started/editor/#vscode

Dartのドキュメントには以下のように書かれていて、例えばVim用のOSSプラグインとFlutter CLIを組み合わせて開発も可能です。

The following Dart plugins are unsupported and available as open source.
https://www.dartlang.org/tools

ただ、公式でサポート・推奨している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が提供した新し目のコースです。丁寧に作られた極めて良質な学習教材で、テンポ良く大事なことを凝縮して解説してくれています。

概要は実際のコースの目次や以下など見るとイメージ湧くかと思いますが、実際に取り組むのが大事です💪

レイアウトを体系的に学ぶ

チュートリアル系だと色々なレイアウトの仕方をなかなか体系的に学びにくいですが、レイアウトについて良くまとまった記事がいくつかあります。

特にこちらがオススメです:

また、以下も似たような内容で、かつサンプルコード・解説動画もセットになっていて素晴らしいです:

公式ドキュメントでは以下などで触れていて合わせて読むと良いと思います。


ここまで理解できれば、小規模なアプリなら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パターンについては、僕も以下のサンプル作ったりもしましたが、今後詳細な解説記事書きたいなと思っています。

上記のGoogle I/O 2018セッション観たついでに以下も観ておくと良いと思います。

特に後者のセッションは、Codelabに置いてあるものと同じ題材を扱っていて学習しやすいです。


ここまでやると、Flutterの全体感が掴めてきて、あとは何をどうやって学ぶべきか自分なりに取捨選択できるようになるのではと思います。


その他補足

その他、これまで触れてきた中で良かったと思ったコンテンツを紹介していきます。

Cookbook

公式ドキュメントのCookbookは直近で必要なくともとりあえずすべて目を通しておくと見通しが良くなってオススメです。知らずに遠回りしてしまうことを防げます。

冒頭で強調したように、これに限らず公式ドキュメントはどれも大事ですが、その中でもCookbookは一つ一つ読みやすくて初めの方に目を通すコンテンツとしてオススメです。

それぞれ末尾に Complete example としてmain.dartのコードが置かれていますが、手元のプロジェクトのmain.dartにコピペすればそのまま動いて動作見たり弄ったりもしやすいです。

Flutterソースに含まれるexamples

特にFlutter galleryのソースを読むことが多いですが、Flutter公式サンプルとしてとても参考になります。

Android版はGoogle Playストアにもリリースされているものの、iOSのApp Storeには無いですが、普通に手元でビルドしてインストールすればOKです。UI見てこの実装はどうなっているのだろう?と疑問に思ったらソース見たりしています。

アニメーション

次のスライドがとても良くまとまっています。

スライド末尾で紹介されている通り、記事としては次などが参考になります。

もう一歩踏み込んだ丁寧なUdemy動画教材

上で紹介したUdacity講座だけだと特に複雑なアプリはまだ厳しい感があるのと、そのあたりにも踏み込んだGoogle I/O動画は時間の制約上説明不足でそれだけでは十分理解できないところがあるはずです。

Udemyには高評価なFlutter動画がすでにたくさんあって、その中でも筆者が信頼できそうで目次も良さそうだったこちらの動画を観てみたらかなり良かったです。

特に、Reactive Programming・BLoCパターンなどに数時間かけて丁寧に解説されていて、僕の知る限りこの方面でもっとも丁寧な解説だなと思いました。

ただ、人によっては全体的に丁寧過ぎると感じられるかもしれないので、適宜飛ばしたり早送りしたりして分からないところを重点的に観た方が良いと思います。

フォローしておくと良いメディア

Flutterはまだまだ高速に進化し続けているフレームワークなので、ある程度キャッチアップを終えても継続的なキャッチアップが必要です(どの技術でもそうですが特に)。

公式Twitterアカウント

ここから公式アナウンスがなされるのでウォッチ必須です👀

GoogleはYouTube上での技術発信も盛んなものの、Flutterは個別に分かれておらずGoogle Developersアカウントに括られてしまっていますが、Flutter関連動画もこのTwitter公式アカウント経由でお知らせしてくれるので便利です。

大事な情報を過不足なく流してくれているので、あまり時間が取れない場合、このアカウントの流しているものに絞ってキャッチアップでも問題無いレベルかと思います。

Flutter Weekly

毎週Flutter Weeklyにて良記事をキュレーションして配信してくれています。

個人的には、 Twitterアカウントの @FlutterWk 経由で見て、さらに毎週日曜日夜くらいに配信されるメールもざっと眺めて見落としがあればさらにチェックしています。

RedditのFlutterDev

Flutterに関する色々な議論・雑談が繰り広げられています。タイトルが面白そうだったら本文見て、内容によってはコメントのやり取りまで読んでいます。

個人的には、主にTwitterアカウントの @r_FlutterDev で経由で見ています。

Flutter Discord Server

個人的には、ウォッチはしておらずどうしても質問したい時に利用するイメージです。慣れてきたら回答もしたいところです(時間との兼ね合い的になかなか難しいですが)。

#announcements は大事なアナウンスのみ配信されるので追いやすいです

上記で紹介しきれなかったもの含めてたくさんの良質なコンテンツにお世話になりながらFlutterキャッチアップしています。日本語情報はまだまだ少ないですが、Flutterの英語情報がこんなに多いということは海外ではかなり盛り上がってきているのかなと想像しています🤔


次は、DartでFlutterプロジェクトをより快適に書くにあたってのTips集書きたいなと思っています🐶