「 動く」サンプルでスムーズなコミュニケーションを

2025/11/01 16:50-17:10 @ let?(402N) Kotlin Fest 2025 での登壇資料です
https://2025.kotlinfest.dev/timetable/1719039000_c/

KotlinPlaygroundはブラウザ上で編集・実行・共有が完結する、JetBrainsによって提供されているウェブサイトです。
Kotlinのバージョンや実行環境を簡単に変更して、ウェブ上で実行結果まで確認できるため、手軽に動作を確認できるサンプルコードを共有するツールとして活用されています。
直近では、Compose MultiplatformやCanvas等の様々な実行環境のサポートが行われており、動くUIのサンプルを書いて共有することもできるようになっています。このセッションでは機能紹介からはじめ、ショートカットや、できることの限界といった点まで触れて効果的なコード共有を実現するためのベストプラクティスを含む内容を紹介します。

「動く」コードサンプルでチームのコミュニケーションをよりスムーズにしてみませんか?

Transcript

1. 「 く」サンプルで スムーズなコミュニケーションを CMP時代のKotlinPlayground 活用最前線 Kazuki CHIGITA(chigichan24) 2025/11/01 16:50-17:10 @ let?(402N) 動 #KotlinFest2025 1
2. 自己紹介 誰？ : Kazuki CHIGITA / @chigichan24 株式会社MIXI で「家族アルバム みてね」 の 開発中 好きなKotlinの言語仕様 : sealed interface 好きなModifier : draggable2D 2
3. おしながき 1. KotlinPlaygroundとは 2. 機能紹介 3. Compose Multiplatformの紹介 4. 細かなTips 3
4. Kotlin Playground 4
5. Kotlin Playground - web ブラウザ上で Kotlin を簡単に実行できる - https://play.kotlinlang.org/ 5
6. https://pl.kotl.in/0B2oEffXu 6
7. 知ってた？ 初めて 聞いた！ 普段使い しているよ 昔使ったこと あるなぁ 7
8. 知ってた？ 初めて 聞いた！ 普段使い しているよ 昔使ったこと あるなぁ このセッションを通して、 現代風の使い方を知ってほしい 8
9. 知ってた？ 初めて 聞いた！ 普段使い しているよ 昔使ったこと あるなぁ 一緒に働く人にこのスライドと共に その知見を広めてほしい 9
10. このセッションの目的 1. Kotlinの言語機能の学習以上の使い方を知る 2. 日常使いのプラットフォームとして活用する ための具体的なtipsを知る 10
11. 機能紹介 11
12. Kotlin Playground - web ブラウザ上で Kotlin を簡単に実行できる - https://play.kotlinlang.org/ 12
13. https://pl.kotl.in/0B2oEffXu バージョン 13
14. バージョン差に関する挙動あれこれの調査が可能 - 一番古いもので1.2.71、最も新しいものが2.3.0-beta2がある - メリット - バージョン別の挙動を確かめることにも役立つ - 簡単に最新機能に触れられる - 本腰を入れた調査はここだけでは難しい - 例えば、一部言語機能はx.x.0 から x.x.20 になるときに挙動が変 わることもある (e.g. readLine挙動変更騒動) - その類のものはここだけでは確かめられない 14
15. https://pl.kotl.in/-zOGQI88U 15
16. https://pl.kotl.in/-zOGQI88U Data-flow-based exhaustiveness checksは有効でない :sad: 16
17. https://pl.kotl.in/rfuMykXml 17
18. https://pl.kotl.in/rfuMykXml 2.3.0 からデフォルトオンなので 実行可能 18
19. https://pl.kotl.in/0B2oEffXu プラットフォーム 19
20. 選択可能なプラットフォーム - JVM - JS - Compose Multiplatform - Wasm - JUnit - Canvas - Swift export (以前は選択できたが、ここ数ヶ月?でなくなった) 20
21. 選択可能なプラットフォーム - JVM - JS - Compose Multiplatform - Wasm - JUnit - Canvas - Swift export (以前は選択できたが、ここ数ヶ月?でなくなった) transpileした結果を吐き出してくれる 21
22. https://pl.kotl.in/0B2oEffXu Generate JS ボタンが出現 22
23. https://pl.kotl.in/0B2oEffXu 23
24. 選択可能なプラットフォーム - JVM - JS - Compose Multiplatform - Wasm - JUnit - Canvas - Swift export (以前は選択できたが、ここ数ヶ月?でなくなった) 後述 24
25. 選択可能なプラットフォーム - JVM - JS - Compose Multiplatform - Wasm - JUnit - Canvas - Swift export (以前は選択できたが、ここ数ヶ月?でなくなった) テストの実行ができる (!?) 25
26. テストの実行ができる (!?) https://pl.kotl.in/WqWpZ0j97 26
27. 選択可能なプラットフォーム - JVM - JS - Compose Multiplatform - Wasm - JUnit - Canvas - Swift export (以前は選択できたが、ここ数ヶ月?でなくなった) テストの実行ができる (!?) https://pl.kotl.in/WqWpZ0j97 org.junitがインポートできるのがメリット 27
28. 選択可能なプラットフォーム - JVM - JS - Compose Multiplatform - Wasm - JUnit - Canvas - Swift export (以前は選択できたが、ここ数ヶ月?でなくなった) テストの実行ができる (!?) https://pl.kotl.in/WqWpZ0j97 org.junitがインポートできるのがメリット 有名どころのmockライブラリは使えない :sad: 28
29. https://pl.kotl.in/LlcjT92jd 29
30. https://pl.kotl.in/LlcjT92jd 30
31. JUnit - JUnit4 を使用できる - 基礎的なテストを確認することができる - Kotlinでは、なんらかmockライブラリを使用するのが一般的 - 実践的に使うことにはあまり向いていない - 自作mockを多用しているなら、もしかしたらいいかも？ 31
32. https://pl.kotl.in/0B2oEffXu 実行時引数 32
33. https://pl.kotl.in/0B2oEffXu 実行時引数 JVMのみサポート 33
34. https://pl.kotl.in/ULIx7kMYj 34
35. https://pl.kotl.in/0B2oEffXu 短縮URL 35
36. https://pl.kotl.in/0B2oEffXu これ 36
37. https://pl.kotl.in/0B2oEffXu コード共有 37
38. https://pl.kotl.in/0B2oEffXu 38
39. https://pl.kotl.in/0B2oEffXu ビルド実行 39
40. 選択可能なプラットフォーム - JVM - JS - Compose Multiplatform - Wasm - JUnit - Canvas - Swift export (以前は選択できたが、ここ数ヶ月?でなくなった) 40
41. 選択可能なプラットフォーム - JVM - JS - Compose Multiplatform - Wasm - JUnit - Canvas - Swift export (以前は選択できたが、ここ数ヶ月?でなくなった) 今日の話題の中心 41
42. Compose Multiplatform 42
43. Compose Multiplatform - iOS、Desktop、Webなどあらゆるプラットフォームで 動作させることができるオープンソースの宣言型フレームワーク - for Webは現在ベータ - Kotlin Playgroundで実行できる理由はこの技術 - Kotlin/Wasmの技術によって実現される https://kotlinlang.org/docs/wasm-get-started.html 細やかな話は他のセッションにおまかせ 43
44. https://pl.kotl.in/-XWlrXzJV 44
45. https://pl.kotl.in/-XWlrXzJV 左Paneはこれまでと同じでコードエディタ 45
46. https://pl.kotl.in/-XWlrXzJV 右Paneは実際に実行した画面 46
47. https://pl.kotl.in/-XWlrXzJV 47
48. import androidx.compose.material.Text import androidx.compose.runtime.* import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.window.ComposeViewport import kotlinx.browser.document @OptIn(ExperimentalComposeUiApi::class) fun main() { ComposeViewport(document.body!!) { App() } } @Composable fun App() { Text("Hello") } https://pl.kotl.in/_QXI_TqsU 48
49. import androidx.compose.material.Text import androidx.compose.runtime.* import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.window.ComposeViewport import kotlinx.browser.document @OptIn(ExperimentalComposeUiApi::class) fun main() { ComposeViewport(document.body!!) { App() } } @Composable fun App() { Text("Hello") } https://pl.kotl.in/_QXI_TqsU Compose for Web のAPI HTMLのDOM要素に、Compose UIを統合してくれる 49
50. import androidx.compose.material.Text import androidx.compose.runtime.* import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.window.ComposeViewport import kotlinx.browser.document @OptIn(ExperimentalComposeUiApi::class) fun main() { ComposeViewport(document.body!!) { App() } } @Composable fun App() { Text("Hello") } https://pl.kotl.in/_QXI_TqsU Compose for Web のAPI HTMLのDOM要素に、Compose UIを統合してくれる 注意: 以前まではCanvasBasedWindowで書くのが 主流だったので、書き方が変わっている 50
51. import androidx.compose.material.Text import androidx.compose.runtime.* import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.window.ComposeViewport import kotlinx.browser.document @OptIn(ExperimentalComposeUiApi::class) fun main() { ComposeViewport(document.body!!) { App() } } @Composable fun App() { Text("Hello") } https://pl.kotl.in/_QXI_TqsU 本質 51
52. 何が動く？ 52
53. 何が動く？ だいたいなんでもうごくよ！ 53
54. 何が動く？ https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource 54
55. 何が動く？ https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource API referencesで、Cmn表記があればOK 55
56. https://pl.kotl.in/JQiAjbKqg 56
57. 細かいtips 57
58. 実際の開発現場でどう使ってるの？ - コードレビューの時 58
59. 実際の開発現場でどう使ってるの？ - コードレビューの時 200ってどんな見た目になるんだ？ 59
60. 実際の開発現場でどう使ってるの？ - コードレビューの時 200ってどんな見た目になるんだ？ 実は180くらいのほうがいい？ 60
61. 実際の開発現場でどう使ってるの？ - コードレビューの時 200ってどんな見た目になるんだ？ 実は180くらいのほうがいい？ このオフセット実際いるの？ 61
62. 実際の開発現場でどう使ってるの？ - コードレビューの時 200ってどんな見た目になるんだ？ 実は180くらいのほうがいい？ このオフセット実際いるの？ UIコードのコミュニケーションは 動くものベースで話したい！！ 62
63. 実際の開発現場でどう使ってるの？ - コードレビューの時 この一手間でよりスムーズになる！ 63
64. 実際の開発現場でどう使ってるの？ - コードレビューの時 この一手間でよりスムーズになる！ 0 configurationで Playground上で細かくいじってもらえる 64
65. 余談 - 疑問 : コード断片だけでなく、実行環境ごと共有できれば もっとできることの幅が広がるのではないか？ - 用途違いだが、Firebase Studioとかは選択肢の一つかも？ - 旧名 Project IDX - 現状はwaitlistに登録する形式なので、しばらくは難しいかも https://studio.firebase.google.com/ 65
66. コードはどこで書く？ - Playground上で書くのは、Compose・Kotlinを書き慣れてない人は 大変かも - それでもコード補完などはあるのである程度はかける。 - コード補完は ^ + Space で動く。 - はじめのうちは、手元でコードを書きつつ、共有用途に絞るのも おすすめ 66
67. Jetpack Compose用途のみでも使える？ - 使用するAPIが全てCmnに対応しているならば使える。 - 最近は多くのAPIがCmnとなっているので、意外に使える。 - 一方で、足りないAPIがあったときには共有できない。 67
68. privateなコードをここに乗せていいの？ - やめておくのが無難 (個人的な考え) - 自分も使うときは、命名は必ず変えつつ、確認したい最小構成要素を 使っています。 - プラットフォームに応じて異なるパスにplaygroundに書いたコードを jetbrainsが管理するAPIにコードを投げる。 実行結果がレスポンスとして返ってくる。 細かい詳しい話は割愛 68
69. まとめ 69
70. まとめ - Kotlin Playground、webブラウザだけで完結して便利 - バージョン差異を簡単に確認するのに便利。 - UIに関するコミュニケーションは動かしながら行うのがいいよね。 これを実現するにはKotlin Playgroundがおすすめ。 - 様々なプラットフォームを検証することもできる。 細かいところで、日々賢く使っていこう！ 70