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

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

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

7c3b3366947123ba6772698b09edf4e2?s=128

subroh_0508

March 19, 2019
Tweet

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.#VJMEFSFYUFOET3#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λάͰจࣈྻΛڬΉʯ ˠPQFSBUPSGVO4USJOHVOBSZ1MVT  Ͳ͜Ͱ࣮૷͞ΕͯΔͷʁ
  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 \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
  24. ,PUMJO+4ͱͷ֨ಆͷه࿥ w +4ϥΠϒϥϦΛ࢖͏ʹ͸ɺEZOBNJDΛΑ͠ͳʹม׵͢ΔΫϥε͕ඞਢʂ w .BUFSJBM6*ɺίϯϙʔωϯτ͸Ҏ্ɹશͯϥούʔ͕ඞཁ w ϥούʔϥΠϒϥϦӶҙ࡞੒தʂ8FMDPNF$POUSJCVUFT ,PUMJO.BUFSJBM6*TVCSPILPUMJONBUFSJBMVJ

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