PGアプリのリニューアルでFlutterを採用した話

こんにちは、Shinonomeでモバイル領域を担当している@mcz9mmです。最近はFigmaでのWebデザインなども担当させてもらったりしていて、エンジニアなのかどうかわからなくなってます。デザインのことも話したいですがそれはまた別で話せればと思います。

弊社のコミュニティ- PlayGroundでは、学生の活動やアウトプットの評価を行うために社内ワークマネジメントツールを開発しています。そのツールのアプリ版をFlutterでリニューアルを行いました。今回はこのリニューアルを行った経緯やなぜFlutterを採用したかについて話ができればと思います。

技術的背景

旧アプリ版ではiOS、Android共にネイティブ環境で開発を(一人)でしていました。ネイティブ版となると、一人で両方のOSをスピード感をもって開発するには限界があります。当然バグ修正やら追加機能開発が追いつくはずもなく、OS毎に機能の制限があったりと満足したアプリではなかったと思います。

旧モバイル版

今回リニューアルしたPGアプリ

私自身が1年半前に個人的にFlutterを始めていたのと、一人で両OSをカバーするにはクロスネイティブが必須ということもあり、今回Flutterでのアプリ開発に踏み切りました。

弊社でFlutterを本格的にやっていくことになりそうで頑張ります
— Kaoru📱 (@mcz9mm) April 9, 2020

採用技術・環境

今回の開発では私ともう一人、弊コミュニティの学生メンバーの2人が参加しています。
プロジェクト開始段階では学生でアサインしてもらった子はほとんどFlutter未経験状態からのスタートなので学びながら一部の画面を作ってもらう形で参加してもらいました。

通信部分やデザイン面でのざっくりな環境は下記のようになります。

クライアント側→Flutter
API→Swaggerで定義
デザイン→Figma

Flutter開発における状態管理

状態管理の手法はいくつかあると思います。
ざっと適当にGoogle先生に聞くだけでも、こんな感じのワードがちらほら出てくるんじゃないかと。

Provider
ChangeNotifier
BLoC
state_notifier
Riverpod
Redux

プロジェクト開始自体は去年2020年の4月くらいで、当時それなりに流行っていたであろう（主観）、
state_notifierを採用しました。それと相性が良いfreezedを利用しました。
※freezedはStateをイミュータブルなクラスとして使えます。

メンバーが共通して技術をキャッチアップできる
理解しやすいか
あたりを基準に選びました。今だとRiverpodが良いのかな？

state_notifierはProviderパターンでのChangeNotifierから新しく覚えることが少なく、
得られる恩恵が大きいというのが最大の点ですね。Provider自体公式で推奨している
のもあり、初学者からでもこのパターンに慣れやすいのではないかと思います。

+αで、個人アプリでChangeNotifierからstate_notifierへ移行した経験もあったので
教えながら開発する際に、不安要素が少ない点もありました。

パッケージ：
https://pub.dev/packages/state_notifier
https://pub.dev/packages/freezed

開発してみて

実装スピードが圧倒的に早い

早いです。ホットリロードでいちいちビルドし直すことはほとんどなく開発できます。
SwiftやKotlinでのネイティブ実装も経験していますが体感2,3倍ほど早く書けます。

AppBarやList部分のCellやButton、Formなど、ほとんどのパーツを共通化することができています。
Scaffold内ではレイアウトの実装のみに集中できるので、追加開発や改修もスムーズに
行うことができています。

詰まったのはCognito

認証ではAWSCognitoを採用しています。認証系のパッケージは存在していますが、微妙に足りない箇所が会ったこともあり、自前で実装する場面もありました。
そもそもパッケージが公開されていること自体有り難かったです。感謝。

最終手段でMethodChannelを使ったネイティブ側の実装呼び出しを想定していましたが、幸いPGアプリでは特に利用する場面はなかったです。

最後に

今回手伝ってくれた学生メンバーはこのプロジェクトが初Flutterだったのですが、
メイン機能の画面やテストコードまで書けるようになりました。(むしろ教わった部分もあり感謝)

社内アプリということでFlutterを採用した話でしたが、今後も多くの案件でFlutterを採用した開発に
携われればと思っております。
アプリ開発のお手伝いももちろんできますので是非声をかけてください！
Shinonomeでは仲間になってくれる人、パートナー企業様を募集中ですので、お問い合わせからご連絡をいただけると嬉しいです！(私のTwitterのDMでも構いません！)