Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Jetpack Compose + Decomposeで始めるクロスプラットフォーム開発
Search
Yuta Tomiyama
July 10, 2021
Programming
1
430
Jetpack Compose + Decomposeで始めるクロスプラットフォーム開発
Zli 夏の大LT 2021 にて発表
Yuta Tomiyama
July 10, 2021
Tweet
Share
More Decks by Yuta Tomiyama
See All by Yuta Tomiyama
モバイルアプリ開発を始めよう!
yt8492
0
47
Git勉強会
yt8492
0
120
なんでもやってみる勇気
yt8492
0
85
Android Autoが思ったよりしんどい話
yt8492
0
200
apollo-kotlinにcontributeした話
yt8492
0
130
DMM TVのSDカードダウンロード機能を実装した話
yt8492
1
840
今だからこそ知りたいKotlin Multiplatform
yt8492
0
290
State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks
yt8492
0
1.2k
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
200
Other Decks in Programming
See All in Programming
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
230
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
150
フロントエンドのパフォーマンスチューニング
koukimiura
5
2k
生成AI時代のコンポーネントライブラリの作り方
touyou
1
290
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
180
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
1.1k
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
16
2.3k
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
580
20250708_JAWS_opscdk
takuyay0ne
2
130
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
15
4.6k
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Optimizing for Happiness
mojombo
379
70k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Into the Great Unknown - MozCon
thekraken
40
1.9k
4 Signs Your Business is Dying
shpigford
184
22k
Gamification - CAS2011
davidbonilla
81
5.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Transcript
Jetpack Compose + Decomposeで始める クロスプラットフォーム開発 2021/07/10 Zli 大LT
自己紹介 HN: マヤミト ID: yt8492 会津大学 学部4年 去年までZliの代表やってました GitHub: https://github.com/yt8492
趣味: Kotlin, Twitter, ウマ娘に狂う 後輩に完全にTwitterの人と認識されてしまっており、謎 深夜帯が賑やかなアカウント Twitter: yt8492
Jetpack Compose使ったことある人
Android以外のCompose使ったことある人
Jetpack Composeって何? - Android のネイティブ UI を構築するための最新のツールキット(公式より) https://developer.android.com/jetpack/compose - Kotlinと宣言的UIでAndroidのネイティブ開発ができる
- そろそろstableリリースされる - 最近Android界隈で流行っているので調べると記事が結構出てくると思います
Compose for 〇〇 の登場 - 去年11月、Compose for Desktopが登場 - Kotlin/JVMで動く
- Swing上でSkiaを動かしている - 今年5月、Compose for Webの登場 - Kotlin/JSで動く - DOMベース - Android, Desktop, WebでUIのコード共有が可能に(ココ重要)
UIコード共有の例
UIコード共有の例 common android desktop web
問題点 - ルーティングをどうするか - Androidにはnavigation-composeがある - AndroidのNavigationの仕組みに依存している - DesktopとWebどうする🤔 -
ルーターがないとキツイ - 既存のライブラリのラッパーを書く? - 自分で実装するのはしんどい
Decompose - Kotlin/MPP向けの、プラットフォームに依存しないlifecycle-awareなビジネスロ ジックコンポーネント+ルーターを提供するライブラリ - https://github.com/arkivanov/Decompose - 豊富な対応target - Android
- JVM - iosX64, iosArm64 - macosX64 - tvosX64, tvosArm64 - watchosArm32, watchosArm64, watchosX86, watchosX64 - JavaScript
Decomposeでルーティングを実装する - ルーティングを表す型を定義する - 直和型を使うと便利 - ルーティングに引数をもたせたい場合はここで定義する - ルーティングごとのビジネスロジックコンポーネントを定義する -
ViewModelみたいな役割にするとよさそう? - ルートのコンポーネントでルーティングの型からコンポーネントへのマッピングをす る - ルートのComposable関数でコンポーネントからページごとのComposable関数 へのマッピングをする
TODOアプリを実装してみよう
ルーティングを表す型を定義する
ルーティングごとのコンポーネントを定義する
ルーティングの型からコンポーネントへマッピングをする
コンポーネントからComposable関数へのマッピング
今回のリポジトリ - 全てを解説していたらLTではなくセッションになってしまうため - https://github.com/yt8492/todoCompose - 公式のサンプルよりシンプルに作っています - 時間なくてもろもろ雑だけどゆるして……
時間があればデモ
使ってみた感想 - Jetpack Composeで型安全にルーティングが実現できて最高〜〜〜〜〜 - navigation-compose、文字列でのルーティングなのしんどくないすか? - Androidだけのプロジェクトでもこれ使いたいレベル - Kotlinでのクロスプラットフォーム開発の夢が広がるわね
- ビジネスロジックのコンポーネントの名前がComponentなのちょっとだけしんどい - 宣言的UIだとUIの部品にもcomponentという名前使いがち - 初見でどっち?となる - 思い切ってViewModelという命名にしてしまうのもアリ?
まとめ - Jetpack Composeでクロスプラットフォーム開発をするにはDecomposeがよさそ う - Jetpack Compose、iOSにも対応してくれという気持ち - Kotlin/MPPで全てを実装する未来はすぐそこに(ほんまか?)
あわせて読みたい - 過去の登壇資料 - Kotlin/MPP関連でいっぱい登壇してるのでぜひ参考にしてください - https://speakerdeck.com/yt8492