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