Mercari 10years iOS Development

1
メルカリ10年間のiOS開発の歩み
iOSDC Japan 2023
@motokiee

View Slide

2
● 株式会社メルカリ 
● Director of Engineering 
● 2016年入社 (在籍7年) 
● メルカリ本体や新規事業の開発を経て 
現在は Mobile, Web, Backend のArchitect
チームを管轄 
● 現在 iOSアプリ開発はしていない 
● 2016年〜2019年まで iOSDC の 
コアスタッフ 
@motokiee 

View Slide

3
10年で会社、サービス、iOS関連技術が
どのように変化してきたか
このトークで得られること
10年続くサービスのアーキテクチャや
Tech Stack の変遷
エンジニアとしてこれからの変化にどう対応して
いくかのヒント
02
03
01
04 温故知新、Connecting the dots

View Slide

4
メルカリについて
ミッション&バリュー

View Slide

5
ミッション
「限りある資源を循環させ、より豊かな社会をつくりたい」。創業者である山田進太郎が世界一
周の旅で抱いた、そんな問題意識によって生まれたのがフリマアプリ「メルカリ」です。テクノロ
ジーの力によって、世界中の個人と個人をつなぎ、誰もが簡単にモノの売り買いを楽しめる。
それにより資源を循環させる豊かな社会、個人がやりたいことを実現できる社会をつくってい
きたいと考えています。
あらゆる価値を循環させ、
あらゆる人の可能性を広げる
https://careers.mercari.com/jp/mission-values/

View Slide

6
バリュー
Go Bold
All for One
Be a Pro
https://careers.mercari.com/jp/mission-values/

View Slide

7
メルカリについて
フリマサービスとして

View Slide

8
https://about.mercari.com/press/news/articles/20230630_infographics/

View Slide

9

View Slide

10

View Slide

11

View Slide

12
Overview

View Slide

13
年表

View Slide

14
Build

View Slide

15
Explore

View Slide

16
Re-architecture and
Foundation

View Slide

17
Rewrite

View Slide

18
Post Rewrite

View Slide

19
2013年
メルカリの誕生

View Slide

20
2013年のiOS周辺技術の主な出来事
● iOS7が発表
● iPhone 5s、iPhone 5c が発売

View Slide

21
● フリマアプリ「メルカリ」開始
○ 2013年7月2日にAndroid版スタート
○ 2013年7月23日にiPhone版スタート
● 「App Store Best of 2013 今年のアプリ」を受賞
○ https://about.mercari.com/press/news/articles/
201312appstore/
サービスとしての主な出来事

View Slide

22

View Slide

23
2013年のプレスリリース
https://about.mercari.com/press/news/articles/mercari_iphone/

View Slide

24
v1.0.1のスクリーンショット（2013年7月リリース）

View Slide

25
2013年: git log から見るメルカリiOS
コミッター数
(重複あり)
コミット数 diff
3 2,073 ++223,767
--123,973

View Slide

26
メルカリiOSのイニシャルコミット
JST だと 2013年03月15日(金) 21:17

View Slide

27
このバージョンはステルスでリリースされていた模様
メルカリ最初のバージョンリリース

View Slide

28
2013年7月18日、メルカリ v1.0.1 がストア公開される。対外的
には7月23日にプレスリリースを出している。
2013年3月の最初のコミットから約4ヶ月の開発期間を経ての
リリースだった。
メルカリ最初のバージョンリリース

View Slide

29
iPhone版リリース初日(7/23)は約2,000ダウンロード
年末までの半年弱で100万ダウンロードを突破する

View Slide

30
● Objective-C、MVC(Model-View-Controller)ベー
スの開発
○ iOS4~iOS7がサポート対象
● UICollectionViewはiOS6以降サポートだったため、
iOS4, 5向けには PSTCollectionView を
使っていた
● AFNetworking, SVProgressHUDなどお馴染みの
Libraryに加え、まだ Apple に買収される前の
Testﬂight SDK も利用されていた
2013年の技術トピック1

View Slide

