20周年を迎えるAmebaのアプリ開発

2023年11月20日に行われた、CA.swift #18 〜より良い設計のために〜 の登壇資料になります。

Transcript

1. 20周年を迎える Amebaのアプリ開発 2023/11/20 CA.swift
2. 小田島 直樹 （おだじまなおき） # AmebaLIFE事業本部 開発局 # 22/04中途（前職19新卒〜iOS） # サモラン（スプラ）ガチ勢 最近は # スーパーマリオRPG楽しい # 健康診断+2kgだった…😇 SNS # X → @devdazy（だじ） 2
3. 国内最大級のブログメディア Ameba 3
4. データで見るAmeba 4
5. アプリ • 2010年にバージョン1.0.0をリリース。現在17.1.0（14年目） • ブログリーダー・エディター・マンガ • 2014年にWebViewアプリ（ObjC） → ネイティブアプリ（Swift） 5
6. Insights • コミット量は順調に右肩上がり • 新機能開発もまだまだ続いています ◦ 最近だと生成系AIを用いた機能もリリースしました🤖 6
7. もっと長生きするために… • 作り手（開発チーム）も長生きする必要がある • →魅力的な開発チームであり続ける • →時代の流れに乗った開発環境に継続して更新していく必要がある ◦ 何より自分がやってて楽しい😄 7
8. アジェンダ 1. KMPへの取り組み 2. SwiftUIへの取り組み 3. その他の取り組み 4. まとめ 8
9. KMP 9
10. KMP • Kotlin Multiplatform（KMMという呼び方もあったが統一された） • Kotlinをベースとしたマルチプラットフォーム開発の技術 • iOSへはObjective-Cのxcframeworkが生成される 10
11. メインアーキテクチャ • MVVM + Clean Architecture ◦ 新規実装する画面では、ほぼ100%採用 ◦ VMとUseCaseがIF化されている • MVVM + Flux ◦ 新規での採用はあまりない ◦ 認証などのアプリ全体で共有する状態を扱う時に既存のStoreを用いる 11
12. 12 ViewModel View Presentation Domain UseCase Data Gateway API Repository UD, DB… Translator データの流れ
13. KMPの導入 13 ViewModel View Presentation Domain UseCase Data Repository UD, DB… Translator UseCase KMP Package Repository API Gateway API
14. KMPの導入 • 導入部隊としてKMPチームが結成。ネイ ティブに浸透したのちに解散を目指す • 簡単な画面から導入をはじめ、現在iOSで は11のUseCaseが運用されている • Repositoryの先でGraphQLを利用すること も検証中 ネイティブ全体での工数削減、および仕様の共 通化による仕様差分の減少、テスト工数の削減 を期待 14
15. SwiftUI 15
16. SwiftUI • 最近流行りの宣言的UI • AppleはSwiftUI推し…？ ◦ WWDC2022ではUIKitの話が出てこなかった • もう数年もすれば採用の場でSwiftUI-Nativeが当たり前になっていそう 16
17. SwiftUIにおけるアーキテクチャ • 未だはっきりとしたベストプラクティスはなさそう ◦ サービスの特性によってさまざまさので当たり前ではある • 少なくとも、今のAmebaの作りでは対応できない ◦ Rxに特化している ◦ Observable, ObservableObjectに対応していない 17
18. ComposableArchitecture（TCA）を導入 • Point-Freeの提供しているThe Composable Atchitecture （TCA）を導入することに決定 • Elm ArchitectureとReduxがベースとなったアーキテクチャ • アーキテクチャでありフレームワーク • SwiftUIで採用が検討されるアーキテクチャとしては認知度・採用 率的に1歩リードしている印象 18
19. View Presentation Domain State Action Reducer Store Effect Data UseCase KMP Package Repository API 19 SwiftUI・TCAの導入 ViewStore
20. TCAの👌な点　Dependency • property wrapper @Dependencyで利用する • 使用感としては@Environmentと似ている • 依存バケツリレーからの解放 • テスト、プレビュー時に簡単にモックできる • Dependency自体はswift-dependenciesで単体での導入も可能 20 必要な分だけ上書きできる
21. TCAの👌な点　PresentationState • navigationDestination(for:destination:)と navigationDestination(isPresented:destination:)が合体したような使用感 • 遷移先が表示されているか、とStateが存在するか、がリンクしている • 画面遷移も状態管理でき、State上で画面遷移のテストも可能 21 遷移先のStateが存在するこ とのアサーション
22. TCAの👌な点　その他 • 記法がIFによって細部まで強制されるため、強いコーディングルールとする ことができる ◦ 誰が書いてもおおそよ同じコードとなる • UIKitのランタイムでも動作するため、既存のAmebaのコードともリソースを 共有できる 22
23. TCAの学習障壁は？ • 高いです！ ◦ 概念以外にも定義されたクラス・メソッドを把握する必要がある • 勉強会を繰り返し開催 ◦ TCA公式でチュートリアルを利用 ▪ Meet the Composable Architecture • チームで理解してもらいやすいドキュメント作り ◦ Amebaのアーキテクチャとの差で示したり ◦ Amebaのコードでの例を示したり 23
24. その他の取り組み • デザインシステムSpindleの導入 ◦ 2023年度グッドデザイン賞を受賞🎉 ◦ システム化されたデザインでUI構築を効率とクオリ ティを両立 ◦ 実はこのスライドもSpindleをベースにしたデザイン • テストの拡充 ◦ Autifyを用いたE2Eテスト ◦ テスターさんが行っているテストを移行し効率化 24
25. まとめ • Amebaは老舗アプリだけど、だからこそ開発の足は止めていません。チーム の魅力を高めるために改善を続けています • テックなこと、Amebaで一緒にしませんか？ 25
26. ご清聴ありがとうございました 26