😇

ReactNativeからFlutterに移行したので振り返る

nose2022/12/12に公開

この記事はスターフェスティバル Advent Calendar 2022の13日目です。


はじめまして!
スターフェスティバル株式会社のnoseです!

今年の7月にスタフェスに入社して早いもので半年が経とうとしております。
この半年間弊社のごちクルNowのアプリをReactNativeからFlutterへ移行したのでこの場を借りて振り返ろうと思います。

また、ReactNativeでの開発については去年のYoshifujiさんの記事を御覧ください!
https://zenn.dev/stafes_blog/articles/react-native-beginner?redirected=1

なぜ移行を行うことになったのか

ごちクルNowではWeb、Slack、アプリの3つの注文経路がありますが去年のアプリリリースから、アプリの利用者が増えてきていたこともあり、アプリをより使いやすくシンプルにするべくUI刷新が行われるタイミングだったので、同時にFlutterにも移行する事になりました。

なぜFlutterだったのか

経験値

自分自身が10年ほどiOS/Androidのネイティブ開発を経験しており、さらにここ数年Flutter開発を行っていた事からReactNativeよりはFlutterの方に慣れていたというところが大半の理由です。

UIの実装のしやすさ・開発速度

Flutterの特徴としてマテリアルデザインに沿った様々なUIが提供されています。
そのためアプリ開発に慣れていればサクッといい感じのUIを実装することができるので、UIの実装->確認->修正のサイクルをスムーズに回すことができると思いました。

リリース後の運用

経験値の話ともつながるところでもあるのですが移行に時間はかかっても、その後の運用のスピードを一気に上げられるというところで馴染んだ言語で書くことが大事だと思いました。

主なPackageの選定

開発する前に何使おうとなるんですが、Flutterの場合この用途ならこれ!というものは割と決まっているのでそこまで悩まなっかたです。
あとは開発の中で便利そうなものがあれば試してみる流れですが、個人的には暫くアップデートがない+中身が結構大きいものは使わないようにしてます。

State管理

https://pub.dev/packages/riverpod
https://pub.dev/packages/state_notifier(https://pub.dev/packages/state_notifier)
Flutterの状態管理といえばこれってくらいの、言わずもしれた組み合わせだと思います。
ChangeNotifierを使わなかったのは、毎回notifyListeners()呼ぶのが面倒だったという理由だけです。

immutable Data

https://pub.dev/packages/freezed
こちらも有名なpackageです。
モデル定義が圧倒的に楽になるのでとりあえず導入して損はないはずです。
アプリ内で使用するentityや画面のstateなどに使用しています。

Network

https://pub.dev/packages/dio
こちらは選定したというわけではなく、もともとOpenAPIを使用した開発をしていたためgenerateするとDioを使用したコードが吐き出されていたのでそこに合わせた形になります。
過去の開発はFirestoreを使用したサーバーレス開発だったのでDioがなにかは知っていたものの使用するのは初めてでした。

routing

https://pub.dev/packages/go_router
個人的に気になってたpackageだったので使ってみました。
Navigation2.0が難解で個人でも試しに使ってみたんですが、やはり実務で使ってみることでより理解が深まったと思います。
ただ使ってて思ったんですが、Objectを渡すような画面遷移が出てきてしまうと遷移が少しわかりにくくなる気がして、Web対応がいらない場合はそこまで無理に入れる必要もないのかなとも思いました。
(そもそもObjectを渡すような遷移をなくして行くべきなのかもしれない、、)

その他

https://pub.dev/packages/intl
https://pub.dev/packages/collection
その他の大きいものだと多言語化、日付操作にintlやListの拡張にcollection等を入れています。

たくさんのpackageの中から用途に合わせて選べるのは便利だし楽しいですね!

反省点

Flutterにした事で〜というよりは移行を行う際に気をつけなければいけなかったことなど自戒の念をこめて残しておきます。

プロダクトの理解度

7月ジョインから半月程から移行作業を始めたので、プロダクトの理解度が足りずリリース後にあっ!ということが多かったです。
ぱっとアプリを見ただけではわからないような機能というのは必ずあるのでそういったところは見逃さないように注意するべきでした。

Reactの理解度

ReactNativeからの移行ということでFlutterだけではなくReact側のコードも確認する機会は少なくありませんでした。
そんな中でReactNativeに対する知識が足らずにコードを追うのに時間がかかったりなど事前準備が足りなかったと感じることが多かったです。

モクモクしすぎた

ある程度仕様も決まっていてデザインもあってAPIもある状態だったのでひたすら開発に没頭できたのですが、その分チームメンバーとのコミュニケーションが希薄になっていました。
これに限った話ではありませんが、雑談から始まる相談もあるので細かいコミュニケーションの大事さを改めて実感しました。

最後に

今回の移行についてはだいたい4ヶ月ほどでリリースまでこぎつけました。
入社間もない自分にこのような大きなタスクを任せて頂けたことや、ご協力頂いた皆さんには感謝しかありません。
今後についてはごちクルNowをより良く改善していくこと、そして社内にFlutterの技術を広めていくことが求められると思うので、今回の反省点を忘れずに邁進していきたいと思います。

駄文ではありましたがここまで読んでくださりありがとうございました!

お知らせ

弊社では絶賛採用活動強化中です!
興味ある方は是非!!!!

https://stafes.notion.site/d0996a00d77d418280982797c7e16001

スタフェステックブログ

スターフェスティバル株式会社のエンジニアが運営しています!

Discussion

ログインするとコメントできます