はじめに
KDDIアジャイル開発センター株式会社に24新卒で入社した、藤原です。
私は入社後の研修を終えた後、Flutter未経験でFlutterを使ったモバイルアプリ開発の案件にアサインされました。
それから約3ヶ月、研修で同じチームだったメンバー(@8mitsuboy , @kyuko)とFlutterのハッカソンに出場し、3位に入賞することが出来ました！
3ヶ月前の私はFlutterを使って賞をいただけるとは夢にも思いませんでした笑
そんな私が、ハッカソン入賞までのFlutter学習ロードマップをご紹介いたします！
Flutterをこれから学びたい方やFlutterを使って何かに挑戦したい方の参考になれば幸いです！
Tokyo Flutter Hackathon
東京で開催されるFlutterのハッカソンのイベントに参加しました。
2日間という限られた時間で開発するのは大変でしたが、とても楽しく良い思い出になりました！！
無料で参加できる上に、他の参加者から多くの刺激を受けられるため、Flutterのスキルを試す場として、とても良いイベントだと思います。
当日の様子や私たちの取り組みについては、@8mitsuboyの記事を見ていただけると幸いです！
学習ロードマップ
- (Webシステムの基本理解)
- Flutterの基礎の習得
Dartの理解、ウィジェットを使ってみる - Flutterのアーキテクチャの学習
Feature-firstの理解 - 状態管理とAWS Amplifyを使ったTodoアプリの作成
Riverpod、DynamoDB
1. (Webシステムの基本理解)
はじめに、モバイルアプリ開発を経験する前に、会社の研修でWebシステムの仕組みやクラウドサービスを使ったWebアプリケーション開発を学びました。
初心者としてモバイルアプリ開発に取り組む場合は、まずFlutterやDartの学習に集中し、必要に応じてWeb関連の知識を後から学ぶ形で問題ないと思います。
しかし、ハッカソンなどに出る場合は、アプリのアイデアを出したりそれを実現する上でWebシステムの仕組みを理解しておくことは 役に立ったと感じたのでおすすめです。
実際に今回の私達のプロダクトは、Difyというサービスを利用し、生成AIによる複雑な処理をAPI形式で活用することにより実現しました。
今回のハッカソンでDifyを利用した詳細は@kyukoの記事を見ていただけると幸いです！
また、会社で実施された研修の雰囲気は以下の記事が参考になるかと思います！
2. Flutterの基礎の習得
案件配属後、まずは簡単なアプリを作れるようになるため、Google Codelabsの「初めてのFlutterアプリ」を使ってDartやWidgetに触れました。
ここでは二つの単語を合わせて一つの単語を生成するアプリを作りました。
この時、Dartを初めて使ったのですが、困惑することなく理解しやすい内容でした。
丁寧なガイド付きのチュートリアルで、Flutterの環境構築から始まりウィジェット(アプリの見える部分)やロジック（アプリの見えない部分）を開発する基礎について教えてくれます。
特に環境構築の部分は初心者が陥りやすい部分なのでありがたかったです。
3. Flutterのアーキテクチャの学習
業務のプロジェクトでも採用されているFeature-fisrstというアーキテクチャについても学びました。
アプリにおけるアーキテクチャはディレクトリ構成やデータフローの設計が含まれるもので、アプリのメンテナンス性を高め、コードを整理するためもに重要な考え方です。
特に業務レベルで大規模なアプリを開発する際に役立つものだと思いますが、知っておいて損はないです。
ただし、難しいことは置いてとりあえず概念をざっくり理解しておき、後から少しずつ学んでいく形でもありかなと思います。
ハッカソンでもアーキテクチャを意識したり、リポジトリを充実させることで加点に繋がるかもしれませんが、私達のチームはそこまで余裕はありませんでした笑
4. 状態管理とAWS Amplifyを使ったTodoアプリの作成
Todoアプリ作成を通じて、Riverpodで状態管理を学び、AWS Amplifyでバックエンド構築について学びました。
Todoアプリは、小規模なアプリでも、状態管理とクラウドバックエンドを組み合わせることで本格的な仕組みを学ぶきっかけになりました。
参考になる記事も多いので、試しにTodoアプリを作ってみるのはおすすめです。
状態管理の学習：Riverpod
まず、状態管理の重要性を理解するために、シンプルなTodoアプリを作成しました。
このアプリでは、タスクの追加や削除、完了状態の切り替えなどを行うために、Flutterの状態管理パッケージRiverpodを利用しました。
Riverpodを使用することで、タスクのリストや状態を効率的に管理できる仕組みを学び、UIとデータの分離の重要性を実感しました。
具体的には、以下のようなステップで実装を進めました：
-
Provider
- Todoリストを管理するための状態をProviderとして定義
-
Notifier
- Notifierを使用して、状態を変更するロジックを管理
-
ConsumerWidget
- ユーザー操作に応じて状態変化を検知し、リストやタスクの変更を画面に反映させる仕組みを学習
AWS Amplifyの学習：DynamoDBとの連携
次に、このTodoアプリにAWSのクラウドバックエンドを追加しました。
バックエンドの構築には、AWS AmplifyのAmplify CLIを利用しました。
DynamoDBにデータを保存することで、クラウド上でデータを永続化できるようにしました。
Amplifyを活用すれば、AWS上でリソースを素早くプロビジョニングでき、フロントエンド・バックエンドともに開発の効率を上げることができます。
そのため、ハッカソンのようなシーンでも活用できるツールだと思います。
ここでは、以下のようなステップで進めました：
-
Amplify CLIによるバックエンド構築
- Amplify CLIを使用して、DynamoDBのテーブルとGraphQL APIを自動生成し、クラウド環境に必要なバックエンドを構築
-
Flutterアプリからのデータアクセス
- FlutterアプリからAmplifyAPIを利用してクラウドデータにアクセスし、データをやり取り（CRUD）してUIに反映させる方法の学習
余談ですが、GraphQL APIの方式のイメージを掴むためにApollo StudioのStar Wars GraphQL APIを使いました。
このAPIはスターウォーズの映画に関するキャラクターやエピソードなどのデータを取得できるAPIになっています。
スターウォーズが好きなら楽しくAPIについて勉強することができると思います。
このTodoアプリを作成することで、フロントエンド（Riverpod）とバックエンド（AWS Amplify/DynamoDB）の連携を体験できました。
状態管理の知識がバックエンド操作と結びついたことで、アプリ全体のデータフローがより深く理解できたと思います。
皆さんも、この組み合わせでぜひ実践してみてください！
おわりに
ハッカソンで入賞できたのは、会社や同じプロジェクトに関わり、手厚いサポートと応援をいただいた皆様のおかげです！
研修やOJTでのサポート、そして学習に関するアドバイスをいただき、心から感謝しています！
ぜひ、紹介したFlutterの学習ロードマップを参考にしていただければと思います！