Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
KotlinJSでもCoroutines
Ryo Sakaguchi
July 03, 2018
Programming
1
1.2k
KotlinJSでもCoroutines
2018.07.03 Kotlin愛好会 vol2
create-react-kotlin-appでサンプルプロジェクトを作り、その上でcoroutinesを動かしてみます。
Ryo Sakaguchi
July 03, 2018
Tweet
Share
More Decks by Ryo Sakaguchi
See All by Ryo Sakaguchi
Android Architecture Componentsを使って、改善・効率化するAndroidアプリ開発
wakwak3125
0
890
Test multiple APKs with Robolectric
wakwak3125
0
390
Clip, Elevation and ViewOutlineProvider
wakwak3125
1
710
WebView as Fancy and effective View
wakwak3125
1
1k
ViewPager2をちょっとさわってみよう
wakwak3125
0
1.1k
年末だし、振り返るKotlin
wakwak3125
1
650
社内ライブラリのアップデートフロー
wakwak3125
4
2.8k
Wantedly Peopleのリリースフロー
wakwak3125
1
3.3k
KOINかわいいよ、KOIN
wakwak3125
0
680
Other Decks in Programming
See All in Programming
【Scrum Fest Osaka 2022】スクラムチームに放り込まれた若手エンジニアの皆さん、どのように技術のキャッチアップをしていくかイメージはついていますか?
miiiki
0
110
Springin‘でみんなもクリエイターに!
ueponx
0
130
Swift Regex
usamik26
0
140
trocco® の品質を守る、とても普通な取り組み
kekekenta
0
350
Improving Developer Experience Through Tools and Techniques 2022
krzysztofzablocki
0
480
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @wad2022
manfredsteyer
PRO
0
130
JetPackComposeは宣言型プログラミングパラダイムって実はよくわかってないんですが、別に使ってもいいんですよね、
conigashima
0
180
Reactive Java Microservices on Kubernetes with Spring and JHipster
deepu105
1
170
Vite でお手軽 Vue.js の環境構築
azuki
2
180
短納期でローンチした新サービスをJavaで開発した話/launched new service using Java
eichisanden
6
1.9k
Value and Record Types
hschwentner
0
550
競プロのすすめ
uya116
0
660
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
344
17k
How to train your dragon (web standard)
notwaldorf
58
3.9k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
Producing Creativity
orderedlist
PRO
333
37k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
For a Future-Friendly Web
brad_frost
166
7.4k
YesSQL, Process and Tooling at Scale
rocio
157
12k
Happy Clients
brianwarren
89
5.6k
Transcript
KotlinJSͰ Coroutines 2018.07.03 KotlinѪձ vol2 Ryo Sakaguchi(@wakwak3125)
About me • Ryo Sakaguchi (@wakwak3125) • Wantedly People •
AndroidͷਓͰ͢ • Snowboard/Guitar/Beer
WHAT IS COROUTINES?
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/
KotlinJSͰCoroutines͕͑Δʂ ಛʹ͍͜͠ͱΛҙࣝ͢Δ͜ͱͳ͑ͯ͘͠·ͬͨ!
SET UP KotlinJSͰ࡞ΒΕͨReactϕʔεͷΣϒΞϓϦͰ
create-react-kotlin-app • JetBrains/create-react-kotlin-app • https://github.com/JetBrains/create-react-kotlin-app • ҰൃͰKotlinͰॻ͔ΕͨReactΞϓϦ͕࡞ΕΔཔΕΔͭ
͔͍͔ͭͨ • $ npm install -g create-react-kotlin-app • $ create-react-kotlin-app
my-app • done!! • $ yarn start͢ΔͱlocalhostͰಈ࡞֬ೝͰ͖Δ
͜Μͳײ͡
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) {}
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 }
TickerͷStateͱProps interface TickerProps : RProps { var startFrom: Int }
interface TickerState : RState { var secondsElapsed: Int }
ΊͬͬͬͪΌKotlin
Tickerͷ࣮ setIntervalͰ1ඵ͝ͱʹΧϯτΞοϓ var timerId: Int? = null override fun componentDidMount()
{ timerID = window.setInterval({ setState { secondsElapsed += 1 } }, 1000) }
Tickerͷ࣮ setIntervalͰ1ඵ͝ͱʹΧϯτΞοϓ var timerId: Int? = null override fun componentDidMount()
{ timerID = window.setInterval({ setState { secondsElapsed += 1 } }, 1000) } => CoroutineԽͯ͠ΈΑ͏
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!
CoroutineԽͯ͠ΈΔ var job: Job? = null override fun componentDidMount() {
job = launch { while (true) { delay(1000) setState { secondsElapsed += 1 } } } } => done!
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() }
ΊͬͬͬͪΌCoroutines
͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