Flutterエンジニアのスキルロードマップを和訳しながら整理してみる

---
# :book: Flutterの記事を整理し本にしました :book:
https://zenn.dev/kazutxt/books/flutter_practice_introduction

* <font color="red"><b>本稿の記事を含む様々な記事を体系的に整理し本にまとめました</b></font>
* 今後はこちらを最新化するため、<font color="red"><b>最新情報はこちらをご確認ください</b></font>
* 20万文字を超える超大作になっています!!

---

## まとめ記事
* [Flutter系の記事のまとめ](https://qiita.com/kazutxt/items/524acb1c134015682ccf)

# はじめに
* Flutterエンジニアに必要なスキルや、俯瞰的なロードマップが整理されていますので、和訳と解説を加えて紹介します。
    * 最近あまり更新されてないかもです。。。
    * 解釈、和訳が違っていたらすみません。。。

# オリジナル
https://github.com/olexale/flutter_roadmap

2021/5月時点の最新版を利用しています。
また、このロードマップがすべてのスキルやツールを完全にカバーしているというわけではない点に注意してください。

# 解説
凡例は下記のようになっています
![pic10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/2e1a9d30-432a-7238-4daa-28fc248b86a7.png)

## Basic
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/9cfbc50a-60f3-a801-b843-88d82feb81c4.png)

### DevEnviroment
* AndroidStudio か VSCodeを使って、ショートカットやプラグインを活用すると良い
* 一部タスクはコマンドライン(FlutterCLI)を使うとよい
* 構成管理はGitが良い。コマンドでも良いがIDEのプラグインやFork/Sourcetreeを活用するべき

#### 補足
* [DartPad](https://dartpad.dev/?null_safety=true)はオンラインの環境です

### Language
* コードスタイルを維持することは重要だが、最初はスキップしてもよい。「EffectiveDart」を参考にすると良い。
* OOP(オブジェクト指向)やFunctional(関数型プログラミング)は、現時点ではシンプルにしておく

#### 補足
* [EffectiveDart](https://dart.dev/guides/language/effective-dart)


## Flutter 
![pic2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/f4df6ad8-89de-0036-18dc-413c9200058d.png)


### Basic Widgets
* youtubeの「Widget of the Week」を見て、マテリアルデザインに慣れてください

#### 補足
* [Flutter of the Week](https://www.youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG)
* [Flutter of the Weekの日本語まとめ](https://zenn.dev/kazutxt/books/flutter_practice_introduction/viewer/widgets)

### Core Design Patterns
* デザインパターンは言語とは別で普遍的なもので、アプリを構築するのにとても役立ちます
* 「GoF」は良い始点です。

#### 補足
* [デザインパターン/GoF(WikiPedia)](https://ja.wikipedia.org/wiki/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3_(%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2))


### Core Design Principles
* KISSやDRYは開発の基本スキルで、SOLIDの原則は、基盤になる
* 「Clean Code」by Uncle Bob　はあなたを助けるだろう
* "Provider","get_it"パッケージを活用するとよい


#### 補足
* [KISSの原則(Wikipedia)](https://ja.wikipedia.org/wiki/KISS%E3%81%AE%E5%8E%9F%E5%89%87)
* [DRY(Wikipedia)](https://ja.wikipedia.org/wiki/Don%27t_repeat_yourself)
* [SOLID(Wikipedia)](https://ja.wikipedia.org/wiki/SOLID)
* [CleanCode](http://cleancoder.com/products)
* [Provider(pub.dev)](https://pub.dev/packages/provider)
* [get_it(pub.dev)](https://pub.dev/packages/get_it)

### Networking
* フロントエンド-バックエンドの通信の魔法を理解することは重要
* コード生成時には、Chopper+json_serializableはあなたの親友になるでしょう

#### 補足
* [chopper(pub.dev)](https://pub.dev/packages/chopper)
* [json_serializable(pub.dev)](https://pub.dev/packages/json_serializable)

### Simple Persistence
* ほとんどのアプリではストレージが必要ですがビックデータほどは不要です。
* シンプルかつ基本的な永続性で十分です。
* ローカルストレージやその代替を検討してください。

## Getting Deeper
![pic3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/d0bbc613-b161-2239-bf87-71db1dae22cc.png)


### Database
* DBが課題になった場合には、成熟したソリューションやクラウドを使う

### Architecture
* 合意されたアーキテクチャをProviderを使って開発している場合は問題ありません。
* そうでなければReduxなどのアーキテクチャを意識したパターンに切り替えることをおすすめします

### Testing
* 最初にTDDで始め、その後BDDに切り替えることを推奨する
* cleancodeシリーズの「Test DrivenDevelopment by Example」は助けになるかもしれない

#### 補足
* [TDD(Wikipedia)](https://ja.wikipedia.org/wiki/%E3%83%86%E3%82%B9%E3%83%88%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA)
* [BDD(Wikipedia)](https://ja.wikipedia.org/wiki/%E3%83%93%E3%83%98%E3%82%A4%E3%83%93%E3%82%A2%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA)
* [CleanCode](http://cleancoder.com/products)


### Languages
* ネイティブモバイル開発を学ぶことは、プラットフォームをよりよく理解するために有益
* パーティのライブラリで問題が起きたり、独自プラグインを開発する時に気付く
* Android用のUdacityコースとiOS用のStanfordコースから始めましょう

### Dart
* sync/awaitの非同期を理解しましょう。
* モナドやステートレスを理解し、freezedを使ってみてください
* より詳しく理解ためにClosureやF#の基礎コースを受けるのをおすすめします

#### 補足
* [freezed(pub.dev)](https://pub.dev/packages/freezed)

### Package Manager
* パッケージを作るのは意外に簡単

### Profiling
* メモリリーク見つける方法を理解してください
* また、性能の問題を見つけることも大事です
* 「Flutter Europe」から始めましょう

#### 補足
* [Flutter Europe ](https://www.youtube.com/channel/UCOoJkGYV00nr3EpZOUeuN1Q/videos)

### Flutter Internals
* Widgetが実際にどのように描画されるかを学びます
* 「Flutterのレンダリングパイプライン」は開始に適しているはずです

#### 補足
* [Flutterのレンダリングパイプライン](https://www.youtube.com/watch?v=UUfXWzp0-DU)

## Almost there
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/102c226d-6fe7-755f-d449-a4f012e738d5.png)


### Continuous Integration
* 開発環境から直接ビルドデプロイしてはいけない。CodemagicなどのCIツールを使う。最悪でも開発マシンをCIノードにして利用する
* カバレッジやメトリクスもSonaerQubeなどを使う。FastLaneが特に重要

#### 補足
* [codemagic](https://codemagic.io/)
* [sonarqube](https://www.sonarqube.org/)
* [fastlane](https://fastlane.tools/)

### Analytics
* 分析無しで出荷ビルドするのは良くない
* Firebase/AppCenterは無料で使えるので、活用するとよい

#### 補足
* [Firebase](https://firebase.google.com/?hl=ja)
* [AppCenter](https://appcenter.ms/)

### Store
* モバイル開発者として、どのストアで何ができ、どのような合法的な提供ができるのかをクライントに責任を追うのを理解する

# 編集後記？

当然のことながらDartの構文だけ知っていても開発はできませんね
Widgetにどんな物があるのかを知っていることも重要で、なおかつ、開発手法としてCICDや自動化、テストも重要です。
もちろん、VSCodeやGitなどの開発環境といった共通的なものも欠かせません。