Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
KotlinJSでもCoroutines
Search
Ryo Sakaguchi
July 03, 2018
Programming
1
1.8k
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
1.2k
Test multiple APKs with Robolectric
wakwak3125
0
740
Clip, Elevation and ViewOutlineProvider
wakwak3125
1
1.2k
WebView as Fancy and effective View
wakwak3125
1
1.5k
ViewPager2をちょっとさわってみよう
wakwak3125
0
1.6k
年末だし、振り返るKotlin
wakwak3125
1
1k
社内ライブラリのアップデートフロー
wakwak3125
4
3.7k
Wantedly Peopleのリリースフロー
wakwak3125
1
4.5k
KOINかわいいよ、KOIN
wakwak3125
0
910
Other Decks in Programming
See All in Programming
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
CursorはMCPを使った方が良いぞ
taigakono
1
170
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
46
30k
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
310
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
240
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
570
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
19
3.5k
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Building Applications with DynamoDB
mza
95
6.5k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Done Done
chrislema
184
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Making Projects Easy
brettharned
116
6.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Scaling GitHub
holman
459
140k
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
͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