Flutterを始めた人に読んでもらいたい勉強手順
対象となる読者
- これからFlutterの勉強を始める人
- ネットで断片的な情報を拾いながら勉強するのが苦手な人
- FlutterというToolkitの根本理解を目指す人
- 英語が苦手、公式ドキュメントを読むのに挫折した人
対象でない読者
- メンター等、周りに勉強の仕方を教えてくれる人がいる人(その人に従うのが一番です)
- Flutterにはあまり興味ないけどとにかくアプリは作りたい！という考えの人
- とにかくアプリ作りたい！アプリの作り方教えて！精神の人
- 公式ドキュメントの内容やネットの情報を自ら吸収できる人
なぜこの記事を書いたのか
Flutter初心者の方が迷子にならないような道しるべが必要だと思ったからです。
僕もFlutterを触り始めて4ヶ月の初心者ですが、まだ4ヶ月しか経っていないからこそ最初に躓いたことや、どういう勉強が役に立ったか記憶が鮮明に残っています。
まだFlutter初心者の目線が残っている今のうちに記事にしておきたいと思いました。
また、Flutter初心者の方に最初からProvider/Riverpod(←高機能なラッパーライブラリ、初心者向きでない)を勧めたりする方も一定数いるようで、書き方のイメージを掴むという意味では良いと思いますが、Flutterの理解を逆に難しくしているように感じます。
さらに、僕がFlutterの勉強をし始めたときに見つけた(数年前のツイート等)かなり有益な情報に辿り着けない方が出てくるのも勿体ないと思ったからです。
Flutterを正しく理解してこそ、楽しくアプリ開発ができるようになると思っています。
勉強手順について
僕が思う、効率が良い勉強の手順はこうです。
1. 「基礎から学ぶFlutter」を読み、体系的な知識を日本語で身に付ける
まずは体系的な知識を獲得するのが良いと思っています。
Flutterは日本でも普及しつつありますが、ドキュメントや有益な情報は英語で書かれていることがほとんどです。
しかし、日本語でも体系的な知識を身に付けられる書籍が少なからずあります。
何冊か読んだ中で、僕のおすすめは「基礎から学ぶFlutter」です。
この本を読み進めるときの心得は、「一回で全てを理解するのは諦める」、「挫折する前に本を閉じる」です。
かなりページ数も多い本ですし、Flutterの内部構造まで事細かに書かれていますが、初心者には流石に難しい内容が多いです。まずはこの本の内容を全て理解しようとせずに、「広く浅い知識」を獲得することを目指しましょう。
逆に(上記の心得は前提にした上で)、じっくり読んでもらいたい章をピックアップしておきます。
- CHAPTER 01スタートガイド
- CHAPTER 02Dart
- CHAPTER 03ウィジェット
- CHAPTER 07アーキテクチャ
特に、CHAPTER 03のウィジェットに関しては、全ウィジェットの8割程度をカバーされているそうなので、暗記はせずにさらっとどういうものがあるか目を通すのはおすすめです。
CHAPTER 07のアーキテクチャは、Flutter初心者を脱したときに活きてくる内容になっています。
写経して自分の環境で動かしてみましょう。
特に、この章で紹介されているsetStateやinheritedWidgetは、今後使うことになるであろうProvider/Riverpodを正しく理解する上でかなり大事です。
一つ注意点として、この本の著者はソースコードを写経されるのを想定されていなかったようで、一部端折られている所があります。
その部分に関しては、Githubにソースコードをアップして下さっているので、そちらを参考に動かしてみるのが良いと思います。
2. StatefulWidget/setStateでアプリを作る、Dartの文法を並行して勉強する
ここからは、1. の「基礎から学ぶFlutter」を読み終えたこと(StatefulWidgetが何のことか分かる)を想定して書きます。
まずFlutter初心者の方に理解してもらいたいのが、StatefulWidgetだけで充分良いアプリが作れるということです。
参考までに、このリンク先のチャットアプリはStatefulWidget/setStateで作られています。
まずアプリを作りたい！という考えの方も、最初はStatefulWidgetベタ書きでアプリリリースまで持っていく、という選択肢はかなりアリだと思っています。
また、最初に作るアプリはあくまでも練習だと思って、規模の小さいものを考えましょう(TODOアプリやメモアプリなど？)。
この時に、アプリを作るのと並行してDartの文法をしっかり勉強するのが大事だと思っています。
Dartはかなり丁寧な公式ドキュメントが用意されており、その中でもA tour of the Dart languageはかなりおすすめです。
内容は全て英語ですが、かなり読みやすい方だと思います(分からない箇所だけ翻訳しながら読んでもいいです)。
最も大事なのは、手を動かしながら読み進めることです。
かなり雑ですが、僕はこのドキュメントを読み進めながらこんなコードを書いて一つ一つ動作を確かめました。
3. Flutter状態管理フローチャートに従う
こちらのツイートは2019年のものですが、これから勉強を始める方もこのフローチャート通りに進めるのがFlutterの根本理解に繋がる近道だと思います。
この情報はGoogleで検索してもたどり着きにくい(ここで紹介されている)かつ数年前のツイートなので、Twitterで検索しても中々出てこなかったのですが、Flutterの勉強手順の全てがここに詰まっていると言ってもいい程、正しい順番だと思っています。
このフローチャート通りの順番に各ウィジェットに触れていくことで、後述するProviderの理解もスムーズにできると思っています。
絶対にStatefulWidget/setStateやInheritedWidgetを使ってアプリをリリースまで持っていった方が良い、とまでは言いませんが、最低限手元で動かせる簡単なアプリを作ってみるのはとても勉強になります。
Providerを使う所まで到達できた方はFlutterがどういうものか、何となく理解してきたはずです。
4. に進みましょう。
4. UIと機能を分離することを意識する
Flutterは宣言的にUIを構築できて楽な反面、機能を分離することを意識しないと煩雑なコードになってしまいます。
Providerの勉強を始めるのと合わせて、UIと機能を分離することを意識しましょう。
また、UIと機能を分離することは、良いコード設計を意識するということです。
Flutterで良いコードを設計する上で参考になるのが、Dart/Flutterでドメイン駆動設計（DDD）してみた、という記事です。
この記事ではドメイン駆動設計+オニオンアーキテクチャをFlutterにどう落とし込むかについて解説されています。
またこの記事で扱われているソースコードは、Provider/ChangeNotifierで実装されているため、Providerの勉強をする上でも大変参考になります。
もちろん、良いコードの設計手法はドメイン駆動設計以外にも沢山ありますが、それらの手法を実際にFlutterに落とし込んで解説されている記事は貴重なので、まずはドメイン駆動設計でFlutterの綺麗なコードが書ける感覚を掴むのを皮切りに、様々なアーキテクチャや設計手法を探ってみるのがいいと思います。
ちなみに、この記事内でも参考にされている書籍やサイト等が紹介されていますが、それらのうち僕は
を先に全て読んだことで、躓くことなく読み進められました。
最後に
まだまだ加筆が必要であったり、もっと初心者の方に寄り添った内容にしないと...と思う箇所も多々ありますが、まずは先に公開してから随時更新していく形式にしようと思っています。
長々と書きましたが、「Flutterのこういう所が分からない」、「こんな手順の方がいいんじゃない？」等、質問やご意見をいただけると有り難いです。
Discussion
本当に私自身そう実感しております。。
コメントありがとうございます。
Providerを何となくで使えたとしても、それはただ理解を後回しにしているだけで、結局InheritedWidgetやStatefulWidget/setStateが分からない状態だとどこかで詰まると思うんですよね...
逆にInheritedWidgetを理解してからだと、Providerの動きのイメージが掴みやすいのになぁ...とも思います。