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
Kotlin/JSと格闘しながらKotlinのイケてる文法を学ぶ
Search
subroh_0508
March 19, 2019
Technology
0
760
Kotlin/JSと格闘しながらKotlinのイケてる文法を学ぶ
【とらのあな主催】オタクがKotlinを追うライトニングトークイベントのLT発表資料です
subroh_0508
March 19, 2019
Tweet
Share
More Decks by subroh_0508
See All by subroh_0508
Compose MultiplatformでもHot Reloadが動くらしい
subroh0508
1
100
Compose for Webでポートフォリオサイトを作る
subroh0508
1
150
あらゆるアプリをCompose Multiplatformで書きたい! -ネイティブアプリの「あの機能」を私たちはどう作るか-
subroh0508
1
2.6k
登壇の心理的ハードルをコントロールする技術
subroh0508
2
550
テストコードを書きながらCompose Multiplatformを乗りこなす
subroh0508
0
890
自己効力感を二次元アイドル作品から得ながら社会人としての成長を超加速させる
subroh0508
2
710
担当アイドルを応援する傘を作ろう! (として失敗した話)
subroh0508
0
610
buildSrc/Composite Buildで必要なバージョン情報も Version Catalogから参照したい!
subroh0508
0
1.6k
フロントエンドもJetpack Composeで書きたい! -Compose for WebはモダンWebアプリケーションの夢を見るか?-
subroh0508
0
930
Other Decks in Technology
See All in Technology
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
170
AWSを活用したIoTにおけるセキュリティ対策のご紹介
kwskyk
0
350
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
460
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
150
技術スタックだけじゃない、業務ドメイン知識のオンボーディングも同じくらいの量が必要な話
niftycorp
PRO
0
110
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
8
1.1k
Goで作って学ぶWebSocket
ryuichi1208
3
2.8k
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
180
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
520
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
210
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
260
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
2
270
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Facilitating Awesome Meetings
lara
52
6.2k
How STYLIGHT went responsive
nonsquared
98
5.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
How to Ace a Technical Interview
jacobian
276
23k
Designing for Performance
lara
604
68k
Transcript
,PUMJO+4ͱ֨ಆ͠ͳ͕Β ,PUMJOͷΠέͯΔจ๏ΛֶͿ ʹ͜͠Γ͞ͿΖʙ!TVCSPI@
ࣗݾհ w ʹ͜͠Γ͞ͿΖʙ ຊ໊ࡔ্৴ w גࣜձࣾ#FBS5BJM w "OESPJEΤϯδχΞ ,PUMJO+BWB
ˑ w 8FCΤϯδχΞ 3BJMT3FBDU w ,PUMJOྺ
࣍ ,PUMJO+4ͷ֓ཁ ,PUMJOͷΠέͯΔจ๏հ w ϥϜμࣜ w ֦ுؔ w
ԋࢉࢠΦʔόʔϩʔυ ,PUMJO+4ͱͷ֨ಆͷه
,PUMJO+4ͷ֓ཁ w ϑϩϯτΤϯυͷίʔυ,PUMJOͰॻ͍ͯ͠·͓͏ʂ w ,PUMJOˠ+4ʹมɺ(SBEMFϓϥάΠϯΛ+FU#SBJOT͕ఏڙ w LPUMJOKTɺLPUMJOGSPOUFOEQMVHJO w (SBEMFʹίϯύΠϧ8FCQBDLͷઃఆΛهड़ w
࣮ߦˠ+4มޙͷϑΝΠϧ͕ग़ྗ͞ΕΔ
,PUMJOͰ+4͕ॻ͚Δʜ w ܕ҆શʂॻ͖׳Εͨ,PUMJOͰϑϩϯτΤϯυॻָ͚͍ͯ͠ʂ w ਓྨʹ·ͩૣ͗͢Δ ࣮ࡍʹ֨ಆͨ࣌͠ͷͭΒΈޙ΄Ͳʜ w ίʔυϦʔσΟϯάˠ,PUMJOͷݴޠ༷Λϑϧʹ׆༻ w
ಛʹΑͦ͞͏ͳϞϊΛ͍͔ͭ͘հ w %4- υϝΠϯݻ༗ݴޠ ͷ࣮ʹʹཱͭ
,PUMJOͷΠέͯΔจ๏հ w ϥϜμࣜؔΛએݴͤͣɺͦͷͰมͷΑ͏ʹ͢ // 2つのInt型変数の和を返す val sum = { x:
Int, y: Int -> x + y } print(sum(3, 4)) // => 7 // 別の関数の引数として渡すことも可 fun addAndTimes(sum: (Int, Int) -> Int, n: Int): Int { return sum(n, n) * n } print(addAndTimes(sum, 5)) // => 50
,PUMJOͷΠέͯΔจ๏հ w ֦ுؔطଘͷΫϥεʹ֎͔Β৽ؔ͘͠ΛՃ͢Δ w 4UBUJDͳϝιουΛՃ+BWB͔ΒΫϥεϝιουͱͯ͠ղऍ // Int型のリストに平均値を返す関数を追加 fun List<Int>.average(): Double
{ return this.sum().toDouble() / this.size.toDouble() } print(listOf(1, 2, 3, 4).average()) // => 2.5
,PUMJOͷΠέͯΔจ๏հ w ԋࢉࢠΦʔόʔϩʔυԋࢉࢠͷॲཧΛॻ͖͑Δ w ීஈ͔͍ͮ͋·Γ͠ͳ͍ɺ%4-Λ࡞Δ࣌ʹͱͯศར data class Person(val name: String)
data class People(val names: List<String>) // Person同士を足してPeopleに変換して返す operator fun Person.plus(other: Person): People = People(listOf(this.name, other.name)) Person("音無小鳥") + Person("青羽美咲") // => People(["音無小鳥", "青羽美咲"])
,PUMJO+4Ͱʜ w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ class App : RComponent<RProps, RState>() { override
fun RBuilder.render() { div("title") { +"Welcome to React with Kotlin" } } } class App extends React.Component { render() { return ( <div className='title'> Welcome to React with Kotlin </div> ) } } ,PUMJO+4 3FBDU
,PUMJO+4Ͱʜ w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ class App : RComponent<RProps, RState>() { override
fun RBuilder.render() { div("title") { +"Welcome to React with Kotlin" } } }
,PUMJO+4Ͱʜ w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ class App : RComponent<RProps, RState>() { override
fun RBuilder.render() { div("title") { +"Welcome to React with Kotlin" } } } SFOEFSϝιου͕ ʮ3#VJMEFSΫϥεͷ֦ுؔʯ ͱͯ͠ఆٛ
,PUMJO+4Ͱʜ w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ class App : RComponent<RProps, RState>() { override
fun RBuilder.render() { div("title") { +"Welcome to React with Kotlin" } } } EJW ϝιου ˠEJWλάΛߏங͢Δ
fun RBuilder.div( classes: String? = null, block: RDOMBuilder<DIV>.() -> Unit
): ReactElement = … ,PUMJO+4Ͱʜ w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ class App : RComponent<RProps, RState>() { override fun RBuilder.render() { div("title") { +"Welcome to React with Kotlin" } } } EJW ϝιου ˠ3#VJMEFSΫϥεͷ֦ுؔ
fun RBuilder.div( classes: String? = null, block: RDOMBuilder<DIV>.() -> Unit
): ReactElement = … ,PUMJO+4Ͱʜ w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ class App : RComponent<RProps, RState>() { override fun RBuilder.render() { div("title") { +"Welcome to React with Kotlin" } } } SFOEFS είʔϓͷUIJT 3#VJMEFSΫϥε ˠUIJTEJW\ʜ^EJW\ʜ^ )UNMͬΆ͍ݟͨͰॻ͚Δ ˠ֦ுؔͰείʔϓ੍ޚ
fun RBuilder.div( classes: String? = null, block: RDOMBuilder<DIV>.() -> Unit
): ReactElement = … ,PUMJO+4Ͱʜ w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ class App : RComponent<RProps, RState>() { override fun RBuilder.render() { div("title") { +"Welcome to React with Kotlin" } } } ϥϜμࣜ ҾΛऔΒͳ͍ɺԿฦ͞ͳ͍ είʔϓͷUIJT͕ 3%0.#VJMEFSʹͳΔ ˞3%0.#VJMEFSFYUFOET3#VJMEFS
,PUMJO+4Ͱʜ w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ class App : RComponent<RProps, RState>() { override
fun RBuilder.render() { div("title") { +"Welcome to React with Kotlin" } } } ԋࢉࢠΦʔόʔϩʔυ ˠʮEJWλάͰจࣈྻΛڬΉʯ ˠPQFSBUPSGVO4USJOHVOBSZ1MVT Ͳ͜Ͱ࣮͞ΕͯΔͷʁ
w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ open class RBuilder { operator fun String.unaryPlus() {
childList.add(this) } ... } ,PUMJO+4Ͱʜ class App : RComponent<RProps, RState>() { override fun RBuilder.render() { div("title") { +"Welcome to React with Kotlin" } } } 3#VJMEFSͷதʹ࣮ʂ SFOEFSEJWͷείʔϓͳΒ zIPHFzˠDIJME-JTUBEE lIPHFz ˠϥϜμࣜʹΑΔ είʔϓ੍ޚͷ͓͔͛ ˠԋࢉࢠΦʔόʔϩʔυࠇຐज़ ͑ΔՕॴΛݶఆɺ෭࡞༻⾪
·ͱΊ w ϥϜμࣜɺ֦ுؔɺԋࢉࢠΦʔόʔϩʔυͷϞμϯͳจ๏ w ݴޠͱͯ͠ͷදݱྗ͕ߴ͍ w είʔϓ੍ޚΛҙࣝ͢Δͱɺීஈݣ͍ͷ࣌ʹ׆͔ͤΔ w "OESPJEαʔόʔαΠυ͔ΒˠΓͳ͘ͳ͖ͬͯͨΒ,PUMJO+4
,PUMJO+4ͱͷ֨ಆͷه w ͖͔͚ͬ w #ʮαʔόʔαΠυ,PUMJO৮Γ͍ͨʔʯˠௐΔ w #ʮ,PUMJO+4ʜʁɹϑϩϯτ,PUMJOͰॻ͚Δͷ͔ʯˠॻ͍ͯΈΔ
,PUMJO+4ͱͷ֨ಆͷه w ׂͱΠέͨ DSFBUFSFBDULPUMJOBQQ (JUIVC w ,PUMJO+4 3FBDUͷڥΛ ༻ҙͯ͘͠ΕΔOQNϞδϡʔϧ
w $44͔Β)UNM·Ͱશͯ,PUMJOԽͰ͖ͨ
,PUMJOͷ8FCαΠτ ࡞Δ͔͠Ͷ͑ʂ ,PUMJOͷ8FCαΠτ࣮࣭ͬͯখௗ͞ΜͩΑͶʜ ͦΕ࡞ͬͨΒখௗ͞ΜͷੜΈͷͱݴͬͯաݴͰͳ͍ͷͰʜ
,PUMJO+4ͱͷ֨ಆͷه w ࠈ͔͜͜Β w +4ͷϥΠϒϥϦʮ.BUFSJBM6*ʯΛͬͯ࡞Δͧ w ಥવͷొɺʮEZOBNJDʯܕ @JsModule("@material-ui/core/Button") private external
val buttonModule: dynamic @Suppress("UnsafeCastFromDynamic") private val buttonComponent: RComponent<RProps, RState> = buttonModule.default ίϨ
,PUMJO+4ͱͷ֨ಆͷه w EZNBOJDܕ,PUMJOͱ+4ͷϒϦοδʹඞਢͳຐ๏ͷܕ w \GPPbGPP` CBS\IPHF^^ͱ͍͏ΦϒδΣΫτͷ߹ʜ val jsObject: dynamic =
js("{ foo: 'foo', bar: { hoge: '111' } }") print(jsObject["foo"]) // => 'foo' print(jsObject["bar"]["hoge"]) // => 111 jsObject["aaa"]["bbb"] = "add from kotlin" print(jsObject["aaa"]["bbb"]) // => add from kotlin ͋ɺ͋Γͷ··ࠓىͬͨ͜͜ͱΛͥ͢ʜ ʮΦϨ,PUMJOΛॻ͍͍ͯΔͱࢥͬͨΒ +BWBTDSJQUΛॻ͍͍ͯͨʯ ͳɺԿΛݴͬͯΔ͔Θ͔ΒͶʔͱ SZ
,PUMJO+4ͱͷ֨ಆͷه w +4ϥΠϒϥϦΛ͏ʹɺEZOBNJDΛΑ͠ͳʹม͢ΔΫϥε͕ඞਢʂ w .BUFSJBM6*ɺίϯϙʔωϯτҎ্ɹશͯϥούʔ͕ඞཁ w ϥούʔϥΠϒϥϦӶҙ࡞தʂ8FMDPNF$POUSJCVUFT ,PUMJO.BUFSJBM6*TVCSPILPUMJONBUFSJBMVJ
None
ࠓͳΒԿͯ͠Εͳ͘ઌۦऀʂ ,PUMJO+4ָ͍͠ʂ ΈΜͳ৮ͬͯར༻࣮ྫ૿͑ͯཉ͍͠ʂ