Flutterに入門したけれど次はどうしたらいいんだろう、を解決するための一冊

本教材では Flutter をつかったアプリケーション開発について学びます。

なぜこの教材を執筆したのか

Flutter は 2018年末にメジャーバージョンがリリースされた比較的新しい技術です。それにもかかわらず、マルチプラットフォームをターゲットにした技術は過去にもさまざまなものがリリースされていますが、Flutter ほど成功しているものは珍しいです。この成功の理由の一つが、Flutterというフレームワーク (SDK) の完成度の高さにあると考えています。その完成度の高さから、誰でも簡単にアプリケーションを開発する体験をすることができます。そのため、初学者がはじめてのプログラミングとして、または初めてのモバイル向けアプリケーション開発として取り組むような例を多く見るようになりました。

しかし、Flutterという技術の若さからか、採用するパッケージ・ライブラリの選択肢は多岐に渡ります。それらの技術の進化のスピードもかなり早いため、頻繁に新しい機能が追加されています。

このような状況もあり、とりあえず動くものができたが次に何をしたら良いのだろう、という人がとても多いように思います。一部の熟練者が発信する情報を頼りに（鵜呑みに）進めていくような状況になっていると言えるでしょう。

このような課題感から、ただ動くものを作るのではなく、なぜそのように作るのかを理解し説明できるようになれる ような教材を作りたいと考え、本教材を執筆しました。

この教材の学び方

Flutter で中規模以上のアプリケーションを開発する場合、避けては通れないのが 状態管理ライブラリ の選定です。そこで本教材では筆者が推奨する構成である、状態管理ライブラリとして Riverpod・画面遷移ライブラリとして go_router を採用した Flutter アプリケーション開発を実践します。

Flutterのしくみ・状態管理のしくみ・画面遷移のしくみを効率的に学ぶための題材として ECショップ風のアプリケーションを選定しました。

ECショップ風アプリケーションを開発しながら、その実装のひとつひとつに対して なぜそう書くのか をじっくり考えながら進めていく構成になっていますので、単純に実装するよりも多くの時間がかかることを想定しています。時間はかかりますが、このような取り組みによって Flutter アプリケーション開発に対する理解度が格段に向上し、実践で活躍することができるだけの知識・理解のベースを獲得できるものと考えています。

一段レベルアップするために、一緒に頑張りましょう。

本教材が終えたらどのような状態になっているか

本教材では、EC ショップ風アプリケーションを開発し、その技術スタックについて 説明できる ようになることを目標としています。そのため、本教材のゴールは「開発できる」ではなく「説明できる」とします。

• Flutter についてその技術的な仕組みを説明できる
• Riverpod についてその特長を説明できる
• なぜ Riverpod を使うのかについて説明できる
• go_router についてその特長を説明できる
• なぜ go_router を使うのかについて説明できる
• データクラスと freezed についてその意義を説明できる

アプリケーションのイメージ

本教材では 中規模 Flutter アプリケーションという言葉を使用しています。本教材における中規模の定義とは以下のようなものを指します。

• 複数のページからなるアプリケーションであること
  • 複数の Dart ファイルを用意せざるを得ない程度の規模
  • ページ間で情報を共有するユースケースがあること
• パッケージを複数種類、使用するようなアプリケーションであること
• リリースを見越した構成のアプリケーションであること

受講における必要条件

本教材を進める上で、以下の知識を有していることを期待します。

• 必須
  • Flutter に限らず、プログラミングの基礎的な知識を有していること
    • 変数・関数・条件 (if) などの使用経験があること
• 推奨
  • Flutter の開発環境をセットアップしたことがあること
  • Flutter のソースコードを見たことがある
  • Flutter のアプリケーションをビルドしたことがある
  • Flutter のパッケージ pub.dev をつかったことがある
• 歓迎
  • (規模に寄らず) Flutter アプリケーションを作ったことがある
  • モバイルアプリ (iOS, Android) を作ったことがある
  • 宣言的 UI に触れたことがある
    • SwiftUI, Jetpack Compose, React など

本教材は Flutter に触れるのがはじめてという方でもお読みいただけるような内容を心がけていますが、前半は実装よりも技術の説明を中心に扱っています。

一方で、まずは簡単に動くものを触って見たいという方もいらっしゃると思います。

その場合は、Flutter 公式のGet Startedを実施されることをお勧めします。または、本教材の筆者が Zenn にて公開しているポケモンから学ぶFlutterの Step3 までにチャレンジされることをお勧めします。

また、本教材の目的は「説明できるようになること」にあります。そのため、ハンズオンの時間よりも なぜ を問う時間が相対的に多い構成となっています。本教材を読み進めるにあたっては、手を動かすと同時に頭を動かし、学んだことをチームメンバーに・知人に・技術記事に自分の言葉で共有するならどう説明するのかを意識しながら進めていただくと、最大の効果が得られるものと考えています。

この教材の対象者

この教材では、以下のような方を対象にしています。

• プログラミング経験があり、新たに Flutter に入門してみようと考えている方
• Flutter は軽く触ってみたが、次にどう進めればよいかがわからず困っている方
• Flutter を使った本格的なアプリケーション開発に参加する・したい方
• Flutter のスキルをもう一段階上げたい方

学ばないこと

この教材では Flutter をつかったアプリケーション開発に必要な知識を得ることを目的としています。
一方で、リリースまでの流れを全て説明することは目的としていません。そのため、Flutter アプリケーションのバックエンドとして頻繁に採用される Firebase についての説明や、Apple Store (iOS) および Google Play ストア (Android) へのリリースに関する説明はおこないません。

また、本書では使用するパッケージは必要最低限にとどめ、Flutter 標準で搭載されているものを積極的に採用しています。
そのため、開発を手軽にすすめることができるパッケージについては積極的に言及しません。
Flutter の開発において、Pub.dev で公開されているさまざまなパッケージを利用することはとても重要なことだと考えていますが、本書の目的である "説明できること" にはマッチしないと判断し、説明をしていません。

本教材の対応バージョン

• Flutter SDK Ver.3.0.2 (Stable)

その他、使用するパッケージのバージョンについては各解説において言及します。

本教材に対応している環境

• macOS

筆者は macOS を使用して執筆しています。そのため、本教材で使用している画面キャプチャについては、macOS で撮影しています。

なお、本教材は macOS を想定して説明を行いますが、その違いは iOS 向けのビルドを可能にするための XCode の設定の有無程度であり、Android や Web を対象とする場合は、Windows や Linux であっても大部分が共通です。本教材を読みながら、適宜公式ドキュメントを参照することで、macOS に限らず学習を進めることが可能です。