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

Slide 1

Slide 1 text

Compose Multiplatformでも Hot Reloadが動くらしい 2024/12/17 Kotlin愛好会 Vol.56 にしこりさぶろ〜(@subroh_0508)

Slide 2

Slide 2 text

自己紹介 / リアルのすがた 2 プロダクト本部プロダクト組織開発部 DevHR 坂上晴信 Harunobu Sakaue 🎤 経歴 1995年生まれ。東京の離島・伊豆大島出身。プロダクト組織専任の人事職として、あらゆる業務に従事。 ● 2016年3月東京高専情報工学科卒 ● 2016年4月株式会社TOKIUM入社 2016年4月 💼Android/Webエンジニア(6年8ヶ月) ● 2023年1月 DevHRにロールチェンジ 2023年1月 💼エンジニア採用・組織作り・採用広報 ● Now!! 9月の愛好会で会場貸出 + 🍣と板前さんを呼んだ会社の人です😎

Slide 3

Slide 3 text

自己紹介 / インターネットのすがた 3 【🗾1,421km】にしこりさぶろ〜 @subroh_0508 Kotlin歴: 8年10ヶ月アイマスP歴: 7年半ラブライバー歴: 2年 3 ↓担当アイドル ↓推し ↓推し 💖好きなもの Kotlin / アイドルマスター / ラブライブ Kotlin本体へのContribute経験、Kotlin Festへの登壇経験アリ(2019、2022、2024)。DevHRになって以降は開発業務から離れたが、趣味でKotlinを書き続けている。アイドルマスター・ラブライブのライブにも、頻繁に足を運ぶ。『シャニマス』三峰結華と『蓮ノ空』村野さやかが人生のロールモデル。 ↓担当アイドル

Slide 4

Slide 4 text

やぁみんな！👋 Compose Multiplatform 使ってるか！？ 4 イントロダクション

Slide 5

Slide 5 text

Compose Multiplatformって最高だよな！！！😎 最高ポイント、順に挙げてこうぜ！！！ 5 イントロダクション

Slide 6

Slide 6 text

🌟 最高ポイント(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) } } } イントロダクション

Slide 7

Slide 7 text

🌟 最高ポイント(2) IDE上で画面をプレビューしながら実装できる ➔ 試行錯誤のスピードが爆速に！ 7 イントロダクション

Slide 8

Slide 8 text

🌟 最高ポイント(3) X-Platに対応 ➔ iOS・Desktop・WebアプリのUIを1つのコードで実装できる！ 8 Androidに加えイントロダクション

Slide 9

Slide 9 text

Compose Multiplatformって最高だよな！！！(2回目)😎 でも、まだ足りないものが…… 9 イントロダクション

Slide 10

Slide 10 text

10 イントロダクション足りないもの、それは……　 Hot Reload！

Slide 11

Slide 11 text

11 イントロダクション足りないもの、それは……　 Hot Reload！ Flutterにはあるのに😖

Slide 12

Slide 12 text

12 イントロダクションそんなある日…👀 x.com/Sellmair/status/1846933575242764467

Slide 13

Slide 13 text

13 イントロダクションそんなある日…👀 x.com/Sellmair/status/1846933575242764467 あれ…！？ Compose Multiplatformで Hot Reloadが動作してるんだが…！？

Slide 14

Slide 14 text

14 イントロダクションそんなある日…👀 JetBrains/compose-hot-reload しかもJetBrainsのレポジトリに移動してる！？

Slide 15

Slide 15 text

15 イントロダクションそんなある日…👀 JetBrains/compose-hot-reload しかもJetBrainsのレポジトリに移動してる！？使ってみるしかないなぁ😎

Slide 16

Slide 16 text

🌟 Hot Reloadが動作するのは、現状Desktopビルドのみ ➔ Android / iOSのエミュレーター上でのHot Reloadは動作しない！😇 16 前提: compose-hot-reloadはどう動くのか issueには上がっているが、対応されるかなぁ…🤔

Slide 17

Slide 17 text

🛠 Kotlin Multiplatform Wizardでテンプレートをダウンロード ➔ Desktopにチェックを付けておく 17 compose-hot-reloadを動かしてみる kmp.jetbrains.com

Slide 18

Slide 18 text

🛠 READMEに沿ってセットアップ ➔ リモートリポジトリを追加 18 compose-hot-reloadを動かしてみる

Slide 19

Slide 19 text

🛠 READMEに沿ってセットアップ ➔ プラグインを設定 19 compose-hot-reloadを動かしてみる Kotlinのバージョンも別途指定が必要 compose-hot-reloadプラグインの設定

Slide 20

Slide 20 text

🛠 READMEに沿ってセットアップ ➔ OptimizeNonSkippingGroupの設定を追加 20 compose-hot-reloadを動かしてみる

Slide 21

Slide 21 text

🛠 Hot Reloadを有効にしたい部分を DevelopmentEntryPointメソッドでくくる 21 compose-hot-reloadを動かしてみる fun main() = application { Window( onCloseRequest = ::exitApplication, title = "hot-reload-sample", ) { DevelopmentEntryPoint { App() } } } ブロック内の実装に変更があると Hot Reloadが動作

Slide 22

Slide 22 text

🛠 ./gradlew :composeApp:desktopRunを実行！ 22 compose-hot-reloadを動かしてみる

Slide 23

Slide 23 text

🛠 ./gradlew :composeApp:desktopRunを実行！ ➔ エラーで落ちる😢　ので対応 23 compose-hot-reloadを動かしてみる

Slide 24

Slide 24 text

🛠 ./gradlew :composeApp:desktopRunを実行！ ➔ エラーで落ちる😢　ので対応 24 compose-hot-reloadを動かしてみる mainClassプロパティを使って実行対象のクラスを指定する必要がある

Slide 25

Slide 25 text

🛠 ./gradlew :composeApp:desktopRunを実行！ ➔ エラーで落ちる😢　ので対応 25 compose-hot-reloadを動かしてみる IDE上で実行する場合、「Run/Debug Conﬁgurations」を修正

Slide 26

Slide 26 text

🛠 ./gradlew :composeApp:desktopRunを実行！ ➔ エラーを潰しきると… 26 compose-hot-reloadを動かしてみるウィンドウの横にアイコンとカラーバーが出現

Slide 27

Slide 27 text

27 まとめ 👍 Compose MultiplatformでHot Reloadが動くと楽しい！ ➔ Desktopビルドしか動かない制限はあるが、使う価値はありそう ➔ Android / iOSエミュレーターでも動く未来が早く来て欲しい！ Thank you for listening! プラグインの制作者が解説動画も出しているので気になった方はcheck！