モジュール分割した開発での知見とテーマ切り替えやUICatalogについて

「モジュール分割した開発での知見とテーマ切り替えやUICatalogについて」by 小幡 十矛(Obata Tomu)
2021/05/19 CA.swift #14　発表資料

【イベントページ】https://cyberagent.connpass.com/event/211541/
【発表動画】https://youtu.be/MQWW84lg9xc?t=1974

本スライドで出てきたリンク一覧
【Composable Architecture in GitHub】https://github.com/pointfreeco/swift-composable-architecture
【Examples】https://github.com/pointfreeco/swift-composable-architecture/tree/main/Examples
【AppClip】https://github.com/pointfreeco/isowords/tree/main/App/AppClip

【isowords in GitHub】https://github.com/pointfreeco/isowords

【A Tour Of the Composable Architecture】https://www.pointfree.co/collections/composable-architecture/a-tour-of-the-composable-architecture/ep100-a-tour-of-the-composable-architecture-part-1

【A Tour Of isowords】https://www.pointfree.co/episodes/ep142-a-tour-of-isowords-part-1

【UICatalog】https://github.com/playbook-ui/playbook-ios

【TCA+Feature単位でのモジュール分割テンプレートリポジトリ in GitHub】https://github.com/tomu28/tca-swiftui-template

---
小幡 十矛（Obata Tomu）｜共創で価値をつくるエンジニア・新規事業×ブランドづくり

2021年にサイバーエージェントへ新卒入社し、ABEMA Live や AmebaブログのiOSアプリ開発を担当。
現在はフリーランスとして、複数の新規プロダクトやリアル店舗の立ち上げに挑戦中です。
アプリ開発・新規事業・ブランドづくりを軸に、「リアルとデジタルの交差点」から挑戦のきっかけや価値を共創しています。
iOSエンジニアとしての実務経験を活かしつつ、実店舗や共創型の場づくりにも取り組んでいます。
“ちょっと未来の当たり前”を、仲間と一緒に育てていく活動を続けています。

👥 特に、社会人1〜5年目で…
「やりたい気持ちはあるけど、最初の一歩に迷っている」方
「自分の可能性をもっと広げたい」方
「モヤっとしたアイデアがあるけど、どう進めていいかわからない」方

🌱 「挑戦したい20代」との出会いも、大切にしています。
「ちょっと話してみたいな」くらいの気持ちで、気軽に声をかけてもらえたら嬉しいです！🙌

🔗各種リンク：
📲 LINE（気軽に話してみたい方へ）：https://lin.ee/wdR6Udp
📷 Instagram：https://www.instagram.com/tomu28creator/
🧵 Threads：https://www.threads.net/@tomu28creator/
🐦 X（旧Twitter）：https://x.com/obata_tomu
📝 note（価値観やストーリーを発信中）：https://note.com/obata_tomu
🔗 プロフィールサイト：https://obata-tomu.jp/

Transcript

