「Makuake」のネイティブアプリFlutter化の話
この記事は、Makuake Advent Calendar 2022の21日目の記事です。
はじめに
こんにちは！株式会社マクアケでアプリ/Webエンジニアをやっているささお@sasao_engineerです。「Makuake」でより楽しく安心して応援購入体験ができるように開発を行うProject-Xチームと、ネイティブアプリの改善を行うApp Working Groupという組織横断チームに所属しています。
今回はApp Working Groupで行った、ネイティブアプリのFlutterへのリプレイスにまつわるあれこれをまとめてみようと思います。
なぜFlutterを導入したのか
Flutterの導入を決断したのは2022年の1〜2月ごろでした。
当時はiOSアプリエンジニアよりもAndroidアプリエンジニアの人数が少なく、同じ施策を実装しようとすると、iOSと比べてAndroidアプリへの新機能の実装が遅れ、iOSとの機能差分が発生していました。
この状況を打破する案としてFlutterの導入を検討し始めました。
Flutterの導入により、今までiOS、Androidをバラバラに開発していた大部分を共通化できるので、単純計算で工数が半分になります。
エンジニアの人数比率のバランスが悪い問題も解消されます。
これはとんでもないメリットですね。
（あとは、iOSエンジニアとAndroidエンジニアの区別、壁をぶち壊して本当の意味で一つのチームになれるんじゃないか、という期待もありました。）
ちょっと待って！俺Flutterの導入したくないんだけど！？
実はFlutter導入の話が出てきた当初は、私の中で「クロスプラットフォームフレームワークへのなんとなくの不信感」と「キャリアの面の不安」 がありました。
クロスプラットフォームフレームワークへのなんとなくの不信感
私は2016年ごろの発展途上のReact Nativeを触った経験があり、その当時すこーしだけ苦労したのでクロスプラットフォームフレームワークへのふんわりとした不信感がありました。なのでFlutter導入の話を聞いた当初は軽くびびっている自分がいました。
ただ現在ではクロスプラットフォームフレームワークのデファクトスタンダードとして市民権を得ていますし、私の信頼するFlutter経験が豊富なチームメンバーからのお墨付きもあったので、まぁ実際Flutterを導入しても悪いことはなさそうだなぁとも思ってはいました。
キャリアの面での不安
それまで私は、主にiOSアプリ開発をSwift、UIKitで行なっており、社内でも 「iOSアプリ開発ができる人」として認識されていたと思います。自分でもiOSアプリ開発でバリューを発揮している自負がありました。
Flutter導入により、iOSアプリ開発のスキルを磨く機会が減り、iOSアプリ開発の最新情報のキャッチアップも難しくなる（かも）という不安がありました。今まで積み重ねたスキルやキャリアを捨て、「何者でも無い状態」になり、大袈裟にいえば、「また０からやり直す」…そんな気持ちでした。導入前は、どちらかといえばキャリアの面での不安が大きかったです。
とりあえず、隙間時間でFlutterを試してみたら。。。
Flutter導入には後ろ向きでしたが、ネイティブアプリエンジニアとして人気クロスプラットフォームフレームワークのFlutterには興味がありました。
TwitterのTLを眺めているとFlutterの勉強を始めた人が続々と現れていたので、どうやら世の中の流れがFlutterに傾きつつあるというのをひしひしと感じていたからです。
（「Flutterはそんなに良いものなのか…🤔！？」「Flutterに鞍替えとは…裏切り者め😡！」などなど、ここ２年くらいはそんな感じでFlutterへの興味と謎の敵対心を持っていました。）
エンジニアとしての好奇心に身を任せてFlutterを試してみたら、Swiftと比べるとやや機能的に弱い部分はありつつも、とても素直な書き方ができるDart。再ビルドを必要としないHot Reloadの存在など、開発体験の良さにびっくりしました。
公式ドキュメントもちゃんとしているし、日本語のドキュメントもあるし、世の中に情報も十分にある。そんなに詰まることもなく、スイスイ開発できました。
有り体に言えば、楽しかったのです。
新しい技術を勉強するのはやっぱり楽しいな〜と思いました。
徐々にFlutterを触る機会が増え、気がつくと当初感じていた不安がなくなっていました。
新しい技術に触れることで 「今まで持っていたスキルを捨てる」という思考ではなく、「新しいスキルを拾える」 という思考に切り替わり、「キャリアの不安」が気にならなくなったのだと思います。もちろん気にならなくなっただけで問題が解消した訳ではありませんが、気にならなくなったのならそれで良いと思いました。
思い描くキャリアと乖離しないなら、今持っている技術を磨く機会と新しい技術を習得する機会はトレードオフで、良い悪いはないと思えました。
ただプロダクトにとってプラスになるのはどっちだろうというシンプルな問いに行き着けたので気持ちがよかったです。個人的な思いでプロダクトにとってマイナスな決断をしたら、きっと働いていても矛盾を感じて辛くなっていたと思います。
実際に導入する前の壁
まず考えたのは「Makuake」のどの部分から導入していくかです。
利用頻度が低くリスクも低い画面と、更新頻度が高くリスクの高い画面、どちらから取り組むかを天秤にかけた結果、できるだけ早くFlutter化の恩恵を得ることを優先し、最も更新頻度の高い「新着画面」から取り掛かることに決まりました。
今後の「新着画面」の開発工数が半分になるぞ！とワクワクしたのと同時に、新着画面は「Makuake」で人気の画面なのでリスクも大きく、失敗は許されません。
マクアケのFlutter導入方法は、現状のiOS、 AndroidアプリをまるっとFlutterに作り替えるものではなく、いわゆるAdd-to-appという方法で部分的に（画面単位で）Flutterに置き換えていくというものです。導入方法は公式でまとめられていたのでそれほど難しくはありませんでした。
ちなみにiOSはAパターン、AndroidはBパターンで導入しました。
同時に 「本当にFlutter導入は可能なのか」 という技術調査も進めていきました。調査したことを一部紹介するとこんな感じです。
- ネイティブ実装と遜色ない体験を、Flutterでもユーザーに提供できるのか？
- 現在アプリで利用中のSDK/OSS周りはFlutterでも利用可能か？
- 現在アプリで利用中のネイティブ固有の機能は利用可能か？
- CI/CD周りは動作するか？
- UserDefaults / SharedPreferences の共通化やマイグレーションで問題は発生しないか？
- etc…
調査は一ヶ月ほどかかりましたが、それほど大きな壁は見つかりませんでした。あとは、CEO、CTOなどのステークホルダーからのOKをいただくことも大きな壁になりうる部分ですが、マクアケ開発部は新しい技術の導入に意欲的で、明確な理由があれば導入に賛成してくれます。
余談(カジュアル面談のお誘い)
最初にFlutter化した新着画面は、iOSでいうUIPageViewController、AndroidでいうViewPagerの中の一画面です。
その為ちょいちょいいろんな不具合を踏んではいます。
● 縦横スクロールバッティング問題
● タブ切り替えで画面がチラつく問題
etc…
どう乗り越えてきたのか詳しく内容が知りたい方はWantedlyでカジュアル面談だ！👇
Flutter経験の浅いチームで大事なこと
Flutter化が始まった当初は社内のほとんどのメンバーがFlutter未経験でした。まともにコードレビューすらできません。大切なのはいかに早くチームに知見を溜めるかだと思い、以下のことを意識して実施していました。
● 同期非同期問わずコミュニケーション頻度を増やし、相談する機会を増やす
● コードレビューをチームで集まって全員で行う
● LT会を頻繁に開催する
早くチームに知見を溜めるには、メンバーの学習をチーム全員に還元する動きを活発にすることが大事です。仮にチームメンバーが４人だったら、各々の学習がチーム全員に集まるので４倍の早さで学習が進みます。
この辺に関しては、逆にほぼ全員が未経験でお互いのスキルレベルが揃っているからこそ、変にプライドを持つこともなく、わからないものはわからない、わかることはわかると言いやすかったことも良かったかもしれません。
まとめ
当初３人ほどで触っていたFlutterリポジトリも今では10人くらいで作業しています。
Flutterを導入したことによるメリットも日を追うごとに増えていきます。
- iOS/Android/Web というくくりだったのが、アプリ/Webという括りにまで減らすことができ、One Team感がある！
- 新機能の実装スピードが上がった！
- iOS/Android間における、UIとロジック両面での意図していない差分がなくなった！
- iOSエンジニアがAndroid<>Flutter間の繋ぎ込み処理などを担当することも多く、結果ネイティブの知識の習得機会も増えた！
- コード面の統一を強く意識することで、無法地帯と化していたカラーパレットの再定義など、デザイン面の整理と強化も同時に実行できた！
->ダークモード対応やタブレット対応の実現も現実味を帯びてきた！
とはいえ「Makuake」アプリのFlutterの旅は始まったばかり。アプリの完全Flutter化と、その先に見える理想的な開発環境の構築に向けてこれからもガンガン進んでいきます。
興味を持たれた方はぜひカジュアル面談でお話ししましょう！
--------------------------------------------------------------------------
現在マクアケではエンジニアの募集をしております。
もっとマクアケについて知りたい方は、社員インタビュー記事や以下リンクからカジュアル面談・エントリーのお申し込みをお願いいたします！
◉エントリーをご希望の方
◉カジュアル面談をご希望の方
◉マクアケの中の人を知りたい方