Slide 1
Slide 1 text
KotlinJSͰ
Coroutines
2018.07.03 KotlinѪձ vol2
Ryo Sakaguchi(@wakwak3125)
Slide 2
Slide 2 text
About me
• Ryo Sakaguchi (@wakwak3125)
• Wantedly People
• AndroidͷਓͰ͢
• Snowboard/Guitar/Beer
Slide 3
Slide 3 text
WHAT IS
COROUTINES?
Slide 4
Slide 4 text
These posts are useful!
• Coroutines - Kotlin Programming Language
• https://kotlinlang.org/docs/reference/coroutines.html
• શʹཧղͨ͠ؾʹͳΔKotlin Coroutines by @takahirom
• https://qiita.com/takahirom/items/
2ba221a8d0c32cf701ba
• ೖKotlin coroutines @k-kagurazaka
• https://qiita.com/k-kagurazaka@github/items/
Slide 5
Slide 5 text
KotlinJSͰCoroutines͕͑Δʂ
ಛʹ͍͜͠ͱΛҙࣝ͢Δ͜ͱͳ͑ͯ͘͠·ͬͨ!
Slide 6
Slide 6 text
SET UP
KotlinJSͰ࡞ΒΕͨReactϕʔεͷΣϒΞϓϦͰ
Slide 7
Slide 7 text
create-react-kotlin-app
• JetBrains/create-react-kotlin-app
• https://github.com/JetBrains/create-react-kotlin-app
• ҰൃͰKotlinͰॻ͔ΕͨReactΞϓϦ͕࡞ΕΔཔΕΔͭ
Slide 8
Slide 8 text
͔͍͔ͭͨ
• $ npm install -g create-react-kotlin-app
• $ create-react-kotlin-app my-app
• done!!
• $ yarn start͢ΔͱlocalhostͰಈ࡞֬ೝͰ͖Δ
Slide 9
Slide 9 text
͜Μͳײ͡
Slide 10
Slide 10 text
App.kt
class App : RComponent() {
override fun RBuilder.render() {
div("App-header") {
logo()
h2 {
+"Welcome to React with Kotlin"
}
}
p("App-intro") {
+"To get started, edit "
code { +"app/App.kt" }
+" and save to reload."
}
p("App-ticker") {
ticker()
}
}
}
fun RBuilder.app() = child(App::class) {}
Slide 11
Slide 11 text
Ticker.kt
class Ticker(props: TickerProps) : RComponent(props) {
override fun TickerState.init(props: TickerProps) {
secondsElapsed = props.startFrom
}
var timerID: Int? = null
override fun componentDidMount() {
timerID = window.setInterval({
setState { secondsElapsed += 1 }
}, 1000)
}
override fun componentWillUnmount() {
window.clearInterval(timerID!!)
}
override fun RBuilder.render() {
+"This app has been running for ${state.secondsElapsed} seconds."
}
}
fun RBuilder.ticker(startFrom: Int = 0) = child(Ticker::class) {
attrs.startFrom = startFrom
}
Slide 12
Slide 12 text
TickerͷStateͱProps
interface TickerProps : RProps {
var startFrom: Int
}
interface TickerState : RState {
var secondsElapsed: Int
}
Slide 13
Slide 13 text
ΊͬͬͬͪΌKotlin
Slide 14
Slide 14 text
Tickerͷ࣮
setIntervalͰ1ඵ͝ͱʹΧϯτΞοϓ
var timerId: Int? = null
override fun componentDidMount() {
timerID = window.setInterval({
setState { secondsElapsed += 1 }
}, 1000)
}
Slide 15
Slide 15 text
Tickerͷ࣮
setIntervalͰ1ඵ͝ͱʹΧϯτΞοϓ
var timerId: Int? = null
override fun componentDidMount() {
timerID = window.setInterval({
setState { secondsElapsed += 1 }
}, 1000)
}
=> CoroutineԽͯ͠ΈΑ͏
Slide 16
Slide 16 text
kotlinx-coroutines-core
• kotlinx.coroutines/js/kotlinx-coroutines-core-js
• https://github.com/Kotlin/kotlinx.coroutines/tree/master/
js/kotlinx-coroutines-core-js
• Install the dependency
$ yarn add kotlinx-coroutines-core
• done!
Slide 17
Slide 17 text
CoroutineԽͯ͠ΈΔ
var job: Job? = null
override fun componentDidMount() {
job = launch {
while (true) {
delay(1000)
setState { secondsElapsed += 1 }
}
}
}
=> done!
Slide 18
Slide 18 text
fetch
• fetchͪΖΜ͑Δ
// ίʔυงғؾ
suspend fun getFoo(): Any = suspendCoroutine { cont ->
window
.fetch("https://foo.com/api/foo")
.then({ response ->
cont.resume(response.ok.toString())
},{ throwable ->
cont.resumeWithException(throwable)
})
}
// ී௨ʹ͏
launce {
val foo = getFoo()
}
Slide 19
Slide 19 text
ΊͬͬͬͪΌCoroutines
Slide 20
Slide 20 text
͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