1. モジュール分割した開発での知見と テーマ切り替えやUICatalogについて 2021/05/19 CA.swift #14
2. Introduction ⼩幡 ⼗⽭(Obata Tomu) iOS @CyberAgent エンジニア 2 @tomu28 @_tomu28 https://www.obata-tomu.jp/articles
3. Agenda 1. The Composable Architecture とは 2. Feature単位でのモジュール分割 ▫ 概要 ▫ テーマ切り替え ▫ UICatalog 3. まとめ 3
4. 今回伝えたいこと・ゴール： ◦ The Composable Architecture + Feature単位のモジュール分割 で の開発イメージが湧くこと 4
5. The Composable Architecture とは 1 5
6. The Composable Architecture とは ◦ State ◦ Action ◦ Environment ◦ Reducer ◦ Store 6
7. The Composable Architecture とは ◦ State ◦ Action ◦ Environment ◦ Reducer ◦ Store 7
8. The Composable Architecture とは ◦ State ▫ UI表示に関する状態を管理する 8
9. The Composable Architecture とは ◦ State ◦ Action ◦ Environment ◦ Reducer ◦ Store 9
10. The Composable Architecture とは ◦ Action ▫ ボタンタップ, APIリクエストからレスポンスを 受け取っ た時 などのアクションを定義 10
11. The Composable Architecture とは ◦ State ◦ Action ◦ Environment ◦ Reducer ◦ Store 11
12. The Composable Architecture とは ◦ Environment ▫ 依存関係(ex: スケジューラーやRepository層の　　 データなど)を定義 12
13. The Composable Architecture とは ◦ State ◦ Action ◦ Environment ◦ Reducer ◦ Store 13
14. The Composable Architecture とは ◦ Reducer ▫ Stateの更新, 作用はEffect型で返却 14
15. The Composable Architecture とは ◦ State ◦ Action ◦ Environment ◦ Reducer ◦ Store 15
16. ◦ Store ▫ State, Reducer, Environmentを用いてViewを定義 The Composable Architecture とは 16
17. Composition コンポーネントを小さく 分解できる ↓ 分離されたモジュール に抽出可能 State management アプリケーションの状 態は多くの画面で共有 される。 ↓ 状態の変更をすぐに他 の画面にも反映可能 The Composable Architecture とは Testing State, Actionが Equatableに準拠 ↓ 機能テストが容易 17
18. Composition コンポーネントを小さく 分解できる ↓ 分離されたモジュール に抽出可能 State management アプリケーションの状 態は多くの画面で共有 される。 ↓ 状態の変更をすぐに他 の画面にも反映可能 The Composable Architecture とは Testing State, Actionが Equatableに準拠 ↓ 機能テストが容易 18
19. Composition コンポーネントを小さく 分解できる ↓ 分離されたモジュール に抽出可能 State management アプリケーションの状 態は多くの画面で共有 される。 ↓ 状態の変更をすぐに他 の画面にも反映可能 The Composable Architecture とは Testing State, Actionが Equatableに準拠 ↓ 機能テストが容易 19
20. “ ◦ Examples in GitHub ▫ https://github.com/pointfreeco/swift-compos able-architecture/tree/main/Examples ◦ A Tour of the Composable Architecture ▫ https://www.pointfree.co/collections/compos able-architecture/a-tour-of-the-composable-ar chitecture/ep100-a-tour-of-the-composable-ar chitecture-part-1 20
21. Feature単位でのモジュール分割 2 21
22. Feature単位でのモジュール分割 2 22 概要
23. 1機能単位ごとにモジュールを切る ex) OnboardingFeature.swift State, Action, Environment ,Reducerを持つ Feature単位でのモジュール分割【概要】 23
24. App Xcode Projectはエントリーポイントとして機能し アプリケーションを起動するためのViewを構築するだけが責務 Feature単位でのモジュール分割【概要】 24
25. メリット： ◦ 一部の機能だけを修正した時、差分ビルドが行われ 実行速度が早い ◦ 機能間の依存が分かりやすい ◦ Package.swift で読み込み、importする必要があるため Feature単位でのモジュール分割【概要】 25
26. デメリット： ◦ Package.swiftを編集するたびプロジェクト構造が読み込まれる → その間ビルドしたり出来ない Feature単位でのモジュール分割【概要】 26
27. Widget, AppClipに関して ◦ どちらも使用可能なバイナリサイズが決まっている ◦ メインコードの実装と同じUIを組む場合 → それに対応するモジュールを読み込み使用する流れになる ◦ メインコードの実装を異なるUIを組む場合 → 既に作ってあるモジュールをそのまま使えない...　しかし Feature単位でのモジュール分割【概要】 27
28. モジュールを追加する時は、 Feature単位でのモジュール分割【概要】 28
29. モジュールを追加する時は、 1. まずSources直下にFeatureディレクトリを切る Feature単位でのモジュール分割【概要】 29
30. モジュールを追加する時は、 1. まずSources直下にFeatureディレクトリを切る 2. Package.swiftに追記する Feature単位でのモジュール分割【概要】 30
31. Feature単位でのモジュール分割 2 31 テーマ切り替え
32. Feature単位でのモジュール分割【テーマ切り替え】 32 ◦ Styleguideモジュール内のColors.swift でカラー定義
33. Feature単位でのモジュール分割【テーマ切り替え】 33
34. Feature単位でのモジュール分割【テーマ切り替え】 34 Styleguideモジュールに切り出す利点 ◦ UIcatalogより一覧で カラーコードやフォントなどを みることが可能に
35. Feature単位でのモジュール分割【テーマ切り替え】 35 Assets.xcassetsを用いてカラー定義していない理由 ◦ App ProjectからApp Package内へ アクセスすることになってしまうため
36. Feature単位でのモジュール分割 2 36 UICatalog
37. Feature単位でのモジュール分割【UICatalog】 UICatalogとは ◦ https://github.com/playbook-ui/playbook-ios 導入メリット： ◦ Visual Regression Testingが行えるように ◦ ビルド時間短く、新規ComponentのUI確認が可能に 37
38. Feature単位でのモジュール分割【UICatalog】 38 Feature単位でモジュール分割した際のメリット： ◦ パーツごとのUI, 挙動を確認しやすい ◦ 対応するmockを差し込みやすい → 複数パターンのUI確認が行いやすい
39. “ 39 ◦ AppClip in GitHub ▫ https://github.com/pointfreeco/isowords/tree /main/App/AppClip ◦ A Tour of isowords ▫ https://www.pointfree.co/episodes/ep142-a-t our-of-isowords-part-1
40. まとめ 3 40
41. まとめ ◦ UICatalog, Widget, AppClipなどでモジュール内のUI, ロジックを使用する新規開発 → Feature単位でモジュール分割する利点はある 41
42. 今回紹介した設計のテンプレートリポジトリ ◦ https://github.com/tomu28/tca-swiftui-template 42
43. 参考になれば 😄 43
44. ◦ https://github.com/pointfreeco/swift-composable-architecture ◦ https://github.com/pointfreeco/isowords ◦ https://www.pointfree.co/collections/composable-architecture/a-tou r-of-the-composable-architecture/ep100-a-tour-of-the-composable-ar chitecture-part-1 ◦ https://www.pointfree.co/episodes/ep142-a-tour-of-isowords-part-1 ◦ https://github.com/playbook-ui/playbook-ios ◦ https://github.com/tomu28/tca-swiftui-template Appendix 44
45. Thanks! 45 2021/05/19 CA.swift #14