minneを通じて感じた歴史とその先を見据えた取り組みや挑戦に触れて

9/1~9/3の3日間で開催された「iOSDC Japan 2023」のスポンサーセッションでの登壇資料になります。

私が所属しております弊社GMOペパボが運営するハンドメイドマーケット「minne（ミンネ）」は、今年で11周年を迎え、様々な思い出や歴史の変遷がありました。

歴史が長いサービスの開発では「目に見えない複雑さ」や「小さな事が重大である」等、その歴史故の難しさも数多くあります。一方で、その困難を解決した先人の偉大な資産やストーリーも一緒にあります。そして、より良く＆より価値を出すため、その歴史を踏まえ、その先を見据えた取り組みや挑戦が求められます。

本セッションでは、minneのiOSアプリ開発を通じた「その先を見据えた取り組み」の具体例を、実務での体験談やチーム内開発での事例と合わせてご紹介できればと思います。

【取り組み事例】

MVVM + SwiftUIへリプレイスする取り組み
iOSアプリの基盤部分の変化へできる限り追従する挑戦
施策や調整時のサーバー側との積極的な関わりや共同作業

URL: https://fortee.jp/iosdc-japan-2023/proposal/a7b81eb5-3e27-4f73-8fda-b46bf3e0179d

Transcript

1. minneを通じて感じた歴史とそ
   の先を見据えた取り組みや挑戦
   に触れて
   酒井文也（fumy） / GMO PEPABO inc.
   2023.09.03 iOSDC Japan 2023 スポンサーセッション
   1
   

   View Slide

2. 2
   自己紹介
   minne事業部　プロダクト開発チーム　シニアエンジニア
   2023年 中途入社
   酒井 文也 Sakai Fumiya
   現在はminneのiOSアプリ開発を中心として携わってお
   ります。（時々Androidを書いたりBackend側のコードを
   読んだり。）毎日が刺激的＆勉強です。
   ● 2021年振りのiOSDC登壇になります。
   ● 今年はパンフレット原稿を2本寄稿しました！
   ● Twitter & GitHub : @fumiyasac
   

   View Slide

3. 読み方 ジーエムオーペパボ
   設立 2003年1月10日
   証券コード 3633（東京証券取引所プライム市場
   ）
   売上高(連結) 105億3,125万円（第21期 2022年1月～2022年12月）
   従業員数 475名（2022年12月末時点）
   もっとおもしろくできる
   企業理念
   ミッション
   人類のアウトプットを増やす
   

   View Slide

4. View Slide

5. View Slide

6. 6
   本日お話すること
   1. minne iOSアプリの概要紹介
   2. 11年という歴史があるアプリから見えるコト
   3. 先人達が築いた歴史から学ぶ知見
   4. その先を見据えた取り組みに関する事例紹介
   1. MVVM + SwiftUIへリプレイスする取り組み
   2. iOSアプリの基盤部分の変化へできる限り追従する挑戦
   3. 施策や調整時のWebエンジニアとの積極的な関わりや共同作業
   5. 私が自発的に挑戦していることの例
   

   View Slide

7. 1. minne iOSアプリの
   概要紹介
   7
   

   View Slide

8. 8
   1. minne iOSアプリの概要紹介
   minne（ミンネ）は、ハンドメイド作品を「買いたい人」と「売りたい人」をつなぐ国内最大のハンドメイドマー
   ケットです。パソコンやスマートフォンを使って、簡単にハンドメイド作品を販売・購入できます。
   

   View Slide

9. 9
   1. minne iOSアプリの概要紹介
   海外配送 アクセス解析機能
   多様な決済方法
   minne
   ギフトチケット
   minneは作品を販売する作家・ブランドやお買い物をする購入者など、すべての人が使いやすいサービス
   を目指し、新機能の開発や拡充を行っています。
   作家・購入者双方の皆様に愛されるプロダクトを更に目指した取り組み
   

   View Slide

