Angularで作るモバイルアプリ開発〜スタートアップの開発事情〜

こちらのイベントで登壇したときの資料です。
https://voicy.connpass.com/event/220158/

Transcript

1. Angularで作るモバイルアプリ開発 〜スタートアップ開発事情〜 榊原宏祐 株式会社キネカ

2. 経歴紹介
 榊原宏祐/@scrpgil ・2012年、NECのグループ会社に組み込みエンジニアとして新卒入社。 ・2016年、美容系スタートアップにジョインしてWebエンジニアに転向。 ・2018年、現職のキネカにジョインしてIonic/Angularでアプリ開発。 ・2019年、創業CTOより、キネカの開発チームを引き継ぎ。
3. 経歴紹介
 榊原宏祐/@scrpgil ・2012年、NECのグループ会社に組み込みエンジニアとして新卒入社。 ・2016年、美容系スタートアップにジョインしてWebエンジニアに転向。 ・2018年、現職のキネカにジョインしてIonic/Angularでアプリ開発。 ・2019年、創業CTOより、キネカの開発チームを引き継ぎ。
4. 会社概要
 ・株式会社キネカ
 ・2017年1月設立
 ・代表者：平塚満
 ・平均年齢：23~24歳
 ・事業内容：エンタメマッチングアプリ「pato」の開発、運営
 

6. 成長推移

7. 技術スタック
 ・フロント：Angular、Ionic ・バックエンド：Ruby on Rails ・インフラ：GCP ・その他 Cloud SQL（MySQL）、Elasticsearch、Fluentd、BigQuery、Redash、New Relic、 Stackdriver、CircleCI、esa、Slack、GitHub、Asana
8. フェーズ
 • ph1：PMF期（2018年） ◦ 技術選定、コア機能の磨き込み。 • ph2：グロース期（2019年1月~2020年8月頃） ◦ サービス成長に伴うインフラ強化。 CircleCI導入、ビルド時間削減 • ph3：チーム拡大期（2020年9月〜2021年） ◦ 人員増に対応するためにビジョン作成、開発 KPI導入
9. ph1：PMF期（2018年）

10. PMF期で意識したこと
 • スピードが命！
 ◦ 検証を素早く回し、PMFまで最速でたどり着くかが勝負
 ◦ コア機能以外へはコストかけられない
 ▪ 特にpatoのようなサービスは世になかった。
 
 • マルチプラットフォーム対応は必須
 ◦ マッチングアプリという特性上、Web版必要だよねとなった。
 ◦ 必然的にクロスプラットフォームのフレームワークを選択

11. クロスプラットフォームについて
 一つのコードベースから、複数のプラットフォームへ展開可能。 初期はプログラマーも、デザイナーも１人で済む（ことが多い） プログラマー FW プラットフォーム
12. Ionic / Angularを採用
 • 創業CTOがIonicの知見が多かった ◦ 使い慣れたライブラリを採用 • モバイルアプリを作成するためのUIフレームワーク ◦ 普通に優秀なUIライブラリ。Ionic 3までは、Angularを使って作られている。 • Live Updateの仕組みがある！ ◦ 軽微な修正ならストアの審査を通さずに更新可能。 ◦ PMF期において採用の決め手になった。
13. Ionic / Angularを採用

14. PMFを果たしグロースフェーズへ

15. ph2：グロース期
 （2019年1月~2020年8月頃）

16. この時期に起きた問題
 • サービスの成長によりユーザー数増加 ◦ 2万→10万人以上 • インフラの強化が急務 ◦ オートスケール * サーバー側 ◦ CI/CD環境の構築 ▪ ビルドはローカルマシンで行っていた・・・
17. CircleCIの導入
 • ローカルで行っていたビルドをCircleCIに置き換え • 複数のプラットフォームへ同時リリースが可能になった。
18. ビルド時間の削減
 • CI導入当初、ビルド時間は30分ほど ◦ この待ち時間は辛い・・・
19. ビルド時間の削減
 • ビルドが遅い原因を調査 ◦ 共通モジュールの肥大化が原因だった。 ▪ 50近くまとまっていた共通モジュールを全部分割しました • 30分→15分までビルド時間短縮！ ◦ Angularのバージョンアップ（ 5系→6系） ▪ 15分→7分まで短縮
20. 結果として
 • スケールに耐えられるインフラ環境が構築 • 開発メンバーが増えても煩雑にならないCI環境ができた ◦ エンジニアが増員。3人から10人へ
21. Ph3：チーム拡大期
 （2020〜2021年）

22. ビジョンの策定
 • チーム全員が持っていてほしいマインドを明文化 ◦ “圧倒的ハイパフォーマーなチームになり、ユーザー目線のプロダクトを作り続ける ”
23. 開発KPIの導入 「LeanとDevOpsの科学」 ハイパフォーマーな開発チームを 4つのキーメトリ クスで測定。
24. パフォーマンス指標の導入 「LeanとDevOpsの科学」より、ハイパフォーマンスなチームの定義 ハイ パフォーマー キネカ 開発チーム ミディアム パフォーマー ロー パフォーマー デプロイ頻度 オンデマンド (1日複数回) 1日平均8~10回 週1回から 月1回 週1回から 月1回 変更失敗率 0-15% 12.17% 0-15% 31-45% 変更の リードタイム 1時間未満 未計測 1週間から 1ヶ月 1週間から 1ヶ月 MTTR 1時間未満 未計測 1日未満 1日から1週間
25. KPIを追う仕組み
 • Slackへ投稿したリリース数を自動カウント
 
 • 1日7リリース。
 
 • 主要KPIをモニターに写して座席近い場所に表示。
 ◦ 特に効果があったのはこれ。

26. KPIを追う仕組み
 DX Criteria参照： https://dxcriteria.cto-a.org/dbe77e79f1b34b0e897338693091ad99
27. 振り返ってみて・・・

28. • Ionic/Angular選択してよかった。
 ◦ モバイルアプリの開発をWebと同じ開発体験で続けている
 ◦ 現在のハイパフォーマンスな開発体制にだいぶ寄与している
 ◦ 初学者でも学習コスト低い
 振り返ってみて・・・

29. • 改善点
 ◦ アーキテクチャ的な所は知識不足も目立った。
 ◦ ComponentModuleの分割など、最初から将来を見越していたら、やる必要ないものも多く あった。
 振り返ってみて・・・

30. • Angular 6、Ionic 5へのバージョンアップ
 
 • 技術的負債を解消し、より堅牢なアーキテクチャへ
 今後の課題

31. 全セグメントで採用強化中
 • 開発
 ◦ サーバーサイド、クライアントサイド、コーポレートエンジニア、分析エンジニア
 
 • デザイナー
 ◦ UIデザイナー、グラフィックデザイナー 
 
 • ビジネス
 ◦ 営業、経営企画、カスタマーサポート/カスタマーサクセス
 
 • etc...

32. • ご清聴ありがとうございました。