【2024年版】WebエンジニアからFlutterエンジニアになるためのざっくりロードマップ

前提条件

この記事はWebエンジニアとして技術的な知見をすでに持っており、これからFlutterを用いたアプリ開発に挑戦しようとしている方を対象としています。

ある程度エンジニアとしての経験がある方を対象としているため、こういうのもあるよ。調べてみて使えそうだったら参考にしてみてね。というくらいの温度感で書いています。

会社の先輩から朝の雑談でもらったアドバイス程度と思って読んでもらえればと思います。

便利な情報源とチュートリアル

さっそくFlutterエンジニアになるためのロードマップについて説明します。まず大まかに以下の流れで学習すると良いと思います。

1. 環境構築
2. Flutterのサンプルアプリ作成
3. Dartの文法把握
4. Widgetを用いたフロントエンド開発
5. アプリ固有の機能の実装
6. WidgetとElementのツリー
7. 状態管理

環境構築

いうまでもないですが、最初はFlutterの環境構築から始めましょう。

iPhoneアプリ開発を行う場合はMacが必要になるので、Macを持っていない人はMacを購入するところからになってしまいますね。環境構築で利用するおすすめの情報源はFlutterの公式サイトです。

正直、説明が見やすいというわけではないのですが、ZennやQiitaの記事だと情報が古くなっていることもあるため、公式サイトでインストールをするのが一番安全かと思います。

この時点でAndroidとiOSのエミュレータが動く状態をつくること。実機のスマホと連携できる状況を作っておくことをお勧めします。特に実機の連携は触ってて楽しくなる要因なので早い段階で繋げられるようにしておきましょう。

Flutterのサンプルアプリ作成

環境構築が終わったら、今度はFlutterのアプリを実際に作ってみてテンションを上げるのが良いと思います。教材はGoogle Codelabsの初めての Flutter アプリがとても良いのでこちらを使うと良いと思います。

このページが終わった後にLearn へのリンクも紹介されているので、今後の情報源として利用できると思います。

Dartの文法把握

Flutterへのテンションが上がったところで、今後のことを考えてDartの文法についても学んでおきましょう。Webでのエンジニア経験があれば大きく手こずることはないと思いますが、

• 型
• クラス
• Switch式
• Nullsafety
• 非同期

あたりは確認しておくと良いと思います。

Widgetを用いたフロントエンド開発

ここまで来ると本格的にFlutterでコードを描き始めます。

WebエンジニアからするとWidgetを利用してUIを作ることが最初の壁になると思いますが、慣れるととても便利なのでめげずに頑張りましょう。作ってみるものとして、何かしらのAPIからデータを取得してリストで表示するような機能を作ってみるとWidgetの便利さを学びやすいと思います。

とくに最初に便利さを感じやすいWidgetについては紹介しておきますので、ぜひ参考にしてみてください。

• ListView
• FutureBuilder

アプリ固有の機能の実装

アプリといえばカメラやGPS機能を使いたくなると思います。こういったモバイルアプリだからこその機能を利用するのがアプリ開発の醍醐味ですね。

おそらくすぐに記事が古くなるので具体的なリンクなどは載せませんが、この記事を読んでいる時点の新目の記事を探しながら実装してみるのが良いかもしれません。

• カメラ機能
• GPS機能
• 加速度センサー
• 生体認証

WidgetとElementのツリー

UIも実装できるようになり、アプリ固有の機能も実装できるようになったら、Flutterの深い部分を学んでいきましょう。深い部分といっても様々なトピックがあるので、真面目に考えると無限に出てきてしまいます。

今回はチャレンジングにたった1つの教材の紹介にまとめてみようと思います。私のおすすめは以下の教材です。

「内側」から理解する Flutter 入門

有料ではありますがWidgetを使うだけのFlutterの次のステップに行くにはとても充実した内容だと思います。公式のドキュメントの内容をベースにしているので、英語が読める方は原文を読んでも良いと思います。

状態管理

最後は状態管理になります。状態管理も広いトピックなので深ぼればいくらでも話せてしまいますが、ポイントだけ簡単にまとめたいと思います。Flutterで利用される状態管理のライブラリは主に2つです。

• Provider
• Riverpod

  日本ではRiverpodが流行っており、スタンダードの印象がありますが、海外だとProviderでの管理が主流のようです。（噂のレベルの話ですが。）今から始めるのであればRiverpodから学んだほうが、実戦で触れる機会が多いのかもしれません。

