Jetpack Compose + Decomposeで始めるクロスプラットフォーム開発

Zli 夏の大LT 2021 にて発表

Transcript

1. Jetpack Compose +
   Decomposeで始める
   クロスプラットフォーム開発
   2021/07/10 Zli 大LT
   

   View Slide

2. 自己紹介
   HN: マヤミト
   ID: yt8492
   会津大学 学部4年
   去年までZliの代表やってました
   GitHub: https://github.com/yt8492
   趣味: Kotlin, Twitter, ウマ娘に狂う
   後輩に完全にTwitterの人と認識されてしまっており、謎
   深夜帯が賑やかなアカウント
   Twitter: yt8492
   

   View Slide

3. Jetpack Compose使ったことある人󰢧
   

   View Slide

4. Android以外のCompose使ったことある人󰢧
   

   View Slide

5. Jetpack Composeって何？
   - Android のネイティブ UI を構築するための最新のツールキット(公式より)
   https://developer.android.com/jetpack/compose
   - Kotlinと宣言的UIでAndroidのネイティブ開発ができる
   - そろそろstableリリースされる
   - 最近Android界隈で流行っているので調べると記事が結構出てくると思います
   

   View Slide

6. Compose for 〇〇 の登場
   - 去年11月、Compose for Desktopが登場
   - Kotlin/JVMで動く
   - Swing上でSkiaを動かしている
   - 今年5月、Compose for Webの登場
   - Kotlin/JSで動く
   - DOMベース
   - Android, Desktop, WebでUIのコード共有が可能に(ココ重要)
   

   View Slide

7. UIコード共有の例
   

   View Slide

8. UIコード共有の例
   common
   android desktop web
   

   View Slide

9. 問題点
   - ルーティングをどうするか
   - Androidにはnavigation-composeがある
   - AndroidのNavigationの仕組みに依存している
   - DesktopとWebどうする🤔
   - ルーターがないとキツイ
   - 既存のライブラリのラッパーを書く？
   - 自分で実装するのはしんどい
   

   View Slide

10. Decompose
    - Kotlin/MPP向けの、プラットフォームに依存しないlifecycle-awareなビジネスロ
    ジックコンポーネント+ルーターを提供するライブラリ
    - https://github.com/arkivanov/Decompose
    - 豊富な対応target
    - Android
    - JVM
    - iosX64, iosArm64
    - macosX64
    - tvosX64, tvosArm64
    - watchosArm32, watchosArm64, watchosX86, watchosX64
    - JavaScript
    

    View Slide

11. Decomposeでルーティングを実装する
    - ルーティングを表す型を定義する
    - 直和型を使うと便利
    - ルーティングに引数をもたせたい場合はここで定義する
    - ルーティングごとのビジネスロジックコンポーネントを定義する
    - ViewModelみたいな役割にするとよさそう？
    - ルートのコンポーネントでルーティングの型からコンポーネントへのマッピングをす
    る
    - ルートのComposable関数でコンポーネントからページごとのComposable関数
    へのマッピングをする
    

    View Slide

12. TODOアプリを実装してみよう
    

    View Slide

13. ルーティングを表す型を定義する
    

    View Slide

14. ルーティングごとのコンポーネントを定義する
    

    View Slide

15. ルーティングの型からコンポーネントへマッピングをする
    

    View Slide

16. コンポーネントからComposable関数へのマッピング
    

    View Slide

17. 今回のリポジトリ
    - 全てを解説していたらLTではなくセッションになってしまうため
    - https://github.com/yt8492/todoCompose
    - 公式のサンプルよりシンプルに作っています
    - 時間なくてもろもろ雑だけどゆるして……
    

    View Slide

18. 時間があればデモ
    

    View Slide

19. 使ってみた感想
    - Jetpack Composeで型安全にルーティングが実現できて最高〜〜〜〜〜
    - navigation-compose、文字列でのルーティングなのしんどくないすか？
    - Androidだけのプロジェクトでもこれ使いたいレベル
    - Kotlinでのクロスプラットフォーム開発の夢が広がるわね
    - ビジネスロジックのコンポーネントの名前がComponentなのちょっとだけしんどい
    - 宣言的UIだとUIの部品にもcomponentという名前使いがち
    - 初見でどっち？となる
    - 思い切ってViewModelという命名にしてしまうのもアリ？
    

    View Slide

20. まとめ
    - Jetpack Composeでクロスプラットフォーム開発をするにはDecomposeがよさそ
    う
    - Jetpack Compose、iOSにも対応してくれという気持ち
    - Kotlin/MPPで全てを実装する未来はすぐそこに(ほんまか？)
    

    View Slide

21. あわせて読みたい
    - 過去の登壇資料
    - Kotlin/MPP関連でいっぱい登壇してるのでぜひ参考にしてください
    - https://speakerdeck.com/yt8492
    

    View Slide