Webエンジニア主体のモバイルチームの 生産性を高く保つためにやったこと

12/11に行われたReact Native Meetup#19にて発表したスライド。不備があったらこっそり教えてください。

React Native Meetup#19
https://techplay.jp/event/964595

スライド内のデモの動画のURL
https://youtube.com/shorts/2oq2LOeyuxM?feature=share

発表者
https://x.com/_igreenwood
https://github.com/igreenwood

Transcript

1. Webエンジニア主体のモバイルチームの 生産性を高く保つためにやったこと 2024/12/11(水) Ubie株式会社 青木一生
2. 2 自己紹介 青木一生 プロダクトプラットフォーム本部 モバイルアプリ開発リード 2012年からAndroid開発に従事し、様々な会社でtoC向けのモバイル開発を行いながら、OSSライブラリの開発や技術同人誌の執 筆活動なども行う。 フリーランスなどを経て2021年3月にUbieに入社。入社後は主にToC向けのWebおよびモバイルアプリの開発を担当し、2024年か らモバイルアプリチームのリードを務める。React Native開発は1年目。 toC向けのプロダクト開発 開発していたOSSライブラリ
3. 事業紹介 3 自分の症状を答えるだけで、 参考病名や近くの医療機関等 「受診の手がかり」が調べられます 医療現場で実際に使われ鍛えられた AIを、 生活者が適切な医療にかかる目安として開放しています (2020年提供開始 ) 無料で 誰でも いつでも ほぼ全ての症状で ＊ ＊99% (1.3万超)の症状に対応 生活者 医療機関 製薬企業 生活者向け事業
4. 事業紹介 4 生活者 医療機関 製薬企業 4 体調変化の「なぜ」 が調べられる 受診の「どこに」 が調べられる 診察時の「何を話せば?」 が調べられる 症状に関連する参考病名と その理由 適切な診療科 症状に関連する近くの医療機関 あなたが医師に伝えるべき症状 あなたの回答結果を ユビーが「医師語」に翻訳。 受診先に事前共有し、伝え漏れを防止
5. 5 アーキテクチャ (Expo managed workflow + WebView) 5 ※WebViewからReact Nativeの関数を型安全に呼び出 す https://zenn.dev/ubie_dev/articles/e720224828aa43 ※
6. 6 もしも・・・ 6 React Native1年目の自分1人で運用しているモバイルチームに モバイル未経験のWebエンジニアが7人入ることになりました。 チームをワークさせるために、あなたならどうしますか？
7. 7 やったこと 7 • ドキュメントの充実 • Android Studio/Xcodeを使わない • UIライブラリを使わない • workflowによる自動化 • デバッグを支援するコンポーネントづくり • etc 生産性を下げる原因（つまずきポイント）を予めリストアップして、影響人数が大きいものから潰していく ※上3つは最初からやろうと決めていたもので、それ以降に関しては走りながら困りに気づいてやったもの
8. 8 ドキュメントの充実 8 • 初期構築〜デバッグ • ディレクトリ構成 • ブランチモデル • iOSのテスト端末追加 • 命名規則 • push通知のデバッグ方法 • リリース方法 , etc… 初期構築からデバッグ出来るまでの流れや、リリース方法やコーディングルール的なものまで、 githubとnotionに一 通り作成しています。
9. 9 Android Studio、Xcodeを使わない 9 Ubieではネイティブアプリの有識者が少ないという事情があり、 Android Studio/Xcodeを使わずに開発をしていま す。理由としては、 • Androidのgradle周りの設定や iOSのプロビジョニング周りの設定、 IDEの使い方でハマりがち • 人数が増えると特定の個人の環境でしか起きないトラブルなども増えサポートコストが高い などがあり、デバッグ、ビルド時の問題はチームの生産性・モチベーションに大きく影響するので、 Ubieでは全ての 環境向けのビルドを npm-scriptsで実行できるようにして、基本的に Android Studio、Xcodeを使わずに開発してい ます。
10. 10 UIライブラリを使わない 10 外部のUIライブラリを導入した場合、標準のコンポーネント利用する場合と比較して • 学習コストが高い • 不具合が起きた場合に事例や対処方法を見つけるのが難しい • ドキュメントに書かれている範囲を超えた瞬間に調査などのコストが跳ね上がる • React Native初学者は Stylesheetのクセでつまずくので、 UIライブラリ起因の問題が絡むと問題の解決 に時間がかかる 等のデメリットがあります。 これらのコストはWebから入ってきたメンバーには負担ですし、有識者が少ないチームではサポートも負担になると 考え、外部のUIライブラリを剥がし、業務委託のメンバーに作成してもらった Ubie UIに準拠する薄いコンポーネント 群を利用しています。
11. 11 workflowによる自動化 11 OTA Updateのメリットを最大限に生かすためには、ストア申請中も mainブランチにはhotfixをマージできる状態を 維 持したいです。そのために git-flowのようにmainとは別に開発用のブランチを用意する必要があり、少し複雑なので ブランチモデル運用の補助として workflowを積極的に利用しています。
12. 12 実際に使われている workflow 12 • トピックブランチ作成時の fingerprintによるOTA Update可能かのチェック • トピックブランチから mainブランチへのPR作成の禁止 • OTA Update用のブランチ、ストアリリース用のブランチ +PR(to main, to 開発ブランチ)の作成 • OTA Update用のブランチに開発用ブランチから変更が取り込まれてないかのチェック • OTA Update用のブランチから開発ブランチへの PRのauto-approve, auto-merge • mainブランチにマージされた際の OTA Update、リリース作成 • ストアリリース用ブランチからの PRに対するfingerprint更新、バージョンタグの付与 • push時にpackage.jsonが変更された場合の expo-doctor • push時のlint,test • 社内確認用のビルドの作成、ストアリリース用のビルドの作成
13. 13 デバッグを支援する仕組みづくり 13 アプリのデバッグをする際の大きな障害の１つとして実機でのデバッグがあります。デバッグのために USBケーブ ルを繋がないといけないですが、 • USBケーブルがなかなか認識されない • アプリ起動直後はログがうまく転送されてこない • 不具合が起きたことを確認してからケーブルをつないでも不具合のログは見られない • 本番用のビルドではログが見られない など多くのアプリ開発者の悩みの種です。 Ubieではこれを解決するために、アプリ内の Viewでターミナルから確認するのと同等のログを見られるようにしまし た。
14. 14 デモ 14 https://youtube.com/shorts/2oq2LOeyuxM?feature=share
15. 15 実際どうだったか 15 • ドキュメントの充実 : ⚪ ◦ 書いただけでは読まれないけど、聞かれた時に自分の同期対応コストをなくせるのは大きい • Android Studio/Xcodeを使わない : ◎ ◦ これをやらないと 1人でのサポートは無理だった • UIライブラリを使わない : ◎ ◦ UIに関する問い合わせはほぼゼロ • workflowによる自動化 : ◎ ◦ 慣れてもらうまでは少し大変だけど、リリースサイクルの高速化に一番貢献してそう • デバッグを支援するコンポーネント作り : ◎ ◦ ネイティブアプリのエンジニアをやっている時と比較しても不具合発生時の調査にかかるコストが圧倒的に下がった。出した次の週 からかなり使われていた