どうやって『使いづらさ』を乗り越えた？MIXIのFlutter開発最前線をご紹介します
iOS / Android やWeb など、さまざまなプラットフォームでの開発が同時にできて、UI が美しく、そしてコミュニティが活発で進化も早い。さまざまなメリットがある Flutter は、2018年のリリース以降どんどん活躍の幅を広げています。
昨年から FlutterKaigi が開催されるなど日本でも盛り上がりを見せており、MIXI でも徐々に Flutter の存在感が増しつつあります。今年の新卒研修では、実際に Flutter で新規事業のアプリ開発をしているエンジニアによる Flutter 研修も行われました。
そんな人気の言語である Flutter ですが、どうやら使いづらさを感じる場面もあるようで・・？
今日は MIXI で Flutter を使って開発している2つのサービスから、Flutter エンジニアである柿崎、川島、沼田、田代の4名を呼んで、Flutter を使う上での工夫や実際の開発事例、そして今後の Flutter に期待していることなどを聞いてきました。
「他社の Flutter 開発事例が気になる」「Flutter の使いづらいと感じるポイントとその対応策が知りたい」「自社の取り組みと見比べてみたい」という方は、ぜひご覧ください！
柿崎 昭一 （かきざき しょういち）
ライブエクスペリエンス（以下：LX）事業本部 / Fansta 開発グループ 所属。2017年6月入社。これまで主にサーバーサイド開発を経験し、Flutter 開発に携わる前にメインで扱っていた言語は Ruby や Go など。
川島 徹也（かわしま てつや）
LX 事業本部 / 新規サービス 開発グループ 所属。2021年9月入社。MIXI 入社前は SaaS 開発や Web フロントエンド開発を経験し、Flutter 開発に携わる前は Go や React などをメインに触っていた。
沼田 幸大（ぬまた ゆきひろ）
LX 事業本部 / Fansta 開発グループ 所属。2021年8月入社。MIXI 入社前は主にサーバーサイド開発を経験し、Flutter 開発に携わる前にメインで扱っていた言語は TypeScript や PHP など。
田代 祐輔（たしろ ゆうすけ）
LX 事業本部 / 新規サービス 開発グループ 所属。2015年4月入社。これまで主にクライアント開発を経験し、Flutter 開発に携わる前にメインで扱っていた言語は Objective-C / Java / Kotlin / Swift など。
導入のきっかけは「触っていてテンションが上がる」こと
━━Flutter を導入することになった経緯を教えてください。
川島（新規）：導入した時のメンバーがいないので聞いた話なのですが、元々はWebで作る予定だったところを、想定するユーザー層的にアプリの方が使ってもらえるのではないかということで、アプリ開発に切り替えることになり、その時に Flutter が選ばれたと聞いています。
柿崎（Fansta）：Fansta の方は、1年ほど前にWeb版をリリースしていて、次段階として2022年3月にアプリをリリースしました。はじめは iOS だけのつもりが、話が進んでいくうちに Android 開発もする方向に。限られた開発メンバーでリリース日に間に合わせるために、クロスプラットフォームである Flutter を選択しました。ReactNative などもある中で Flutter に決めた理由は、 Google がかなり力を入れていたことと、触っていて一番テンションが上がりそうだよねという話になったからです（笑）あとは、1人 Flutter に強いエンジニアがいたのでその方の存在も導入のきっかけになりました。
━━ テンションが上がるのは大事です！Flutter を導入するにあたって、つまずいたところは？
川島（新規）：最初は環境構築ですかね。Web サービスだと割とコマンド一発で作れるようなものが多いのですが、ネイティブアプリなので Android / iOS 両方の環境を整えなければならなくて、僕はそこでつまずきました。
田代（新規）：自分の場合は、環境を分けるのにつまずいた記憶があります。開発環境、検証環境、本番環境のような環境分けが、Flutter だけでなくネイティブ側の設定をいじらないといけなくて結構大変でした。
━━ Flutter というよりは、ネイティブアプリ固有の環境構築が難しかったと。導入の際に懸念していた部分などはありますか？
柿崎（Fansta）：カメラやGPSを使うなど、端末に近い部分の実装を Flutter でカバーしきれるのかどうかですね。例えば今後 GPS を使って、お店やイベントなどと連動するような機能を作って出す場合に、はたして Flutter で耐え切れるのか？などを懸念していました。
実際に開発して見えてきた、良い点・悪い点
━━端末固有の部分に不安があったとのことですが、実際に開発してみて、どうでしたか？
柿崎（Fansta）：現在、Geocoding という仕組みを使って住所から緯度経度の数値を引っ張ってきて、その情報をもとに店舗の場所を表示しているのですが、iOSとAndroidで同一の住所を使ってもGeocodingの出力結果が違ったりするんですよね。なので、取得できなかった場合のフォールバックの処理を書いてあげる必要がありました。ネイティブに近い部分だとこういった問題点が出てくるんだなと実感しました。
━━そこは劇的な改善策があるわけではなく、 コードを書くことで解決してるような感じなんですね。Flutter を使ってみてよかった点はありますか？
田代（新規）：やはり1つのコードで、iOS と Android の実装ができるというのはすごく良かったなと思います。うちのチームはクライアントサイドのエンジニアはそんなに多くなくて、少人数で結構画面数が多いアプリを開発しているのですが、その辺もカバーできました。
川島（新規）：そうですね。Web と違って、iOS / Android の2種類の開発をする必要があると、アプリ開発に対しての面倒臭さがどうしても生じてしまいがちなので、Flutter のおかげで解決できてよかったです。
沼田（Fansta）：テストの工数を削減できるのもいいですよね。UI の変更だと iOS / Android の両方のテストが必要ですが、内部のロジックの変更であれば片方のテストだけでいいこともあるので。
━━ なるほど。それはリリースサイクル全体で見るとかなりの差になりそうですね。他にも何かありますか？
沼田（Fansta）：以前 TypeScript を書いていたことがあるのですが、Dartが割と TypeScript っぽいところがあったり、宣言的 UI なので React を書いてた人にとっても書きやすかったり、Web 開発をしてたエンジニアにとってすごくとっつきやすい言語だと思います。
━━学習コストが低いのは良いですね。逆に、使いづらい点などはありますか？
沼田（Fansta）：状態管理周りが難しいと思います。Flutter 公式では Provider というライブラリを推してるのですが、Flutter 初心者にとっては若干とっつきづらくて。ここは逆に学習コストが若干高いのが微妙な点ですね。
柿崎（Fansta）：僕が使いづらかったのは、ネイティブアプリ固有の部分ですね。例えば iOS の証明書まわりが未知の領域で。証明書1つ作るのに MIXI の Organization に招待してもらって、プロビジョニングプロファイルをもらって・・と中々手間がかかったり、必要な証明書を揃えるのがややこしかったり。こういうのが iOS でも Android でもあるので、ネイティブに近い部分はつまずくポイントが多いと感じます。
田代（新規）：柿崎さんと似てるのですが、ネイティブの機能を使う時がやはり難しいですね。Flutter でネイティブの機能を使う際は Plugin というものを導入するのですが、Flutter 上で完璧に機能を再現するのは難しくて。例えば写真を選択する時に、ネイティブだと画面上に写真選択画面を埋め込めるけど、Flutter だとやりづらい。なので、回避策として仕様を変えて対応していました。
━━そこはやはり、避けては通れない課題なんですね。
Flutter の『使いづらさ』に対するアプローチは？
━━Flutter で開発を進める上で、どういった工夫をされているか教えてください。
沼田（Fansta）：Fansta 側では状態管理を行う際に、公式が推している Provider ではなく、GetX というフレームワークを使って書き馴染みをよくしようとしていますね。それと UI 周りにはあまりロジックを置かないようにして、UI は UI、ロジックはロジックという風に分けて書くことで 可読性を上げる工夫をしています。
田代（新規）：なるほど、Fansta チームは GetX を使ってるんですね。自分たちのチームでは Riverpod という、Provider の開発者が Provider の上位互換を目指して作ったものを使っています。
柿崎（Fansta）：Riverpod の触り心地がちょっと気になってます。そちらのチームでも元々 GetX を使われてたと思うのですが、Riverpod に切り替えたきっかけはなんだったんですか？
田代（新規）：触り心地は結構いいですね。わかりやすいし扱いやすいです。自分が入る前にはもう切り替わってたので、きっかけはわからないんですよね・・。ただ、GetX ってフルスタックフレームワークみたいな感じで状態管理や画面遷移、依存性注入を提供してくれるので、それに依存したくなかったんじゃないかなって気はしますけど。
川島（新規）：Riverpodは最小限でここだけ状態管理したいみたいな場面で、他に依存しない state を 1 つだけぽんと作ったりできるので、小回りが効く良さはありますね。
柿崎（Fansta）：なるほど。確かに Fansta の場合もGetX なしでは成立しないようになってます（笑）
━━各チームでアプローチが違って面白いですね。もう少しプロジェクトベースで、直近の取り組みについて教えてください。
柿崎（Fansta）：Fanstaでは最近、AppsFlyer 連携に取り組んでいます。元々 Fansta は Web からスタートしてるのですが、将来的にはアプリユーザーの方が多い状態にしていきたいと思っていて。Web のユーザーをアプリにどんどん送客していくことを目指して、AppsFlyer にある、Web からアプリを直接起動させる Web to App 的な機能を最近実装しました。
川島（新規）：僕たちのチームでは、最近 Firebase Analytics 周りの設定を行いました。誰がどのページを通って何を操作したかなどの履歴が残るので、そのデータを使って改善に繋げたり、ビジネス側の販促戦略に役立ててもらったり。最終的にはビジネスの人にも直接触ってもらえるようにすることを目的に、まずは開発チーム内での勉強会を実施しています。
沼田（Fansta）：Firebase でいうと、Fansta でも最近 Firebase を使ったプッシュ通知周りの機能をリリースしましたね。
柿崎（Fansta）：そうですね、プッシュ通知周りの実装の時は FCM (Firebase Cloud Messaging) にすごく助けられました。本来、iOSの場合は APNs(Apple Push Notification Service) を挟む必要があるところを、FCM が全部ラップしてくれて。具体的な動きで言うと、FCM に問い合わせてトークンをもらい、自分たちのサーバーに保存して、サーバーサイドでそのトークンを使って FCM の API を叩けば iOS / Android 両方でプッシュ通知を飛ばせるみたいな感じで、Firebase と Flutter の相性が良いおかげですごく使いやすかったです。
どんどん広がる、Flutter 開発の可能性
━━今気になる Flutter 界隈の技術動向があれば教えてください。
田代（新規）：自動車メーカーがカーナビを Flutter で作るみたいに、Flutter を書ければアプリだけじゃなく世の中のいろいろなものを作れるようになっているのは未来があるなと思いますね。
柿崎（Fansta）：Flutter2.8 くらいからゲームも作れるようになって、いよいよ必要なサービスやゲームは大体作れるなという気がしてきました。Flutter を使ってのゲーム開発が、今後どんな方向に進んでいくのかはかなり気になりますね。
━━すごいスピードでできることが増えていますよね。Flutter におけるサービス開発で課題に感じていることはありますか？
川島（新規）：複雑なものを作ろうとするときのナレッジがまだあまりないですね。基本的なものは Flutter 側で用意されているのでシンプルな画面は簡単に作れるのですが、そこから発展させて要素が込み入った画面を作ろうとすると融通が効かない部分があります。自分がそういった部分でしばしばつまずいていたので、社内でナレッジシェアに使われている DocBase に記事を書くなどして社内へのナレッジを溜めていきたいです。
沼田（Fansta）：自分は Web も一緒に書けたらいいなと思います。今ある Fansta の Web を Flutter に置き換えられるかと言われたらそうではないので、今後に期待です。
━━あらゆるところで活用できているというわけではないんですね。
川島（新規）：使う企業が増えてきてパブリックな情報もどんどん増えているので、そんなこともない気がします。Web の選択肢の1つに Flutter が加わったようなイメージで、フロントエンドのフレームワークとしてはかなり大きくなりつつあると思います。
━━なるほど。知見が溜まってきたら、Web でももっと活用できそうですね。最後に、何か他に期待していることはありますか？
柿崎（Fansta）：証明書の管理も Flutter 側でできるようになれば嬉しいです。Android のマニフェストファイルだったり、iOS の .plistファイルだったり、結局ネイティブ側を触らないといけないことが多くて。CI/CD も割と一緒になってきたとはいえ、それぞれ証明書を用意する必要があるので、いつか Flutter 側でまとめて吸収できるようになって欲しいです。そうすれば更にアプリ開発がとっつきやすくなりそうですし、Flutter の今後に期待しています。
・・・
MIXIでは様々な事業やポジションで仲間を募集中です。
こちらの記事を読んでいただき、MIXI で働くことに興味を持ってくださった方がいましたら、ぜひ採用情報をご覧ください。MIXI ENGINEERS の公式 Twitter でも MIXI で扱う技術やエンジニアに関する情報など、随時発信してますので、フォローしていただけると幸いです。
それでは、最後までお読みいただき、ありがとうございました！