31
● スキューモフィズムUI
● 最初のPull Request(2013年3月18日)のassetを見
ると、スキューモフィズムでデザインされている

View Slide

32
● 最初期は WebViewベースのアプリを検討していた
● ベストな体験の提供が難しいと判断し、ネイティブでの
開発に切り替え

View Slide

33
2014年
初のTV CM放映と急成長

View Slide

34
● Swift 発表
● iOS8 発表
● iPhone 6, iPhone 6 Plus
● Apple Watch 発表 (9月、発売は2015年)

View Slide

35
● 初のテレビCM
● 500万ダウンロード突破(9月)
● カスタマーサービス(CS)拠点開設
● メルカリUSがスタート
2014年のサービス・会社としての主な出来事

View Slide

36

View Slide

37
5 2,627 ++334,919
--225,045
コミッター数
(重複あり)

View Slide

38
● 2014年7月にリリースされた v3.0.0
でデザインがリニューアルしフラット
デザインっぽく
● 2019年のメルペイリリースまでv3系
が続くことになる長寿なバージョンに

View Slide

39
● 引き続きObjective-C
○ 2014年にSwiftが発表されたものの、2014年内のソー
スコードにSwiftのコードが入ることはなかった
● ReactiveCocoa が導入され、一部の画面で
MVVM(Model-View-ViewModel)での実装がスタート
● CocoaPods でのライブラリ管理がスタート

View Slide

40
● 日本とUSのサービスでソース
コード共有されるようになる
● コードは共通だが、国ごとに
ターゲットを分けて別バイナリ
を配布するアプローチを採用
（後に見直される）
https://speakerdeck.com/bricklife/iosban-gurobarudui-
ying-falsemin-toji?slide=9

View Slide

41
[オフトピック] 俺、お祈りされる
● 2014年初頭にメルカリに
応募していたが書類選考落ち
● 2016年に再チャレンジして入社

View Slide

42
2015年
体験の磨き込み

View Slide

43
● Swift 2 発表
● iOS9 発表
● iPhone 6s, iPhone 6s Plus
● Apple Watch 発売 (4月)

View Slide

44
● 1月に1000万ダウンロード突
破
● らくらくメルカリ便の
スタート
● 新規事業を手掛ける子会社
ソウゾウの設立
https://about.mercari.com/press/news/articles/20150202_infographic/

View Slide

45

View Slide

46
11 3,123 ++545,784
--425,154
コミッター数
(重複あり)

View Slide

47
● 一部の画面やExtensionがSwiftで実装される
● らくらくメルカリ便などフリマアプリとしての基本的な体験を
改善する施策が数多く実装

View Slide

48
● 前年導入したReactive Cococaに続き、新規事業で
の RxSwift の導入がスタート
● 2015年後半から新規事業の準備が始まり、
Objective-Cではなく、フルSwift かつ RxSwift での
実装がスタートし、新しい技術の探索がはじまる

View Slide

49
2016年
USへのフォーカスと新規事業

View Slide

50
● iOS10 発表
● iPhone 7, iPhone 7 Plus
● 第1回 iOSDC Japan 2016 が開催

View Slide

51
● 参加者やスポンサーが集まるか不安なな
かでのスタート
● 「誰も来てくれなかったら会場費用自腹で
もくもく会をやる」と度々言っていた主催者
の長谷川さん
● メルカリは第1回から今回まで8年連続で
iOSDC Japan をスポンサーとして応援し
ています！
第1回 iOSDC Japan 2016
2016年1月第一回スタッフ会議の様子

View Slide

52
● 匿名配送でより安心して取引できるように
● アメリカのApp Store で US版メルカリが Top3にラ
ンクイン
● 新規事業であるメルカリアッテがリリース
（クローズ済み）
https://about.mercari.com/press/news/articles/20160317_mercariatte/

View Slide

53

View Slide

54
16 5,040 ++2,087,799
--1,461,087
コミッター数
(重複あり)

View Slide

