フロントエンドエンジニアがモバイルアプリ開発に参画した話

私はアンドパッドでフロントエンドエンジニアとして働いている大西です。VueやNuxtを利用したフロントエンド開発を担当しています。アンドパッドではフロントエンドの開発を１年ほど行ってきました。しかし、今年からはフロントエンドだけでなくモバイルアプリ開発にも参画することになりました。

この記事では、モバイルアプリ開発の見習いがスムーズに参画するために行ったこと、そしてフロントエンドからモバイルアプリ開発に参加することで生まれたチームへのシナジー効果について紹介したいと思います。

どうしてモバイルアプリ開発に参画したのか？

私がモバイルアプリ開発に取り組むことになった理由は２つあります。

１つ目の理由は、チーム体制の再編によってチームのモバイルアプリエンジニアが少なくなり、大変そうだったからです！私が開発しているANDPAD検査は中規模なチームで開発をしています。エンジニアはフロントエンド・モバイルアプリ・バックエンドを専属で担当しており、高い専門性を持っている素晴らしいメンバーです。

プロダクトの成長のためにはフロントエンド・モバイルアプリ・バックエンドの開発スピードのバランスが重要だと思っています。以前データ構造変更による破壊的変更があり、未対応のモバイルアプリがクラッシュする事象がありました。その変更をリリースするために、なるべく早いモバイルアプリの対応が望まれていました。しかし、チームのモバイルアプリエンジニアが少なくなりなかなか対応できず、プロダクトの成長にも影響が出てきたと感じたため、全体的な生産性を上げるようにモバイルアプリの開発に参加しました。

ANDPAD検査

２つ目の理由は、開発時のコミュニケーション不足で生じたフロントエンドとモバイルアプリ間の細かいUI・UXを改善したかったからです。

開発時の進め方として、フロントエンド・モバイルアプリ・バックエンドの各エンジニアが機能開発を行っています。仕様や機能に関することはDesign DocやFigmaなどで共有されていますが、フロントエンドとモバイルアプリで文言などの表現に揺らぎがありました。プロダクト全体のUI・UXの最適化が行われていない状態であり、この状況を改善するためにフロントエンドとモバイルアプリを横断的に見る必要がありました。

爆速でモバイルアプリ開発に参画するため行ったこと

Flutter入門

ANDPAD検査のモバイルアプリ開発ではFlutterを採用しています。まずはフレームワークのFlutterの勉強をしました。Flutterの教材は日本語ではあまり提供されていません。初心者にとってとっかかりやすい記事がいくつかあったので、そちらを参考に簡単なモバイルアプリをいくつか作りました。そこでWidgetなどの基本的な機能について把握しました。

Flutter学習するに当たり参考にしたサイト

モバイルアプリ開発者の助けを借りる

Flutterの勉強を行いつつプロダクトのコードを読み解くことを行いました。ただモバイルアプリ駆け出しでは全体を把握することに限界があります。そこでチームのモバイルアプリエンジニアに助けを求めました！

オリエンテーションの開催

他のエンジニアにもモバイルアプリ開発に興味を持ってもらいたかったので、オリエンテーションを開いてもらいました。オリエンテーションでは環境構築で引っかかるポイントなどを共有してもらっています。

紹介してもらった内容の抜粋

Flutter開発に必要なアプリケーションの紹介(Android Studio, Dart SDK, fvm)
Flutterの設定
Android Studioの設定
ビルド方法と実行
ユニットテスト

ペアプロ

プロダクトの実装をいきなり１人で始めることはハードルが高いと思います。まずはモバイルアプリエンジニアの方とペアプロを行い、安全に実装に取り掛かるように心がけました。ペアプロの進め方は初心者の私がドライバーとなり画面の共有を行いながら実装をして、モバイルアプリエンジニアの方にナビゲートしてもらう形で進めました。

私がペアプロするときに気をつけたポイントは３つです。

１つ目は最初に目標を共有することです。今回のペアプロで実装したい機能を共有しておくことで、ドライバーとナビゲーターで意識を合わせるようにしています。

２つ目は実装方法を話してから実装することです。自分の考えを先に壁打ちのように話すことで手戻りが少なくなります。駆け出しでフレームワークの機能を十分に理解できていないことを念頭にいれて、ナビゲーターに質問するのも良いと思います。

３つ目は１回の時間を最大１時間で設定する。慣れていない作業は思ったよりも疲れます。なるべく課題を小さくして、細かくペアプロすることを意識しました。

ペアプロ時には録画を行い、あとからでも見直せるようにしています。ペアプロで学習したタスクと関連する課題を繰り返しこなし、モバイルアプリ開発に慣れていき、直近３週間で15個のPRを作成しました。

やってみた感想

新しい言語やフレームワークに挑戦するなら、プロダクト内で参画することがオススメです！モバイルアプリ開発に参画することでプロダクトに対する視点が大きく広がりました。フロントとモバイルアプリで設計が異なることも分かり、プロダクトに対する新しい知識を得ることができました。

もともとのドメイン知識を生かしてモバイルアプリの実装ができるため、モバイルアプリ開発未経験でもモバイルアプリの設計を理解しやすくスムーズに参画できました。またペアプロで開発を進めることで、不慣れなモバイルアプリ開発でも一定の開発速度は出せたと思います。

チームへのシナジー効果

フロントエンドから未経験のモバイルアプリ開発に飛び込むことによって、他のメンバーにも刺激を与えることができたと思っています。ANDPAD検査はフロントエンド・モバイルアプリ・バックエンドのエンジニアが専門ごとに開発運用しています。その専門ごとの壁がなくなり始め、垣根を超えた開発が始まっています。バックエンドエンジニアがフロントエンドのリポジトリにPRを出したり、他フロントエンドのエンジニアもモバイルアプリ開発に参加しようと動き出し、良い影響が生まれています。