Upgrade to Pro — share decks privately, control downloads, hide ads and more …

KotlinJSでもCoroutines

 KotlinJSでもCoroutines

2018.07.03 Kotlin愛好会 vol2
create-react-kotlin-appでサンプルプロジェクトを作り、その上でcoroutinesを動かしてみます。

90ec81078e4fd2b905f8ef0776887afa?s=128

Ryo Sakaguchi

July 03, 2018
Tweet

Transcript

  1. KotlinJSͰ΋ Coroutines 2018.07.03 KotlinѪ޷ձ vol2 Ryo Sakaguchi(@wakwak3125)

  2. About me • Ryo Sakaguchi (@wakwak3125) • Wantedly People •

    AndroidͷਓͰ͢ • Snowboard/Guitar/Beer
  3. WHAT IS COROUTINES?

  4. 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/
  5. KotlinJSͰ΋Coroutines͕࢖͑Δʂ ಛʹ೉͍͜͠ͱΛҙࣝ͢Δ͜ͱͳ͘࢖͑ͯ͠·ͬͨ!

  6. SET UP KotlinJSͰ࡞ΒΕͨReactϕʔεͷ΢ΣϒΞϓϦͰ

  7. create-react-kotlin-app • JetBrains/create-react-kotlin-app • https://github.com/JetBrains/create-react-kotlin-app • ҰൃͰKotlinͰॻ͔ΕͨReactΞϓϦ͕࡞ΕΔཔΕΔ΍ͭ

  8. ͔͍͔ͭͨ • $ npm install -g create-react-kotlin-app • $ create-react-kotlin-app

    my-app • done!! • $ yarn start͢ΔͱlocalhostͰಈ࡞֬ೝͰ͖Δ
  9. ͜Μͳײ͡

  10. App.kt class App : RComponent<RProps, RState>() { 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) {}
  11. Ticker.kt class Ticker(props: TickerProps) : RComponent<TickerProps, TickerState>(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 }
  12. TickerͷStateͱProps interface TickerProps : RProps { var startFrom: Int }

    interface TickerState : RState { var secondsElapsed: Int }
  13. ΊͬͬͬͪΌKotlin

  14. Tickerͷ࣮૷ setIntervalͰ1ඵ͝ͱʹΧ΢ϯτΞοϓ var timerId: Int? = null override fun componentDidMount()

    { timerID = window.setInterval({ setState { secondsElapsed += 1 } }, 1000) }
  15. Tickerͷ࣮૷ setIntervalͰ1ඵ͝ͱʹΧ΢ϯτΞοϓ var timerId: Int? = null override fun componentDidMount()

    { timerID = window.setInterval({ setState { secondsElapsed += 1 } }, 1000) } => CoroutineԽͯ͠ΈΑ͏
  16. 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!
  17. CoroutineԽͯ͠ΈΔ var job: Job? = null override fun componentDidMount() {

    job = launch { while (true) { delay(1000) setState { secondsElapsed += 1 } } } } => done!
  18. 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() }
  19. ΊͬͬͬͪΌCoroutines

  20. ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