Compose MultiplatformでもHot Reloadが動くらしい

集まれKotlin好き！Kotlin愛好会 vol.56のLT資料です。

https://love-kotlin.connpass.com/event/337760/

紹介したプラグイン: https://github.com/JetBrains/compose-hot-reload
参考レポジトリ: https://github.com/subroh0508/compose-hot-reload-sample

Transcript

1. Compose Multiplatformでも Hot Reloadが動くらしい 2024/12/17 Kotlin愛好会 Vol.56 にしこりさぶろ〜(@subroh_0508)
2. 自己紹介 / リアルのすがた 2 プロダクト本部 プロダクト組織開発部 DevHR 坂上 晴信 Harunobu Sakaue 🎤 経歴 1995年生まれ。東京の離島・伊豆大島出身。 プロダクト組織専任の人事職として、あらゆる業務に従事。 • 2016年3月 東京高専 情報工学科卒 • 2016年4月 株式会社TOKIUM入社 2016年4月 💼Android/Webエンジニア(6年8ヶ月) • 2023年1月 DevHRにロールチェンジ 2023年1月 💼エンジニア採用・組織作り・採用広報 • Now!! 9月の愛好会で会場貸出 + 🍣と板前さんを 呼んだ会社の人です😎
3. 自己紹介 / インターネットのすがた 3 【🗾1,421km】にしこりさぶろ〜 @subroh_0508 Kotlin歴: 8年10ヶ月 アイマスP歴: 7年半 ラブライバー歴: 2年 3 ↓担当アイドル ↓推し ↓推し 💖好きなもの Kotlin / アイドルマスター / ラブライブ Kotlin本体へのContribute経験、Kotlin Festへの登壇経験 アリ(2019、2022、2024)。DevHRになって以降は開発 業務から離れたが、趣味でKotlinを書き続けている。 アイドルマスター・ラブライブのライブにも、頻繁に足を 運ぶ。『シャニマス』三峰結華と『蓮ノ空』村野さやかが 人生のロールモデル。 ↓担当アイドル
4. やぁみんな！👋 Compose Multiplatform 使ってるか！？ 4 イントロダクション
5. Compose Multiplatformって 最高だよな！！！😎 最高ポイント、順に挙げてこうぜ！！！ 5 イントロダクション
6. 🌟 最高ポイント(1) 宣言的にUIを実装できる ➔ UIのロジックを直感的に書ける！ ➔ もうActivity / Fragmentで実装していた時代には戻れない！ 6 @Composable fun ArtistCardRow(artist: Artist) { Row(verticalAlignment = Alignment.CenterVertically) { Image(bitmap = artist.image, contentDescription = "Artist image") Column { Text(artist.name) Text(artist.lastSeenOnline) } } } イントロダクション
7. 🌟 最高ポイント(2) IDE上で画面をプレビューしながら実装できる ➔ 試行錯誤のスピードが爆速に！ 7 イントロダクション
8. 🌟 最高ポイント(3) X-Platに対応 ➔ iOS・Desktop・WebアプリのUIを1つのコードで実装できる！ 8 Androidに加え イントロダクション
9. Compose Multiplatformって 最高だよな！！！(2回目)😎 でも、まだ足りないものが…… 9 イントロダクション
10. 10 イントロダクション 足りないもの、それは……　 Hot Reload！
11. 11 イントロダクション 足りないもの、それは……　 Hot Reload！ Flutterにはあるのに😖
12. 12 イントロダクション そんなある日…👀 x.com/Sellmair/status/1846933575242764467
13. 13 イントロダクション そんなある日…👀 x.com/Sellmair/status/1846933575242764467 あれ…！？ Compose Multiplatformで Hot Reloadが動作してるんだが…！？
14. 14 イントロダクション そんなある日…👀 JetBrains/compose-hot-reload しかもJetBrainsのレポジトリに 移動してる！？
15. 15 イントロダクション そんなある日…👀 JetBrains/compose-hot-reload しかもJetBrainsのレポジトリに 移動してる！？ 使ってみるしかないなぁ😎
16. 🌟 Hot Reloadが動作するのは、現状Desktopビルドのみ ➔ Android / iOSのエミュレーター上でのHot Reloadは動作しない！😇 16 前提: compose-hot-reloadはどう動くのか issueには上がっているが、対応されるかなぁ…🤔
17. 🛠 Kotlin Multiplatform Wizardでテンプレートをダウンロード ➔ Desktopにチェックを付けておく 17 compose-hot-reloadを動かしてみる kmp.jetbrains.com
18. 🛠 READMEに沿ってセットアップ ➔ リモートリポジトリを追加 18 compose-hot-reloadを動かしてみる
19. 🛠 READMEに沿ってセットアップ ➔ プラグインを設定 19 compose-hot-reloadを動かしてみる Kotlinのバージョンも別途指定が必要 compose-hot-reloadプラグインの設定
20. 🛠 READMEに沿ってセットアップ ➔ OptimizeNonSkippingGroupの設定を追加 20 compose-hot-reloadを動かしてみる
21. 🛠 Hot Reloadを有効にしたい部分を DevelopmentEntryPointメソッドでくくる 21 compose-hot-reloadを動かしてみる fun main() = application { Window( onCloseRequest = ::exitApplication, title = "hot-reload-sample", ) { DevelopmentEntryPoint { App() } } } ブロック内の実装に変更があると Hot Reloadが動作
22. 🛠 ./gradlew :composeApp:desktopRunを実行！ 22 compose-hot-reloadを動かしてみる
23. 🛠 ./gradlew :composeApp:desktopRunを実行！ ➔ エラーで落ちる😢　ので対応 23 compose-hot-reloadを動かしてみる
24. 🛠 ./gradlew :composeApp:desktopRunを実行！ ➔ エラーで落ちる😢　ので対応 24 compose-hot-reloadを動かしてみる mainClassプロパティを使って 実行対象のクラスを指定する必要がある
25. 🛠 ./gradlew :composeApp:desktopRunを実行！ ➔ エラーで落ちる😢　ので対応 25 compose-hot-reloadを動かしてみる IDE上で実行する場合、 「Run/Debug Configurations」を修正
26. 🛠 ./gradlew :composeApp:desktopRunを実行！ ➔ エラーを潰しきると… 26 compose-hot-reloadを動かしてみる ウィンドウの横にアイコンと カラーバーが出現
27. 27 まとめ 👍 Compose MultiplatformでHot Reloadが動くと楽しい！ ➔ Desktopビルドしか動かない制限はあるが、使う価値はありそう ➔ Android / iOSエミュレーターでも動く未来が早く来て欲しい！ Thank you for listening! プラグインの制作者が 解説動画も出しているので 気になった方はcheck！