55
● メルカリ本体ではReactiveCococa、新規事業では
RxSwift が採用され、リアクティブプログラミングの知
見が社内に溜まっていく
● メルカリ本体はObjective-C と Swift の併用、新規事
業はフルSwift
● Carthage が導入される
2016年の技術トピック

View Slide

56
10年の調査に必要だったもの
オフトピック
インターネットサービスの考古学

View Slide

57
バージョン管理ツールを使う
● コードはバージョン管理されているので
一番カンタン
● git, GitHubなどでログを見ればOK
● 複雑な条件のシェルスクリプトを ChatGPTに依頼

View Slide

58
● 昔からいる人に話を聞く
● 10年経過すると退職されている方が多い
● 直接に聞くのも憚れるためなんとか自分でデータを
発掘することに
先人に頼る

View Slide

59
● Slackで過去ログを検索
● 10年経つとコミュニケーションツールも変わる
● Slack導入以前の情報を得るには別のツールに頼
る必要がある
● メルカリ社内の歴史はSlack以前、以後に分かれ
る
コミュニケーションツールを使う

View Slide

60
● プロダクトの情報としては信頼度が高い
● ただし途中で Redmine から JIRAに切り替わっている
● Redmineもまだ生きているが検索はもうできない
○ どちらにしろチケット多すぎて見きれない
○ Pull Request に書かれているチケット番号らしきものを
手がかりにして調査しながら当時の動きや流れを把握
チケット管理ツールの探索

View Slide

61
デザインファイルの捜索
● デザインファイルはコードのようにバージョン管理されない
● この10年でツールが目まぐるしく移り変わった
○ Photoshop, Sketch, Zeplin, Figma
● 管理する場所も Dropbox → Google Drive に
● 在籍歴の長いデザイナーに発掘を依頼しGet
● App Store Connect APIを駆使してスクリーンショットの発掘に
成功

View Slide

62
● git, GitHub を使う
● 先人に頼る
● コミュニケーションツールを使う
● チケット管理ツールで検索
● デザインファイルをたどる
→ git 以外はいずれもなくなってしまう可能性が高い
まとめ Tips

View Slide

63
2017年
New Businesses

View Slide

64
● iOS11 発表
● iPhone X

View Slide

65
● 出品機能にAI導入
○ 画像からタイトルやカテゴリを推測
● ゆうゆうメルカリ便の提供開始
● 1億ダウンロードを突破(12月)
2017年のサービス・会社としての主な出来事 1

View Slide

66
● USメルカリがリニューアル(iOS版は6月)
● イギリスでサービスローンチ(3月) ※終了済み
● メルカリ内新サービスや姉妹アプリが続々とリリース
○ メルカリカウル(5月)
○ メルカリメゾンズ(8月)
○ メルカリチャンネル (7月)
○ メルカリ Now(11月)
○ ※全てクローズ済み
● メルペイ設立
2017年のサービス・会社としての主な出来事 2

View Slide

67

View Slide

68
24 6,057 ++401,142
--362,530
コミッター数
(重複あり)

View Slide

69
● USアプリのRewriteプロジェクト “Double” は
ネイティブコードに加えて React Native を導入
● ソウゾウから立ち上がった姉妹アプリは全てメルカリアッテの
設計をベースとし、Swift, RxSwift, MVVM で
開発されていた
● メルカリ本体の新機能のメルカリNow、
メルカリチャンネルもSwiftでの開発

View Slide

70
● Objective-C と Swift 、新しい画面と古い画面が
混在するようになり少しずつ課題となってきていた
● 事業として重要なコンポーネントほど複雑になる一方、
複雑がゆえに改修が困難な状態
● また複数人で同じ機能に改修を入れる際、コンフリクトが発生
しやすくなり、人数を増やしても開発の速度が
上がりづらくなっていた

View Slide

71
2018年
Re-architecture

View Slide

72
● iOS12 発表
● iPhone Xs, iPhone Xs Max, iPhone XR

View Slide

73
● メルチャリのリリース(2月) ※事業譲渡済み
● マザーズ上場(6月)
● メルカリロゴのリニューアル (10月)
● メルカリアッテ、メルカリカウル、メルカリメゾン
ズ、メルカリNOW などがクローズ
● 海外からの採用が進む