10. 10
    1. minne iOSアプリの概要紹介
    作品の閲覧や購入を行う導線の画面の中で心地良いアニメーションを散りばめています。
    ✨ 作品を更に生かす動きや表現
    作品写真が
    浮かび上がる
    Transition
    お気に入り
    追加時の
    Animation
    カートタブへ
    吸い込まれる
    Animation
    

    View Slide

11. 2. 11年という歴史がある
    アプリから見えるコト
    11
    

    View Slide

12. 2. 11年という歴史があるアプリから見えるコト
    12
    Webエンジニアとの
    積極的なコラボレー
    ションの実践
    仕組みや自動化の
    推進や手順等のパ
    ターン化ノウハウ
    機能開発や施策を実
    施した際の取り組み
    と過程
    12
    👍 歴史のあゆみと共に得られた知見
    これまでの大小様々な機能に関する開発＆運用ノウハウに留まらず、外部サービス連携・膨大なデータ・そ
    の他関連する技術に関する知識等もミックスされている。
    

    View Slide

13. 2. 11年という歴史があるアプリから見えるコト
    13
    開発時点に加えて
    その先を見越した
    設計や実装が必要
    修正や開発内容が
    及ぶ影響範囲への
    意識が必要
    歴史的な経緯を
    理解した前提で
    進めていく必要
    13
    規模がまだ小さかったり、データがまだ少ない場合には「気にしなくても問題ない」と思っていた部分が大規
    模になった途端に落とし穴となってしまうなケースには要注意！
    💦 歴史が長いが故の大変さ
    

    View Slide

14. 3. 先人達が築いた
    歴史から学ぶ知見
    14
    

    View Slide

15. 3. 先人達が築いた歴史から学ぶ知見
    15
    以前学んだことや、昔の事柄を今また調べなおしたり考えなおしたりして、新たに新しい道理や知
    識を探り当てること。
    故きを温ねて新しきを知る
    GitHub上に残っているIssueやPull Request内に残されている実装と関連する議論の軌跡、
    コード内の実装やテストコード、ドキュメント等の内部資料は偉大な財産。
    現状を正しく把握した上でその先を見据えた取り組みをする
    🧠✨私はこう解釈しました
    

    View Slide

16. 3. 先人達が築いた歴史から学ぶ知見
    16
    例1. Architectureに関する全体方針
    

    View Slide

17. 3. 先人達が築いた歴史から学ぶ知見
    17
    例2. 過去検討していた技術例
    参考: https://www.pointfree.co/collections/composable-architecture
    「The Composable Architecture」
    Reduxに近い構造を有する単一方向
    のデータフローで管理するアーキテク
    チャを検討した経緯が過去にありまし
    た。
    結果的には検討＆一部画面で試験導
    入までではあったが、その過程はとて
    も勉強になりました。
    1. カート画面
    2. 注文確認画面
    3. 認証画面
    状態管理が
    複雑になる
    画面例
    確かにMVVM
    でも大変💦
    

    View Slide

18. 3. 先人達が築いた歴史から学ぶ知見
    18
    例3. ドキュメント文化と聞き易さ
    平素はもちろんドキュメントも交えた活
    発なコミュニケーション。
    Wiki記載ノウハウ＆Notion活用
    

    View Slide

19. 4. その先を見据えた
    取り組みに関する事例紹介
    19
    

    View Slide

20. 4. その先を見据えた取り組みに関する事例紹介
    例1. MVVM + SwiftUIへリプレイスする取り組み
    • View要素関連処理のSimple化ができるメリット
    とはいえ、iOS14以降はUICollectionView関連処理の恩恵もあるので、画面に応じてはこちらの方がより良さを生かせる場合もあります。
    ScrollView
    LazyVStack
    Listをベースとした画面
    SwiftUI + Combine + MVVMを利用した処理へ統一
    画面表示内容によっては
    UICollectionViewを利用
    UICollectionViewCompositionalLayout
    DiffableDataSource + Combine + MVVM
    

    View Slide

