Flutter でアプリ開発ができるようになるまでに勉強したこと・現在ウォッチしている情報一覧

# はじめに
こんにちは！[やまたつ](https://twitter.com/yamatatsu109_ja)です！
去年の12月から Flutter の勉強を始めて今年の3月からFlutterでのアプリ開発を任されるようになりました。
その過程でどのような教材を使用したのか、どのように学んでいったのかをシェアして、Flutterをこれから学びたいと思っている方の手助けになれたら良いなと思ってこの記事を執筆しております！
また、現在 Flutter の技術をキャッチアップするために使用している記事なども紹介いたします。
最後の方に、実際に Flutter で開発をしてみての感想の記事を記載しています。



# Flutter の案件を任されるようになるまでにやったこと

以下の手順で Flutter の案件を任されるようになりました！

1. Udemy で Flutter に関する教材を見て、実際に手を動かしながらコードを書く
2. 日本語記事で学ぶ
3. Flutter でアプリ開発できることと、プロジェクトに Flutter を採用すると良いことをアピールして案件を獲得する

まずは Udemy でFlutterでどのようにアプリを作成するかと、最低限の知識を学びました。
次に、mono さんの日本語の記事（後ほどリンクを貼っています）で、理解を深めます。
最後に、 Flutter アプリの採用例や、技術的にどのようなことができてできないかを洗い出して、技術選定の際に Flutter を推していくことで Flutter の案件を任されるようになりました！

Flutter を採用する際に、参考にした記事は以下になります。

- [Flutterとは 何なのか 〜できること、できないこと｜へぶん🦌｜note](https://note.com/heavenosk/n/n245b72973600)
- [Android開発はFlutterでやる方がいい説 - Qiita](https://qiita.com/ko2ic/items/b07d3ec73513c1bd8ba6)
- アプリの例： [Showcase - Flutter](https://flutter.dev/showcase)

# Udemy で購入した教材一覧

![Screen Shot 2020-12-24 at 17.46.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326574/23f5f2c4-e325-c036-77b1-81f2614ff48d.png)


上記の8つの教材を購入しました。
購入して良かった順になっていて、どのようなところが参考になったかを書いていきます！


### 1. [The Complete 2020 Flutter Development Bootcamp with Dart | Udemy](https://www.udemy.com/course/flutter-bootcamp-with-dart/)

最も参考になった教材です。もし Flutter の Udemy 教材の購入を検討しているのなら、この教材で間違いないと思います！
この教材だけで初学者に必要なことは大体理解でき、Widget をどのように組むか、Dart言語の書き方、シンプルなアーキテクチャを学ぶことができます。
私は英語の聞き取りが苦手だったので、英語教材を購入するのを躊躇していましたが、講師の方がかなりゆっくりめに、はっきりと話してくれるので理解しやすいです。
また、IDE のショートカットも丁寧に教えてくれたり、Flutter開発での Tips を知ることもできます。
この教材を通して、簡単なUIなら組めるようになりました。

### 2. [The Complete Flutter UI Masterclass | iOS, Android, & Web | Udemy](https://www.udemy.com/course/the-complete-flutter-ui-masterclass/)

この教材では以下の画像のアプリを作成していきます。
凝ったUIをどのように作成するかを理解することができ、UIの勉強として最も有効な教材です！


|Budget App|Social Media App|Food Delivery App|
|---|---|---|
|![Screen Shot 2020-12-24 at 17.28.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326574/fd6d6b67-22e5-f74c-5350-c01f5385d125.png)|![Screen Shot 2020-12-24 at 17.28.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326574/c686d657-d60c-13ac-6b5f-80d66ec108bb.png)|![Screen Shot 2020-12-24 at 17.28.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326574/24b66a61-8ae5-d970-f233-8b02a09eae41.png)|



### 3. [Flutter & Firebase: Build a Complete App for iOS & Android | Udemy](https://www.udemy.com/course/flutter-firebase-build-a-complete-app-for-ios-android/)

中級者向けです！
アーキテクチャは BLoC や ChangeNotifier を利用しています。BLoC と ChangeNotifier を使ったアーキテクチャの違いも学ぶことができます。
最初に見たときは少し難しかったのですが、見返すと整理されたコードで分かりやすかったです。
Firebase を使用しているので、Firebase の導入を検討している人にもおすすめです！


### 4. [Flutter REST API Crash Course: Build a Coronavirus App | Udemy](https://www.udemy.com/course/flutter-rest-api-crash-course-build-a-coronavirus-app/)

API通信をするクラスをどのように作成するかや、API通信時のエラーハンドリングをどうするかを学ぶことができました！
より実践的な内容で、実務と同じレベルでコードが書かれていると思います。


### 5. [Flutter + SQFLite | Build a Local Storage iOS & Android App | Udemy](https://www.udemy.com/course/draft/2588128/learn/lecture/16439012#overview)

SQFLite をどのように扱うかを学ぶことができました！
プロジェクトをダウンロードして、SQFLite を使った CRUD をそのまま自分のプロジェクトに入れることができるので便利です。



### 6. [The Complete Dart Language Guide for Beginners and Beyond | Udemy](https://www.udemy.com/course/complete-dart-guide/)

Dart 言語をより深く学ぶために購入しました。
高次関数だったり、Dart言語特有の書き方を学べます。


### 7. [Flutter & Dart - The Complete Guide [2021 Edition] | Udemy](https://www.udemy.com/course/learn-flutter-dart-to-build-ios-android-apps/)

Provider を使ったアーキテクチャのために購入しました！
Provider の理解は深まりました。

### 8. [Dart and Flutter: The Complete Developer's Guide | Udemy](https://www.udemy.com/course/dart-and-flutter-the-complete-developers-guide/)

BloC のアーキテクチャの勉強のために購入しました！
他の教材とほぼ一緒のような内容だったので、プロジェクトだけダウンロードしてさらっと見ただけです。




# Youtube

### [Code With Andrea - YouTube](https://www.youtube.com/channel/UCrTnsT4OYZ53l0QGKqLeD5Q)
Udemy の教材でお馴染みの Andrea さんの Youtube です。
Udemy を購入前にお試しで見てみるのもありです。(Youtubeに全て公開されているかも？）
Slack コミュニティもあります。

### [FilledStacks - YouTube](https://www.youtube.com/channel/UC2d0BYlqQCdF9lJfydl_02Q)
記事も公開されているし、Slackコミュニティもあります。
分かりやすい記事が多いです。


### [Reso Coder - YouTube](https://www.youtube.com/channel/UCSIvrn68cUk8CS8MbtBmBkA)
記事も公開されているので、 Youtube と記事でより深く学ぶことができます。
中・上級者向けの内容もあります。


### [Marcus Ng - YouTube](https://www.youtube.com/channel/UC6Dy0rQ6zDnQuHQ1EeErGUA)
一つのアプリを作っていく過程を見ることができるのでおすすめです！



# 記事
### [Flutter 🇯🇵 – Medium](https://medium.com/flutter-jp)
[monoさん](https://twitter.com/_mono) が書いている記事です。
開発に役立つことが盛りだくさんです。読んだら claps!!!

以下の記事は必見です。

- [Flutterの効率良い学び方. 数ヶ月間Flutterに関する大量のインプットを行い、単純なアプリならサクッと、… | by mono  | Flutter 🇯🇵 | Medium](https://medium.com/flutter-jp/flutter-learning-c5640c5f05b9)
- [Flutterでの開発をスムーズに行うためのTips集. 以下のドキュメントにかぶる内容も含まれていますが、僕が良いなと思っているやり方を… | by mono  | Flutter 🇯🇵 | Medium](https://medium.com/flutter-jp/tips-b2487a63a8)
- [Flutterの状態管理手法の選定. Flutterの状態管理周りの手法はちょくちょく動きがあって、それに関する話題が… | by mono  | Flutter 🇯🇵 | Medium](https://medium.com/flutter-jp/state-1daa7fd66b94)

### [ntaoo – Medium](https://medium.com/@ntaoo)
[ntaooさん](https://twitter.com/ntaoo)の記事です。
Flutter 公式のドキュメントやいろんな人の発信がまとまっています。
読んだら claps!!!

### [Flutter | 技術は熱いうちに打て！](https://blog.dalt.me/category/flutter)
[ashdikさん](https://twitter.com/daiki1003) が書いている記事です。
発信がまとまってたり、実際に ashdik さんが書いたコードなどが記載されていて参考にさせていただいております！

### [Mobile App Development Tutorials - FilledStacks](https://www.filledstacks.com/)

Youtube にもあった FilledStack さんの記事です！

### [Reso Coder - Flutter & Dart App Development Tutorials](https://resocoder.com/)

同じく、 Youtube にもあった Reso Coder さんの記事です！


# Twitter

### [Flutterリスト](https://twitter.com/i/lists/1258957052145106949?s=20)
Flutter の情報を発信している方を主にフォローしてリストにしています！
フォローしている方がいろんな情報を発信しているので、ここだけで新しい技術のキャッチアップができるかもしれません。



# GitHub のリポジトリ

### [wasabeef/flutter-architecture-blueprints: Flutter Architecture Blueprints is a project that introduces MVVM architecture and project structure approaches to developing Flutter apps.](https://github.com/wasabeef/flutter-architecture-blueprints)

Provider を使って MVVM のアーキテクチャを実装するときにとても参考になります！

### [toly1994328/FlutterUnit: 【Flutter 集录指南 App】The unity of flutter, The unity of coder.](https://github.com/toly1994328/FlutterUnit)

Flutterのコンポーネントを画像と動画付きで見ることができるプロジェクトです。
クローンして手元で動かすと勉強になるのではないでしょうか。
コンポーネントを覚えるのに良さそうで、どんなふうに実装するかなども分かります。
プライオリティ順に並んでいるのも良いです！

### [mono0926/flutter_playground](https://github.com/mono0926/flutter_playground)

Provider の実装を確認することができます！
おすすめです。


# Flutter をこれから学ぶ方の最短の学習ルート

自分が思う Flutter の最短の学習ルートです！
自分が今から学習するなら以下のようにやるかなと思っています！

1. [Flutterの効率良い学び方| by mono  ](https://medium.com/flutter-jp/flutter-learning-c5640c5f05b9)を読む
2. [The Complete 2020 Flutter Development Bootcamp with Dart | Udemy](https://www.udemy.com/course/flutter-bootcamp-with-dart/) を一通り学習する。コードも書く。
3. [Flutterでの開発をスムーズに行うためのTips集| by mono ](https://medium.com/flutter-jp/tips-b2487a63a8) を読んでFlutterでの開発を効率化する
4. [Flutter:Widget一覧 - Qiita](https://qiita.com/matsukatsu/items/e289e30231fffb1e4502) でどんな widget があるかを知る
5. Udemy や Youtube や記事で自分の目的に合ったアプリ開発を学ぶ or 実際に自分のプロダクトを作成する
6. Flutter案件を獲得しにいく！


# 実際に Flutter でアプリ開発した感想

自分が Flutter でアプリ開発をして感じたことや、どのようなアーキテクチャにしたかを記述しています！

[【Flutter入門】100画面を超える規模のアプリを開発してみた感想](https://pentagon.tokyo/app/2937/)



# 最後に

今までで参考になった記事や学習してきた教材を記述してきました！
この記事が Flutter で開発する方の役に立つと嬉しいです。
実際に Flutter で開発している現場に入ることが、最も早く Flutter のアプリ開発を学べる最短ルートなので、ある程度できるようになったら案件を探してみるのが良いと思います！

長文でしたが読んでいただきありがとうございました！参考になりましたら、LGTMお願いいたします！
良かったら [Twitterのフォロー](https://twitter.com/yamatatsu109_ja) もお願いいたします。
ありがとうございました！