Kotlin/JSと格闘しながらKotlinのイケてる文法を学ぶ

【とらのあな主催】オタクがKotlinを追うライトニングトークイベントのLT発表資料です

Transcript

1. ,PUMJO+4ͱ֨ಆ͠ͳ͕Β
   ,PUMJOͷΠέͯΔจ๏ΛֶͿ ʹ͜͠Γ͞ͿΖʙ
   !TVCSPI@
2. ࣗݾ঺հ w ʹ͜͠Γ͞ͿΖʙ ຊ໊
   ࡔ্੖৴
   w גࣜձࣾ#FBS5BJM
   w "OESPJEΤϯδχΞ ,PUMJO+BWB ˑ
   w 8FCΤϯδχΞ 3BJMT3FBDU
   w ,PUMJOྺ໿೥
3. ໨࣍  ,PUMJO+4ͷ֓ཁ
    ,PUMJOͷΠέͯΔจ๏঺հ
   w ϥϜμࣜ
   w ֦ுؔ਺
   w ԋࢉࢠΦʔόʔϩʔυ
    ,PUMJO+4ͱͷ֨ಆͷه࿥
4. ,PUMJO+4ͷ֓ཁ w ϑϩϯτΤϯυͷίʔυ΋,PUMJOͰॻ͍ͯ͠·͓͏ʂ
   w ,PUMJOˠ+4ʹม׵ɺ(SBEMFϓϥάΠϯΛ+FU#SBJOT͕ఏڙ
   w LPUMJOKTɺLPUMJOGSPOUFOEQMVHJO
   w (SBEMFʹίϯύΠϧ΍8FCQBDLͷઃఆΛهड़
   w ࣮ߦˠ+4ม׵ޙͷϑΝΠϧ͕ग़ྗ͞ΕΔ
5. ,PUMJOͰ+4͕ॻ͚Δʜ w ܕ҆શʂ
   ॻ͖׳Εͨ,PUMJOͰϑϩϯτΤϯυॻָ͚͍ͯ͠ʂ
   w ਓྨʹ͸·ͩૣ͗͢Δ ࣮ࡍʹ֨ಆͨ࣌͠ͷͭΒΈ͸ޙ΄Ͳʜ
   w ίʔυϦʔσΟϯάˠ,PUMJOͷݴޠ࢓༷Λϑϧʹ׆༻
   w ಛʹΑͦ͞͏ͳϞϊΛ͍͔ͭ͘঺հ
   w %4- υϝΠϯݻ༗ݴޠ ͷ࣮૷ʹ͸௚઀໾ʹཱͭ
6. ,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
7. ,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
8. ,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(["音無小鳥", "青羽美咲"])
9. ,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
10. ,PUMJO+4Ͱ͸ʜ w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ class App : RComponent<RProps, RState>() { override fun RBuilder.render() { div("title") { +"Welcome to React with Kotlin" } } }
11. ,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Ϋϥεͷ֦ுؔ਺ʯ
    ͱͯ͠ఆٛ
12. ,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λάΛߏங͢Δ
13. 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Ϋϥεͷ֦ுؔ਺
14. 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ͬΆ͍ݟͨ໨Ͱॻ͚Δ
    ˠ֦ுؔ਺Ͱείʔϓ੍ޚ
15. 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.#VJMEFS
    FYUFOET
    3#VJMEFS
16. ,PUMJO+4Ͱ͸ʜ w 3FBDUͷSFOEFSϝιουΛ,PUMJO+4Ͱॻ͘ͱʜ class App : RComponent<RProps, RState>() { override fun RBuilder.render() { div("title") { +"Welcome to React with Kotlin" } } } ԋࢉࢠΦʔόʔϩʔυ
    ˠʮEJWλάͰจࣈྻΛڬΉʯ
    ˠPQFSBUPS
    GVO
    4USJOHVOBSZ1MVT
    
    
    
    Ͳ͜Ͱ࣮૷͞ΕͯΔͷʁ
17. 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
    ˠϥϜμࣜʹΑΔ
    είʔϓ੍ޚͷ͓͔͛
    ˠԋࢉࢠΦʔόʔϩʔυ
    
    ࠇຐज़
    
    
    
    ࢖͑ΔՕॴΛݶఆɺ෭࡞༻⾪
    
18. ·ͱΊ w ϥϜμࣜɺ֦ுؔ਺ɺԋࢉࢠΦʔόʔϩʔυ౳ͷϞμϯͳจ๏
    w ݴޠͱͯ͠ͷදݱྗ͕ߴ͍
    w είʔϓ੍ޚΛҙࣝ͢Δͱɺීஈݣ͍ͷ࣌ʹ΋׆͔ͤΔ
    w "OESPJE΍αʔόʔαΠυ͔Βˠ෺଍Γͳ͘ͳ͖ͬͯͨΒ,PUMJO+4
19. ,PUMJO+4ͱͷ֨ಆͷه࿥ w ͖͔͚ͬ
    w
    #ʮαʔόʔαΠυ,PUMJO৮Γ͍ͨʔʯˠௐ΂Δ
    w
    #ʮ,PUMJO+4ʜʁɹϑϩϯτ΋,PUMJOͰॻ͚Δͷ͔ʯˠॻ͍ͯΈΔ
20. ,PUMJO+4ͱͷ֨ಆͷه࿥ w ׂͱΠέͨ DSFBUFSFBDULPUMJOBQQ (JUIVC
    w ,PUMJO+4
    
    3FBDUͷ؀ڥΛ
    ༻ҙͯ͘͠ΕΔOQNϞδϡʔϧ
    w $44͔Β)UNM·Ͱશͯ,PUMJOԽͰ͖ͨ
21. ,PUMJOͷ8FCαΠτ
    ࡞Δ͔͠Ͷ͑ʂ ,PUMJOͷ8FCαΠτ࣮࣭ͬͯখௗ͞ΜͩΑͶʜ
    ͦΕ࡞ͬͨΒ๻͸খௗ͞ΜͷੜΈͷ਌ͱݴͬͯ΋աݴͰ͸ͳ͍ͷͰ͸ʜ
22. ,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 ίϨ
23. ,PUMJO+4ͱͷ֨ಆͷه࿥ w EZNBOJDܕ
    ,PUMJOͱ+4ͷϒϦοδʹඞਢͳຐ๏ͷܕ
    w \
    GPP
    bGPP`
    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
24. ,PUMJO+4ͱͷ֨ಆͷه࿥ w +4ϥΠϒϥϦΛ࢖͏ʹ͸ɺEZOBNJDΛΑ͠ͳʹม׵͢ΔΫϥε͕ඞਢʂ
    w
    .BUFSJBM6*ɺίϯϙʔωϯτ͸Ҏ্ɹશͯϥούʔ͕ඞཁ w ϥούʔϥΠϒϥϦӶҙ࡞੒தʂ
    8FMDPNF
    $POUSJCVUFT
    ,PUMJO.BUFSJBM6*
    TVCSPILPUMJONBUFSJBMVJ
    
26. ࠓͳΒԿͯ͠΋΋Εͳ͘ઌۦऀʂ
    ,PUMJO+4͸ָ͍͠ʂ
    ΈΜͳ৮ͬͯར༻࣮ྫ૿͑ͯཉ͍͠ʂ