View Slide

74
93 22,522 ++1,006,104
--724,462
コミッター数
(重複あり)

View Slide

75
2018年10月ロゴリニューアル

View Slide

76

View Slide

77

View Slide

78
2018年の技術トピック - Re-architecture
● アプリのフル書き換えは選択せず、少しずつ画面を書き換
えていく方針
● コンポーネントベースで同時並行での開発を可能にする
MicroViewController
● 複雑な画面の書き換えを目的とし、
テストや仕様書を充実させながらプロジェクト進行

View Slide

79
https://fortee.jp/iosdc-japan-2018/proposal/ef7c210d-d4dc-4a91-9601-e9d1edba441a

View Slide

80
● ロールアウトプラン
○ 新旧画面で機能は変更せず、A/Bテストを実施してKPI
に劣後が出ないかを確認しながらロールアウト実施
○ Feature Flag で新旧画面を切り替え、BIチームと連携
して重要指標をトラッキング

View Slide

81
● 結果1: 事業にも良い影響
○ 主要画面（出品、商品詳細、検索）の書き換え完了
○ 一部の画面ではパフォーマンスチューニングの結果、事
業KPIを大きく向上させたもの

View Slide

82
AB test started
New ItemDetail
Legacy
ItemDetail

View Slide

83
● 結果2: 着実に進行したが一部課題も残る
○ 2018年7月にスタート以降、継続して取り組みが行われ
約1年後には全ての画面のリプレイスが完了
○ テストは以前に比べてかなり充実
○ 仕様書については継続的にアップデートが行われず課
題として残り続けることになった

View Slide

84
● 結果3: エンジニアの人数と比例して生産性も向上
○ コミッター数が約4倍に
○ コミット数が 3倍以上に
○ コードの追加・削除も文字通り"桁違い"に
■ 2017: ++401,142, --362,530
■ 2018: ++1,006,104, --724,462

View Slide

85
開発速度が急加速

View Slide

86
● チームとしての変化
● プロダクト開発を行うチームとは別に横断的な改善の
重要度が上がり、“iOS Core” チームが組成
● 2023年現在も Mobile Architect と Mobile
Platform と名称を変更して継続している

View Slide

87
● バックエンドで Microservice Migration がスタート
● gRPC がバックエンドで使われ始め、
クライアントで Protocol Buffers が利用され始める

View Slide

88
2019年
メルペイスタート

View Slide

89
● メルペイローンチ(2月)

View Slide

90
● SwiftUI発表
● iOS13, ダークモード発表
● iPhone 11, iPhone 11 Pro,
iPhone 11 Pro Max
● iPadOS が iOS から独立

View Slide

91

View Slide

92
● スマホ決済機能をメルカリアプリに組み込むための
“Merpay Integration” プロジェクトが2018年から進行
● Merpay はSDKとしてモジュール化して提供、
2018年から進行していたRe-architecture と並行して開
発が進んでいた

View Slide

93
ハンバーガーメニューから下タブUIへ

View Slide

94
130 35,602 ++1,176,271
--2,225,962
コミッター数
(重複あり)

View Slide

95
● Re-architecture が約1年を掛けて完了
○ 主要画面以外のRe-architectureも完了
○ 下タブ化 = Merpay Integration が完了

View Slide

96
● Re-architectureによって大部分が
Swift に書き換えられた
● Re-architecture 前後での比較 (2018年→2019年)
○ Swift: 約20% → 約85%
○ Objective-C: 約75% → 約15%

View Slide

97
● Design System プロジェクトがスタート
○ スケーラブルな開発を実現しながら、
一貫したデザインと体験を実現するための
PM/Designer/Software Engineerの共通言語が必
要だった
○ Re-architecture された画面をベースに
Design System コンポーネントを適用

View Slide

98
2020年
GroundUp Appプロジェクト始動

View Slide

99
● iOS14
● iPhone 12, iPhone 12 mini,
iPhone 12 Pro, iPhone 12 Pro Max
● Apple Silicon 発表、M1 MacBook 発売

