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
460
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
66
Git勉強会
yt8492
0
150
なんでもやってみる勇気
yt8492
0
100
Android Autoが思ったよりしんどい話
yt8492
0
210
apollo-kotlinにcontributeした話
yt8492
0
150
DMM TVのSDカードダウンロード機能を実装した話
yt8492
1
860
今だからこそ知りたいKotlin Multiplatform
yt8492
0
300
State management and API calls in Jetpack Compose: Learning Apollo + Jetpack Compose through React Hooks
yt8492
0
1.3k
サーバーフレームワークの仕組みが気になったので車輪の再発明をしてみた
yt8492
0
210
Other Decks in Programming
See All in Programming
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
320
Go言語の特性を活かした公式MCP SDKの設計
hond0413
2
530
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
7.7k
Catch Up: Go Style Guide Update
andpad
0
250
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
270
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
9
1.6k
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
330
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
660
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
640
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
CSC305 Lecture 08
javiergs
PRO
0
280
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
Featured
See All Featured
Fireside Chat
paigeccino
41
3.7k
Optimizing for Happiness
mojombo
379
70k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Making Projects Easy
brettharned
120
6.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
620
Docker and Python
trallard
46
3.6k
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