21. 4. その先を見据えた取り組みに関する事例紹介
    Question. この画面のうちSwiftUI製のものはどれでしょう？
    口座情報 検索結果 カート 注文内容確認
    

    View Slide

22. 4. その先を見据えた取り組みに関する事例紹介
    Answer. 正解はこちらになります！
    口座情報 検索結果 カート 注文内容確認
    ❌ ⭕
    ❌ ❌
    

    View Slide

23. 4. その先を見据えた取り組みに関する事例紹介
    余談. 私が実装した画面における事例紹介
    ※内容詳細はPepabo Tech Blogに詳細を記載しています。 https://tech.pepabo.com/2023/05/24/minne-ios-refactoring-swiftui/
    

    View Slide

24. 4. その先を見据えた取り組みに関する事例紹介
    例2. iOSアプリの基盤部分の変化へできる限り追従する挑戦
    • 今後も施策と並行しながら導入中の
    OSSはバージョンアップに追従する
    • fastlane等の自動化のベースをなす様な物については動向等を定期的に確認する
    「Apollo iOS (Ver0.x 👉 Ver1.x)」
    - 追加要素への新規対応
    - apollo-ios-cliへの対応
    - コード自動生成
    - Schemaのダウンロード
    - npm関連部分の削除
    ※Apolloについては導入方法から内部処理まで全体的に及ぶ破壊的な変更がありました。対応して頂いた先輩社員の方には本当に感謝しております！
    

    View Slide

25. 4. その先を見据えた取り組みに関する事例紹介
    例3. 施策や調整時のデザイナー・Webエンジニアと積極的な関わりや共同作業
    Designer
    Mobile Engineer
    Web Engineer
    • 活発であること＆専門領域外でも知見を持つメンバーもいる点は助かっています
    

    View Slide

26. 4. その先を見据えた取り組みに関する事例紹介
    その他. ChatGPTを活用したPullRequestのサマライズ
    • 昨今のChatGPTやAIの進化に乗っていく様な動きも試験的に導入
    ※Bitrise内ワークフロー抜粋
    BitriseでBuild実行前にPreBuildDangerファイル内記載内容を実行
    既存のCI機構の中でPullRequest作成時
    にBuild前にGitHub Actionsでdangerを
    実行し内容確認をするフローに追記。
    

    View Slide

27. 5. 私が自発的に
    挑戦していることの例
    27
    

    View Slide

28. 自分が過去に6年程Backend側の開発経験があったので、ブランクはあれどもその際の経験も生かしてみ
    たいと思った点や、数年前に Android開発に携わった経験も今後は生かしたいと思う所存です。
    5. 私が自発的に挑戦していることの例
    28
    Ruby (Rails + GraphQL)
    現在はまだまだコードを読む段階
    までですが、今以上に Webエンジ
    ニアの皆様との共同作業ができる
    様にしていきたいです。
    Android + Kotlin
    こちらもiOSアプリ開発の経験に
    比べると拙いですが、見比べる際
    や簡単な機能開発の機会にはコ
    ミットしていきたいです。
    28
    

    View Slide

29. まとめ＆告知事項
    29
    • 歴史が長いアプリならではの良い所＆改善に繋がる所に目を向けてみる
    • 開発の歴史の中には現在の開発に繋がるヒントがある
    • これまでの先人が培ってきた知見が財産になる
    • 新しい技術を活用できそうな部分への積極的なアプローチをしてみる
    • これまでの自分の経験から活用できそうな部分を見出してみる
    本発表のまとめ
    これからもユーザーへの価値提供＆良き歴史を残していく「やっていき
    🍊」
    

    View Slide

30. 30
    GMOペパボでの取り組み＆アウトプット紹介
    Pepabo Tech Portal ペパボHRブログ ペパボ研究所
    

    View Slide

31. 31
    Thank You!
    Thank You!
    

    View Slide