View Slide

100

View Slide

101
134 29,186 ++436,644
--323,477
コミッター数
(重複あり)

View Slide

102
● アプリ開発周辺基盤強化が本格化
○ Design System (2019年から継続)
○ Test Automation (UI Test 強化)
○ Weekly Release
○ Client Event Logging
2020年の技術トピック - アプリ開発周辺基盤強化

View Slide

103
2020年の技術トピック - アプリ開発周辺基盤強化
● アプリ開発周辺基盤強化の背景
○ 2018年からメルカリ・メルペイなど
グループ会社をまたぐ活動が増加
○ スケーラビリティを実現しつつ、機動力を
維持するシステムやメカニズムの
需要が高まった

View Slide

104
● GroundUp App プロジェクトの開始
● アプリをゼロから書き換えるプロジェクト
● 大規模リファクタリングではなく、
"GroundUp" でベースから書き直すことを選択
● “式年遷宮” を行う意思決定
2020年の技術トピック - GroundUp App 始動

View Slide

105
● 方針
○ 宣言的UI (Swift UI, Jetpack Compose) をベースに
iOS/Androidアプリをゼロから作り直し、Platform が提
供する新機能に素早く対応していけるようベースから書き
直す
○ レガシーアプリ開発チームとは別に専属チームが
独立して開発をスタート
2020年の技術トピック - GroundUp App 始動

View Slide

106
GroundUp App / Micro Modular Architecture
https://fortee.jp/iosdc-japan-2020/proposal/28a29ff0-37e1-41fd-82d4-74f20c4df864

View Slide

107
2020年: git log から見るメルカリiOS (GroundUp)
24 2,187 ++103,972
--39,064
コミッター数
(重複あり)

View Slide

108
2020年: git log から見るメルカリiOS (レガシー)
134 29,186 ++436,644
--323,477
コミッター数
(重複あり)

View Slide

109
2021年
再チャレンジ

View Slide

110
● iOS15 発表
● iPhone 13, iPhone 13 mini,

View Slide

111

View Slide

112
121 16,020 ++433,319
--482,194
コミッター数
(重複あり)

View Slide

113
60 2,099 ++242,034
--70,667
コミッター数
(重複あり)

View Slide

114
● Weekly Release スタート
● アプリの更新サイクルが2週に1
度のリリースから週1リリースへ
● 自動化によりリリース判定テス
トを1日に短縮するなどこれまで
の取り組みを土台として実現
https://engineering.mercari.com/blog/entry/20211210-b5d0a7dc9c/

View Slide

115
● メルカリShops をフルスクラッチで開発
● WebViewベースでメルカリアプリ内に提供がスタートする
2021年の技術トピック2 - メルカリShops

View Slide

116
● USメルカリでは、React Native で
フルスクラッチでアプリを書き直す
プロジェクト “Denali” が4月にス
タート
● USでは2017年以来、2回目のリラ
イトプロジェクト
2021年の技術要素 - 3
https://medium.com/mercari-engineering/why-we-de
cided-to-rewrite-our-ios-android-apps-from-scratch-i
n-react-native-9f1737558299

View Slide

117
2022年
GroundUp App

View Slide

118
● iOS16 発表
● iPhone 14, iPhone 14 Plus,
● PassKey

View Slide

119
● Mercari India 設立 (6月)
● メルカリアプリのリプレース完了 (9月)
● メルカード提供開始 (11月)

View Slide

120

View Slide

121

View Slide

122
58 1,536 ++24,061
--34,238
コミッター数
(重複あり)

View Slide

123
91 4,803 ++807,010
--163,386
コミッター数
(重複あり)

View Slide

124
● Legacy リポジトリのコードフリーズを実施
● iOSエンジニアも全て GroundUp App の開発に移り、
2022年9月に GroundUp App の v5系がリリースされプ
ロジェクト完了
● GroundUp App を前提に進んでいたプロジェクトもあった
ため、全社を挙げてのプロジェクトとなった
GroundUp App リリース

