iOS経験者がFlutterをキャッチアップするためにやったこと


# はじめに
本記事は、社内向けに作成したFlutterキャッチアップのためのリンク集をまとめ直したものになります。
自己流の観点が多く含まれているため、そちらを留意した上でお読みください。

人により得意なキャッチアップ方法が異なると思いますので、一例として誰かの参考になりましたら幸いです。

## 記事の対象者
iOS/Swiftをある程度触ったことがあり、Flutterの勉強を始めようと考えている人。

※私はiOSを約2年業務で担当していた状態からFlutterを始めました。
# やったこと
1. SwiftとDartの言語的な違い・Dartの雰囲気をざっくりと掴む
2. Flutterの雰囲気をざっくりと掴む
3. 実際にチュートリアルを行い、手を動かす
4. アーキテクチャ等実際に必要な知識をつける


## 1. Dart と Swift
まず、言語的な違いをざっくりと掴み、Dartへの恐怖を和らげます。
### Dart vs Swift

SwiftとDartの違いを掴むために以下の記事を読みます。

https://medium.com/coding-with-flutter/dart-vs-swift-a-comparison-6491e945dc17

英語が苦手な方は、以下翻訳記事をお勧めします。

https://qiita.com/jamestong/items/79bd6c99d5ab581daf30

### Language tour
より深くDartを知りたい場合は、公式のLanguage tourを見てみるのも良いと思います。

https://dart.dev/guides/language/language-tour

## 2. Flutter
続いて、Flutterの雰囲気をざっくりと掴みます。
※主観ですが、必要になってから読んだ方が身につくので、あくまで最初ざっくりと目を通せば良いと思います。
　早く触りたい方はチュートリアルから始めても良いです。（どのみちドキュメントは読みたくなりますし）

## ドキュメント

公式ドキュメントもしくは（英語にアレルギーがある人は）Flutter Guide JP をざっくり読みます。


https://docs.flutter.dev/

- [WidgetCatalogue](https://docs.flutter.dev/development/ui/widgets)
 最低限これだけ目を通すと良いです


https://flutter.ctrnost.com/

- [Flutterの基本](https://flutter.ctrnost.com/basic/) 
こちらを読む場合も最低限これだけ目を通すと良いです

## 3. チュートリアル
次に、実際に手を動かして触り始めましょう。
私の好きなチュートリアルの進め方も載せておきますが、好みや興味のあるところからで良いと思います。

### おすすめルート

公式チュートリアルでWidgetと興味あるものだけ触る。
→下記の全体的に機能を触れるチュートリアルで不足している知識をつける。

### インストール
FlutterやDartの準備は各自で行ってください。
公式チュートリアルの通り進めるか、fvm(FlutterとDartのバージョン管理ツール)などを使うとよいと思います。

#### 公式

https://docs.flutter.dev/get-started/install

#### fvm

https://zenn.dev/riscait/articles/flutter-version-management



### 公式チュートリアル

- [Web上でWidgetのコードが触れるやつ（公式/英語）](https://docs.flutter.dev/development/ui/widgets-intro)
- [Flutterチュートリアル集(公式/英語)](https://docs.flutter.dev/reference/tutorials)
- [コードラボ(公式/英語)](https://docs.flutter.dev/codelabs)

### 全体的に機能を触れるチュートリアル

不明点は公式ドキュメントを見るか、ググる前提で使用するとよいです。

- [Flutter実践入門 ～環境構築からAndroid/iOS/Webに広告を付けて同時にリリース!!～](https://zenn.dev/kazutxt/books/flutter_practice_introduction/viewer/tutorial_introduction)
    - 初級・中級 の範囲の知識は必須
    - 上級は使うところだけ理解できたら一旦ゴールかなと思います
    

## 4-1.アーキテクチャ

いろいろあるのでMVVM以外の詳細は割愛しますが、以下の記事は分かり易かったのでおすすめできます。

### BLoCパターン

https://qiita.com/kabochapo/items/8738223894fb74f952d3
    

### MVVM + Repository Pattern

まずは一つアーキテクチャを使えるようになろう、ということで
使い慣れているこちらを採用しました。

以下の記事で詳細に例が解説されているので、とても参考になります。

https://wasabeef.medium.com/flutter-を-mvvm-で実装する-861c5dbcc565


※ Riverpod周りの構文が古いものが使われているので以下のページを参考に適宜読み替える必要があります。

https://riverpod.dev/ja/docs/migration/0.14.0_to_1.0.0#%E6%A7%8B%E6%96%87%E3%81%AE%E7%B5%B1%E4%B8%80

また、Riverpod + Hooksを使う前に、以下の順番で知識をつけていくことをお勧めします。

InheritedWidget　→　Provider　→　Riverpod + Hooks

- Riverpod
公式がかなり分かりやすいので迷ったら読むと良いです。

https://riverpod.dev/ja/docs/getting_started/   
 
- Hooks
一番分かり易かった記事

https://speakerdeck.com/wasabeef/app-development-with-the-flutter-hooks
   

## 4-2.その他ほぼ必須知識
### Dartのお作法
https://qiita.com/mkosuke/items/42c19d7edbf111f7fb71

https://zenn.dev/sekitats/articles/cd9c5f9f4f9c1f

### Tips
https://medium.com/flutter-jp/tips-b2487a63a8

### 個人的必須ライブラリ
- Freezed
    [チュートリアルのページ](https://zenn.dev/kazutxt/books/flutter_practice_introduction/viewer/advanced_freezed)や[公式の使い方](https://pub.dev/packages/freezed)がわかりやすい
    
- FlutterGen
    画像等のアセットをTypeSafeに管理する。Swiftで言うところのR.Swiftに近い。
    [作成者の記事(日本語)](https://wasabeef.medium.com/fluttergen-25149caea94f) がわかりやすい

# おわりに
ほぼリンク集みたいになってしまいましたが、プロジェクトを始めるまでに必要な知識はあらかた揃えたかと思います。
似た状況の方の助けになれれば幸いです。