アプリ開発の洗礼

アプリ開発にはWeb開発の人間からしたら信じられないような常識がたくさんあります。入門記事ということで、今回はその一部をご紹介したいと思います。

アプリストアという存在

Webでは意識しませんが、モバイルアプリにはストアが存在します。そしてストアを通してアプリをリリースする必要があります。

他にも方法はありますが、最終的にはストアですね。

そしてストアでアプリをリリースするためには以下の壁を乗り越えなければなりません。

1. ストアに登録して金を払う

   　a. iOS, Androidそれぞれにあります。

2. アプリ管理

   　a. アプリリリースバージョン管理や証明書管理が必要になります。

3. アプリの審査を通過する

   　a. Appleの審査は普通にリジェクトされることで有名です。

このストアの壁を乗り越えるのは、思った以上にめんどくさいです。

特に審査に関してはあらかじめガイドラインを読んでおかないとそもそも作れないものを作ろうとしていることにもなりかねないので、定期的に確認しておきましょう。

• App Reviewガイドライン - Apple Developer
• リリース | Google Play Console
  • Developer Policy Center

検証の難しさ

スマホ端末は無限に存在します。もちろんその全てを検証することはできないので、多くの場合はiOS1台、Android1台などでスタートすると思います。

しかし残念ながら仕事になると、ある程度メジャーどころは検証する必要が出てきます。

最初はいいのですが毎年出てくる新型機種だけでも相当な数になり、そのうち端末不足に陥り始めます。端末が不足するだけでなく端末の管理コストも増大していきます。検証端末レンタルサービスもありますが、届くのに時間がかかったり、最新機種が取り合いになったりと、やはり課題はあります。

この難しさをあらかじめ知っておく必要はあると思います。

意外と手こずる機能

1度経験を積めば問題ないのですが、たとえばiPhoneで通知機能を実装するのはなかなか難しいです。またSSIDなどの情報を取得するのも、想像より難しい作業になります。

Webの感覚で行くと簡単に実装できそうなことが、アプリでは骨の折れる作業だったりします。こういったことは経験から学ぶしかないのですが、実務の中で遭遇してしまうとかなり骨の折れる対応だったりします。

実務で機能を実装する場合は、実装経験を積んでから取り入れるようにした方が良いでしょう。

それができれば苦労はないのですが。。。

蛇足ですが、FlutterだからFirebaseのFiresotreを使おう！と判断する方も多いと思うのですが、RDBしか経験のない方にはNoSQLでのデータベース設計も大きな壁になるともいますのでお気をつけください。

ガイドラインと更新

アプリ作成にガイドラインが重要だということはすでに話しました。しかしガイドラインには更新というもう１つの壁もあります。

ガイドラインが更新されると、そのガイドラインを満たしたアプリしかストアにリリースできなくなります。例えば依存しているライブラリがガイドラインの条件を満たしていない時、そのライブラリの更新を待ち、アップデートする必要があります。

ここでよく問題になるのがDartやFlutterのバージョンです。ライブラリ側がアップデートした際に、そのライブラリを利用できないバージョンのDartやFlutterを使っているとなかなか苦しい展開になります。

Webのように問題がある状態で放置もできず、対応するしかありません。Webよりもさらに普段からのライブラリのアップデートなどの作業が重要な意味を持ちます。

情報源について

最後にFlutterで学習を進めるための情報源についてご紹介します。Flutterは公式の情報がとても充実している技術だと感じます。というのもGoogleが動画やドキュメントで非常に質の高い情報を提供してくれています。

その結果なのか、個人が作成しているZennの記事やYoutube動画などもわかりやすく信頼できる情報が多いと感じます。

最後にこれまでに私が触れてきた良い教材について紹介して終わろうと思います。

• 公式ドキュメント
• Codelabs Flutter
• Flutterチャンネル
• ルビーdogさんのYouTubeチャンネル
• 中條 剛（ちゅーやん）のZenn記事
• Flutter実践開発 - iPhone／Android両対応アプリ開発のテクニック

最後に

以上【2024年版】WebエンジニアからFlutterエンジニアになるためのざっくりロードマップ でした。

日々新しい情報が出てきたり、機能がアップデートされていく中で、ざっくりと指針になるような記事があるといいなと思い浅く広く紹介させていただきました。

今後も記事を書き続けようと思いますので、よろしくお願いします。