View Slide

125
1. TestFlight でベータテスト(4月-7月)
○ バグリポートを集め修正
2. App Store への部分的リリース(7月-9月)
○ Weekly Release は維持
○ Legacy App(v4系) リリースは停止
○ GroundUp App (v5系) 段階リリースで徐々にロールアウト
3. Full Public Release (9.20にv5系を100%公開)
GroundUp App ロールアウトプラン

View Slide

126
Post GroundUp App
Objective-C のコードがなくなる

View Slide

127
● Merpay のような本体アプリとは別に管理されていた
iOSアプリ関連リポジトリを、全てGroundUp
リポジトリに統合する “monorepo” 化を実施
● USアプリを React Native で書き換える “Denali” も
4月にリリース

View Slide

128
https://mercan.mercari.com/articles/36183/, https://mercan.mercari.com/articles/35887/

View Slide

129
2023年
10年

View Slide

130
● iOS17 発表
● Apple Vision Pro, visionOS 発表

View Slide

131
2023年のサービス・会社としての主な出来事2
● ビットコイン取引サービス提供開始(3月)
● PassKey対応 (4月)
● Mercari ChatGPTプラグイン提供開始(7月)
● アプリローンチ10年(7月)

View Slide

132
0 0 0
コミッター数
(重複あり)

View Slide

133
GroundUp App 後もメンテナンスのためアーカイブされてい
なかった
初代メルカリiOSアプリのリポジトリが2023年5月23日にアーカ
イブ。
2013年3月の “Initial Commit” から 10年を経て幕を降ろし
た。
R.I.P レガシーiOSリポジトリ

View Slide

134
メルカリiOS (レガシー) 通算記録
通算コミット数
213
通算Pull Request
152,456 35,969
通算コミッター数
(重複あり, Bot 含む)

View Slide

135
79 3,830 ++307,551
--127,080
コミッター数
(重複あり)

View Slide

136

View Slide

137
2013
2023

View Slide

138
● Architecture v2
● PassKeys
● Performance Observation Platform
● Release cycle stabilization
いま取り組んでいること

View Slide

139
Conclusion

View Slide

140
● 変化は徐々に起こることも、突然表れることもある
○ 技術の変化
○ プロダクト、ビジネス、組織の変化
● どのように適応していくか？
Conclusion

View Slide

141
● Apple プラットフォームでは、新しい技術要素も2-3年後に
はスタンダードに変化していくサイクル
● メルカリの場合
○ Swift 発表 (2014年)
■ → フルSwiftアプリ登場が2016年 (メルカリアッテ)
○ SwiftUI 発表 (2019年)
■ → SwiftUIへの書き換え完了(2022年)
技術変化への適応

View Slide

142
プロダクト、ビジネス、組織による環境の変化への適応
● メルカリでの組織的な取り組み
○ Re-design (2014, 2019)
○ Re-architecture(2018-2019)
○ Re-write(2020-2022)
○ US Re-write (2017, 2021-2022)
○ Core/Architectチームの設立(2018年〜)
○ アプリ開発周辺基盤強化(2019年〜)

View Slide

143
● メルカリは様々な変化に対してプロアクティブに対応してきてい
る
● ただし、振り返ってみると当たり前のように感じるターニングポ
イントも、その瞬間は確信を持って意思決定が行われたわけで
はない
○ Q. Re-architecture が終わって間もなくゼロから書き直す
判断ができるか？すべきか？
○ Q. いま Cross Platform や WebView を選択すべきか？
Conclusion

View Slide

144
Conclusion
● 完璧な答えはないものの、それでもエンジニアとして最善と
思える答えを出さなければならない
● そんなとき、この10年の振り返りが力になれば嬉しい

View Slide

145
メルカリはこれからもチャレンジを続けます
Go Bold
All for One
Be a Pro

View Slide

146
ARIGATO!

View Slide

Mercari 10years iOS Development

Mercari 10years iOS Development

Motoki Narita

More Decks by Motoki Narita

Other Decks in Technology

Featured

Transcript