Flutterとは

モバイル開発用のDartというプログラミング言語のフレームワークになります。
一番の特徴は一つのソースコードでiOSとAndroid両方向けに開発することができます。
クロスプラットフォーム開発を実現できるフレームワークとしては、Flutter以外にもReact Nativeが有名で、弊社でもモバイルアプリ開発ではReact Nativeを主に利用しています。

最近ではモバイル開発以外にもWebアプリ、Mac / Windowsのデスクトップアプリにも対応しており、JavaScript（TypeScript）一強だったフロントエンド開発に新しい選択肢が出てきました。

そんなFlutterを学習する時に自分がお世話になったサイトや、これから学習を始める人におすすめしたいサイトを紹介します。

サイト一覧

1. まずは公式ドキュメント

学習を始めるならまずは公式を見るべきかなと思います。
ありがたいことに日本語翻訳した専用のサイトもあります。
チュートリアルでアプリを作るので一通りやってみることをお勧めします。

2. Dart入門

Flutterあくまでもフレームワークなので、元となってる言語のDartの基礎的な内容も学習した方が良いかと思います。
Qiitaでまとめてくださってる方がいました。

3. Riverpodの学習におすすめ！

Flutterの状態管理で使われるRiverpodの学習ができます。
自分もこちらの本で学習しました、とても分かりやすくておすすめです。

3. Flutter大学さんのZenn・Qiitaの記事や本

こちらは「Flutter大学」というコミュニティが提供している本で、Flutterの環境構築から基礎的な内容まで分かり易く説明してくれます。
またYoutubeにも動画がたくさんありますので、おすすめです。

4.Flutter OsakaさんのYoutube

こちらは「Flutter Osaka」というコミュニティのYoutubeから見ることができます。
リンクに貼っている動画はFlutterの書き方や基礎的な内容には触れませんが、実践的なスマホアプリの開発とSupabaseの使い方を学習することができます。
その他にもYoutubeの別の動画でハンズオン形式の講義がありますので、一通り見てみるのをおすすめします！

5. 株式会社ゆめみさんの研修課題

株式会社ゆめみさんのFlutterの研修課題がQiitaに公開されてました。
こちらも環境構築から始めますので、初学者の方も取り組める内容となってます。

その他学習するためにしたこと

1. 自分でアプリを1から作ってみる

正直これが一番学習になります。
日常で使えそうなアプリや面白そうなアプリ、もしくは考え付かなかったら有名なアプリを真似てみるのもありです。
ちなみに自分はTwitterを完全に再現したアプリを作りながら学習しました。

サーバーからデータを取得するためにAPIの連携方法を調べてみたり、開発が進むにつれて規模が大きくなってきたのでアーキテクチャーについて学習してみたり、状態管理ツールを導入してみたりと調べつつ作っていきます。
ただ現在はTwitter APIが有料化したので今では難しいです...やるなら別のアプリが良いかもしれないですね。

アプリを作る過程でわからない事とか技術的に難しい事に対して自分で調べながら進めていくのが効率的で頭に入りやすいです。

2. Flutterの講義資料を作る

一通り学習したらアウトプットとして講義資料を作ってみるのをおすすめします。
自分は社内向けに講義資料を作りました。
他の人に教えるためにFlutterの概念や知識を言語化する必要があるため、曖昧だったところの理解が深まります。
講義資料という形じゃなくても、QiitaとかZennに投稿するのでも全然良いです。

3. React Nativeとの違いを知る

同じクロスプラットフォーム開発のReact Nativeとの違いやメリット・デメリットを知るのも良いかと思います。
パフォーマンス面ではFlutterの方が優れてるかもしれませんが、作るアプリや一緒に開発するメンバーによってはFlutterよりReact Nativeの方が最適な時もあります。
両者の違いを理解して最適な技術選定ができるようになっておくと良いかと思います。