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

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
    

25. None

26. ࠓͳΒԿͯ͠΋΋Εͳ͘ઌۦऀʂ
    ,PUMJO+4͸ָ͍͠ʂ
    ΈΜͳ৮ͬͯར༻࣮ྫ૿͑ͯཉ͍͠ʂ