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.7k
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
670
Clip, Elevation and ViewOutlineProvider
wakwak3125
1
1.1k
WebView as Fancy and effective View
wakwak3125
1
1.4k
ViewPager2をちょっとさわってみよう
wakwak3125
0
1.5k
年末だし、振り返るKotlin
wakwak3125
1
960
社内ライブラリのアップデートフロー
wakwak3125
4
3.5k
Wantedly Peopleのリリースフロー
wakwak3125
1
4.4k
KOINかわいいよ、KOIN
wakwak3125
0
830
Other Decks in Programming
See All in Programming
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
190
急成長期の品質とスピードを両立するフロントエンド技術基盤
soarteclab
0
920
menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~
yoshifumi_ishikura
0
110
Go の GC の不得意な部分を克服したい
taiyow
2
770
事業成長を爆速で進めてきたプロダクトエンジニアたちの成功談・失敗談
nealle
3
1.4k
ソフトウェアの振る舞いに着目し 複雑な要件の開発に立ち向かう
rickyban
0
890
今からはじめるAndroidアプリ開発 2024 / DevFest 2024
star_zero
0
1k
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
4
200
CSC305 Lecture 25
javiergs
PRO
0
130
StarlingMonkeyを触ってみた話 - 2024冬
syumai
3
270
Cloudflare MCP ServerでClaude Desktop からWeb APIを構築
kutakutat
1
530
rails statsで大解剖 🔍 “B/43流” のRailsの育て方を歴史とともに振り返ります
shoheimitani
2
930
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
The World Runs on Bad Software
bkeepers
PRO
65
11k
KATA
mclloyd
29
14k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Fireside Chat
paigeccino
34
3.1k
Bash Introduction
62gerente
608
210k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
66k
Building Your Own Lightsaber
phodgson
103
6.1k
A Tale of Four Properties
chriscoyier
157
23k
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
͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