Upgrade to Pro — share decks privately, control downloads, hide ads and more …

KotlinでReact Native(expo) を使いたい

KotlinでReact Native(expo) を使いたい

Shinnosuke Kugimiya

June 06, 2019
Tweet

More Decks by Shinnosuke Kugimiya

Other Decks in Programming

Transcript

  1. !LHNZTIJO
    %.."OESPJEษڧձ
    ,PUMJOͰ3FBDU/BUJWF FYQP

    Λ࢖͍͍ͨ

    View full-size slide

  2. X
    © DMM.com
    ࣗݾ঺հ

    View full-size slide

  3. X
    © DMM.com
    ࣗݾ঺հ
    w LHNZTIJOఝٶʢ͗͘Έ΍ʣ
    w "OESPJEΤϯδχΞ
    w $50ࣨॴଐ
    w ࠷ۙɺؾ·͙ΕΫοΫʹ͸·ͬͯڕΛ͞͹͖
    ࢝Ί·ͨ͠

    View full-size slide

  4. X
    © DMM.com
    ΰʔϧ

    View full-size slide

  5. X
    © DMM.com
    ΰʔϧ
    w ,PUMJONQQͰFYQP͕࢖͑Δ͜ͱΛ஌ͬͯ΋Β͏
    w FYQPͳͲͷϑϨʔϜϫʔΫΛ࢖͏ͨΊʹɺͲ͏͍͏͜ͱΛ͢Ε͹͍͍ͷ
    ͔Λ஌ͬͯ΋Β͏
    w ଞͷϑϨʔϜϫʔΫΛ࢖͏ͱ͖ͷࢀߟʹͳΔ

    View full-size slide

  6. X
    © DMM.com
    BHFOEB

    View full-size slide

  7. X
    © DMM.com
    BHFOEB
    w ࣗ෼͕,PUMJO.11Λ࢖͏ཧ༝
    w ,PUMJOͰ8FCϑϩϯτΛ։ൃ͢Δͱ͖͸Ͳ͏͢Δ͔ʁ
    w FYQP 3FBDU/BUJWF
    Ͱ΋8FC։ൃͷΑ͏ʹʜ

    View full-size slide

  8. X
    © DMM.com
    ࣗ෼͕,PUMJO.11Λ࢖͏ཧ༝

    View full-size slide

  9. X
    © DMM.com
    ࣗ෼͕,PUMJO.11Λ࢖͏ཧ༝
    w ϞϊϨϙͰ
    ݴޠͰ΍ͬͯΈ͍͔ͨΒ

    View full-size slide

  10. X
    © DMM.com
    ͳͥϞϊϨϙΛࢼ͍ͨ͠ͷ͔
    w ྫ͑͹αʔόʔΤϯδχΞਓɺJ04ΤϯδχΞਓɺ"OESPJEΤϯδχ
    Ξਓɺ8FCϑϩϯτਓͷਓͷνʔϜ͕͋Δͱ͢Δ
    w ྖҬ͝ͱʹϦϙδτϦΛ࡞ΔɻYYYTFSWFS YYYJPT YYYXFC YYY
    BOESPJEͳͲ
    w ͍ͭͷؒʹ͔ɺαʔόʔνʔϜɺJ04νʔϜͳͲͱݺ͹ΕΔʜʢ੹೚ൣ
    ғ͕໌֬ʹ෼͔Εͯ͠·͏ʣ
    w ଞྖҬͷ͜ͱ͸͔͋ͣΓ஌Β͵ʜ
    ͱ͍͏ঢ়گΛճආ͍ͨ͠ʂ

    View full-size slide

  11. X
    © DMM.com
    ͳͥ̍ݴޠͳͷ͔
    w ֤ྖҬ͕͍ͭͷؒʹ͔෼அ͞ΕΔͷΛճආ͢ΔͨΊʹϞϊϨϙ΁ʂ
    w ϓϧϦΫ͕ͨ͘͞ΜདྷΔΑ͏ʹͳ͚ͬͨͲɺීஈ࢖Θͳ͍ݴޠʜίϯς
    ΩετεΠον͕େม
    w ͍ͭͷؒʹ͔ɺଞྖҬͷ13͸ݟͳ͘ͳΔ
    ͱ͍͏ঢ়گΛճආ͍ͨ͠ʂ
    w ʢίϯςΩετεΠονͩΔ͍ʜݩʹ໭͍ͨ͠ʜϞϊϨϙ΍Ί͍ͨʜʣ

    View full-size slide

  12. X
    © DMM.com
    ϞϊϨϙͰݴޠͳΒ͹ʂ
    w ̍ͭͷνʔϜ͕̍ͭͷνʔϜͷ··Ͱ͍ΒΕΔ
    w ଞྖҬͷϨϏϡʔΛ͢Δ࣌ͷίϯςΩετεΠονͷෛՙ͕௿͍
    ͔΋͠Εͳ͍

    View full-size slide

  13. X
    © DMM.com
    ͳͥɺࣗ෼͸,PUMJONQQΛબΜͩͷ͔
    w ਖ਼௚͍͏ͱɺνʔϜͷٕज़ελοΫΛΈͯબ୒͢Δͷ͕Ұ൪
    w ͕ͩɺͦΕͧΕͷಛ௃ΛݟͯΈΑ͏

    View full-size slide

  14. X
    © DMM.com
    ैདྷͷΫϩεϓϥοτϑΥʔϜؔ࿈ٕज़ͷಛ௃
    "OESPJE J04 8FC
    91MBUGPSN'SBNFXPSL
    :PVS$PEF

    View full-size slide

  15. X
    © DMM.com
    ैདྷͷΫϩεϓϥοτϑΥʔϜؔ࿈ٕज़ͷಛ௃
    "OESPJE J04 8FC
    91MBUGPSN'SBNFXPSL
    :PVS$PEF
    w 91MBUGPSN'SBNFXPSLͷ"1*Λ
    ࢖༻͢Δ
    w 91MBUGPSN'SBNFXPSLͷରԠ͢
    ΔϓϥοτϑΥʔϜʹ͸੍ݶ͕
    ͋Δ
    w ݴޠ͸റΒΕΔ

    View full-size slide

  16. X
    © DMM.com
    ,PUMJONQQͷಛ௃
    "OESPJE
    :PVS$PEF
    J04 8FC .BD 8JO -JOVY

    View full-size slide

  17. X
    © DMM.com
    w ֤ϓϥοτϑΥʔϜͷ"1*Λ࢖༻͢
    Δ
    w ରԠϓϥοτϑΥʔϜͷ੍ݶ͸΄ͱ
    ΜͲͳ͍ʢίϯύΠϥτϥϯεύ
    Πϥ͕ͦͦ͜͜༻ҙ͞ΕͯΔͷͰʣ
    w ݴޠ͸,PUMJOʹറΒΕΔ
    "OESPJE
    :PVS$PEF
    J04 8FC .BD 8JO -JOVY
    ,PUMJONQQͷಛ௃

    View full-size slide

  18. X
    © DMM.com
    w ֤ϓϥοτϑΥʔϜͷ"1*Λ࢖༻͢
    Δ࢖༻ͯ͠΋ྑ͍
    w ରԠϓϥοτϑΥʔϜͷ੍ݶ͸΄ͱ
    ΜͲͳ͍ʢίϯύΠϥτϥϯεύ
    Πϥ͕ͦͦ͜͜༻ҙ͞ΕͯΔͷͰʣ
    w ݴޠ͸,PUMJOʹറΒΕΔ
    "OESPJE
    :PVS$PEF
    J04 8FC .BD 8JO -JOVY
    ,PUMJONQQͷಛ௃

    View full-size slide

  19. X
    © DMM.com
    ,PUMJONQQͷಛ௃
    w σεΫτοϓΞϓϦΛ֤04͝ͱʹ࣮૷͢Δͷ͸͠ΜͲ͍͔ΒFMFDUSPO࢖
    ͍͍ͨ
    w 8FC͸3FBDUͰ΍Γ͍ͨ
    w "OESPJE͸ಘҙ͔ͩΒωΠςΟϒͷ··
    w J04͸ͦΜͳʹಘҙ͡Όͳ͍ɻͲͪΒ͔ͱ͍͏ͱ3FBDU/BUJWFͰ΍Γͨ
    ͍
    ,PUMJONQQͳΒ͜Ε͕Ͱ͖Δʂ

    View full-size slide

  20. X
    © DMM.com
    w ֤ϓϥοτϑΥʔϜͷ"1*Λ࢖༻͢
    Δ࢖༻ͯ͠΋ྑ͍
    w ରԠϓϥοτϑΥʔϜͷ੍ݶ͸΄ͱ
    ΜͲͳ͍ʢίϯύΠϥτϥϯεύ
    Πϥʹґଘʣ
    w ݴޠ͸,PUMJOʹറΒΕΔ
    "OESPJE
    :PVS$PEF
    J04 8FC .BD 8JO -JOVY
    ,PUMJONQQͷಛ௃
    &MFDUSPO
    3/

    View full-size slide

  21. X
    © DMM.com
    ˞஫ҙ఺
    w 'SBNFXPSLʹϩοΫΠϯ͞ΕΔ͜ͱ͸ϝϦοτͰ΋͋ΓɺσϝϦοτͰ
    ΋͋Γ·͢
    w ͦͷٯʢ,PUMJONQQʣ΋ɺ·ͨવΓͰ͢
    w τϨʔυΦϑΛߟٕ͑ͯज़બ୒͍͖ͯ͠·͠ΐ͏

    View full-size slide

  22. X
    © DMM.com
    ϝϦοτɾσϝϦοτͷྫ
    91MBUGPSN'SBNFXPSL ,PUMJONQQ
    ϝϦοτ
    w ֶशίετతʹ͸̍ͭͷ'SBNFXPSLͷ"1*Λ஌Δ
    ͚ͩͰྑ͍
    w ͳͲͳͲ
    w ֤ϓϥοτϑΥʔϜʹରͯ͠޷͖ͳ'SBNFXPSL
    Λ࢖༻Ͱ͖Δ
    w 'SBNFXPSL͕ഇΕͨ৔߹ͷμϝʔδ͸௿͍ʢ࡞
    Γํʹ΋ΑΔ͕ʣ
    w ͳͲͳͲ
    σϝϦοτ
    w 'SBNFXPSL͕ഇΕͨ৔߹ͷμϝʔδ͕ਙେ
    w 'SBNFXPSLͷ࠾༻͢ΔݴޠʹϩοΫΠϯ͞ΕΔ
    ʢϝϦοτʹ΋ͳΓ͏Δʣ
    w ͳͲͳͲ
    w ֶशίετ͸બΜͩ'SBNFXPSLɺϓϥοτϑΥ
    ʔϜͷ਺͚ͩ͋Δ
    w ,PUJMOʹϩοΫΠϯ͞ΕΔʢϝϦοτͷਓ΋͍
    Δʣ
    w ͳͲͳͲ

    View full-size slide

  23. X
    © DMM.com
    ͨͩʜ
    "OESPJE
    :PVS$PEF
    J04 8FC .BD 8JO -JOVY
    &MFDUSPO
    3/
    w ຊ౰ʹͰ͖Δͷʜʁʁ
    w ΍ͬͯΔͷݟͨ͜ͱͳ͍͚Ͳʁʁ

    View full-size slide

  24. X
    © DMM.com
    ͨͩʜ
    "OESPJE
    :PVS$PEF
    J04 8FC .BD 8JO -JOVY
    &MFDUSPO
    3/
    w ຊ౰ʹͰ͖Δͷʜʁʁ
    w ΍ͬͯΔͷݟͨ͜ͱͳ͍͚Ͳʁʁ
    ͱ͍͏͜ͱͰࢼͯ͠Έͨʂͱ͍͏ͷ͕ࠓճͷൃදͰ͢ʂ

    View full-size slide

  25. X
    © DMM.com
    ,PUMJOͰ8FCϑϩϯτΛ։ൃ͢Δͱ͖͸
    Ͳ͏͢Δ͔ʁ

    View full-size slide

  26. X
    © DMM.com
    ,PUMJOΛ࢖ͬͯ8FCϑϩϯτΛ։ൃΛ͢Δ࣌
    CVJMEHSBEMF͸͜͏ͳΔ

    View full-size slide

  27. X
    © DMM.com
    ,PUMJOΛ࢖ͬͯ8FC։ൃΛ͢Δ࣌
    plugins {
    id "kotlin2js"
    id "org.jetbrains.kotlin.frontend"
    }
    dependencies {
    implementation “org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
    implementation 'org.jetbrains.kotlinx:kotlinx-html-js:0.6.11'
    implementation 'org.jetbrains:kotlin-react:16.6.0-pre.70-kotlin-1.3.21'

    }
    compileKotlin2Js {

    }
    kotlinFrontend {
    downloadNodeJsVersion = "latest"
    npm {
    dependency "kotlinx-html-js"
    dependency "react"
    dependency "react-dom"

    }
    webpackBundle {
    bundleName = "main"

    }
    }
    CVJMEHSBEMF͸͜͏ͳΔ

    View full-size slide

  28. X
    © DMM.com
    ,PUMJOΛ࢖ͬͯ8FC։ൃΛ͢Δ࣌
    plugins {
    id "kotlin2js"
    id "org.jetbrains.kotlin.frontend"
    }
    dependencies {
    implementation “org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
    implementation 'org.jetbrains.kotlinx:kotlinx-html-js:0.6.11'
    implementation 'org.jetbrains:kotlin-react:16.6.0-pre.70-kotlin-1.3.21'

    }
    compileKotlin2Js {

    }
    kotlinFrontend {
    downloadNodeJsVersion = "latest"
    npm {
    dependency "kotlinx-html-js"
    dependency "react"
    dependency "react-dom"

    }
    webpackBundle {
    bundleName = "main"

    }
    }
    CVJMEHSBEMF͸͜͏ͳΔ

    View full-size slide

  29. X
    © DMM.com
    ,PUMJOΛ࢖ͬͯ8FC։ൃΛ͢Δ࣌
    plugins {
    id "kotlin2js"
    id "org.jetbrains.kotlin.frontend"
    }
    dependencies {
    implementation “org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
    implementation 'org.jetbrains.kotlinx:kotlinx-html-js:0.6.11'
    implementation 'org.jetbrains:kotlin-react:16.6.0-pre.70-kotlin-1.3.21'

    }
    compileKotlin2Js {

    }
    kotlinFrontend {
    downloadNodeJsVersion = "latest"
    npm {
    dependency "kotlinx-html-js"
    dependency "react"
    dependency "react-dom"

    }
    webpackBundle {
    bundleName = "main"

    }
    }
    CVJMEHSBEMF͸͜͏ͳΔ

    View full-size slide

  30. X
    © DMM.com
    ,PUMJOΛ࢖ͬͯ8FC։ൃΛ͢Δ࣌
    plugins {
    id "kotlin2js"
    id "org.jetbrains.kotlin.frontend"
    }
    dependencies {
    implementation “org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
    implementation 'org.jetbrains.kotlinx:kotlinx-html-js:0.6.11'
    implementation 'org.jetbrains:kotlin-react:16.6.0-pre.70-kotlin-1.3.21'

    }
    compileKotlin2Js {

    }
    kotlinFrontend {
    downloadNodeJsVersion = "latest"
    npm {
    dependency "kotlinx-html-js"
    dependency "react"
    dependency "react-dom"

    }
    webpackBundle {
    bundleName = "main"

    }
    }
    CVJMEHSBEMF͸͜͏ͳΔ

    View full-size slide

  31. X
    © DMM.com
    ,PUMJOΛ࢖ͬͯ8FC։ൃΛ͢Δ࣌
    plugins {
    id "kotlin2js"
    id "org.jetbrains.kotlin.frontend"
    }
    dependencies {
    implementation “org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
    implementation 'org.jetbrains.kotlinx:kotlinx-html-js:0.6.11'
    implementation 'org.jetbrains:kotlin-react:16.6.0-pre.70-kotlin-1.3.21'

    }
    compileKotlin2Js {

    }
    kotlinFrontend {
    downloadNodeJsVersion = "latest"
    npm {
    dependency "kotlinx-html-js"
    dependency "react"
    dependency "react-dom"

    }
    webpackBundle {
    bundleName = "main"

    }
    }
    CVJMEHSBEMF͸͜͏ͳΔ

    View full-size slide

  32. X
    © DMM.com
    ࣮ࡍͷίʔυྫ
    ίʔυ͸͜͏ͳΔ

    View full-size slide

  33. X
    © DMM.com
    ࣮ࡍͷίʔυྫ
    ίʔυ͸͜͏ͳΔ
    fun main() {
    document.addEventListener("DOMContentLoaded", {
    render(document.getElementById("root")) {
    a {
    +"Hello"
    }
    }
    })
    }
    NBJOLU

    View full-size slide

  34. X
    © DMM.com
    ࣮ࡍͷίʔυྫ
    ίʔυ͸͜͏ͳΔ
    fun main() {
    document.addEventListener("DOMContentLoaded", {
    render(document.getElementById("root")) {
    a {
    +"Hello"
    }
    }
    })
    }











    NBJOLU
    JOEFYIUNM

    View full-size slide

  35. X
    © DMM.com
    ࣮ࡍͷίʔυྫ
    ίʔυ͸͜͏ͳΔ
    fun main() {
    document.addEventListener("DOMContentLoaded", {
    render(document.getElementById("root")) {
    a {
    +"Hello"
    }
    }
    })
    }











    NBJOLU
    JOEFYIUNM
    ͜ΕͰ3VO͢Ε͹ɺϒϥ΢β͕։͍ͯ8FC͕ಈ͘

    View full-size slide

  36. X
    © DMM.com
    Ͳ͏͍͏࢓૊ΈͰಈ͍͍ͯΔͷ͔ʁ

    View full-size slide

  37. X
    © DMM.com
    Ͳ͏͍͏࢓૊ΈͰಈ͍͍ͯΔͷ͔ʁ
    w ,PUMJOKT
    w KTʹτϥϯεύΠϧ͞ΕͯɺXFCϑϩϯτ͕ಈ͘·Ͱ

    View full-size slide

  38. X
    © DMM.com
    ,PUMJOKT
    ͜͏͍͏ؔ਺͕͋ͬͨΒ

    View full-size slide

  39. X
    © DMM.com
    ,PUMJOKT
    ͜͏͍͏ؔ਺͕͋ͬͨΒ
    @file:JsModule("react")
    package react
    external fun isValidElement(element: Any): Boolean
    ͜͏ॻ͚ͩ͘

    View full-size slide

  40. X
    © DMM.com
    ,PUMJOKT
    ͜͏͍͏ؔ਺͕͋ͬͨΒ
    @file:JsModule("react")
    package react
    external fun isValidElement(element: Any): Boolean
    ͜͏ॻ͚ͩ͘
    ͜Ε͚ͩͰɺ,PUMJOͰ࢖͑Δ

    View full-size slide

  41. X
    © DMM.com
    Ͳ͏͍͏࢓૊ΈͰಈ͍͍ͯΔͷ͔ʁ
    τϥϯεύΠϧͯ͠,PUMJO͔ΒKT͕Ͱ͖Δ
    QBDLBHFKTPO࡞੒
    KBS͔ΒVOQBDL
    OQNJOTUBMM
    EFWTFSWFSىಈ
    3VO͢Δ·Ͱͷɺେ·͔ͳखॱ͸͜͏ͳͬͯΔ
    ʢҰ෦୺ંͬͯΔͱ͜Ζ΋͋Γ·͢ʣ

    View full-size slide

  42. X
    © DMM.com
    τϥϯεύΠϧͯ͠,PUMJO͔ΒKT͕Ͱ͖Δ
    LU
    KT
    LPUMJOKT
    CVJMEKT഑Լʹੜ੒͞ΕΔ

    View full-size slide

  43. X
    © DMM.com
    plugins {
    id "kotlin2js"
    id "org.jetbrains.kotlin.frontend"
    }

    kotlinFrontend {
    downloadNodeJsVersion = "latest"
    npm {
    dependency "kotlinx-html-js"
    dependency "react"
    dependency "react-dom"

    }
    webpackBundle {
    bundleName = "main"

    }
    }
    QBDLBHFKTPO࡞੒
    QBDLBHFKTPO
    CVJME഑Լʹੜ੒͞ΕΔ

    View full-size slide

  44. X
    © DMM.com
    KBS͔ΒVOQBDLᶃ
    CVJMEOPEF@NPEVMFT@JNQPSUFE
    KT
    LKTN
    KBS
    KT
    LKTN
    KBS
    KT
    LKTN
    KBS
    KT
    LKTN
    QBDLBHFKTPO
    KT
    LKTN
    QBDLBHFKTPO
    KT
    LKTN
    QBDLBHFKTPO
    KBS͔Βநग़

    View full-size slide

  45. X
    © DMM.com
    KBS͔ΒVOQBDLᶄ
    CVJMEOPEF@NPEVMFT
    KT
    LKTN
    QBDLBHFKTPO
    KT
    LKTN
    QBDLBHFKTPO
    KT
    LKTN
    QBDLBHFKTPO
    γϯϘϦοΫϦϯΫ࡞੒
    CVJMEOPEF@NPEVMFT@JNQPSUFE
    KT
    LKTN
    QBDLBHFKTPO
    KT
    LKTN
    QBDLBHFKTPO
    KT
    LKTN
    QBDLBHFKTPO

    View full-size slide

  46. X
    © DMM.com
    OQNJOTUBMM
    CVJMEOPEF@NPEVMFT
    KT LKTN
    QBDLBHFKTPO
    OQNJOTUBMM
    KT LKTN
    QBDLBHFKTPO
    KT LKTN
    QBDLBHFKTPO

    View full-size slide

  47. X
    © DMM.com
    OQNJOTUBMM
    CVJMEOPEF@NPEVMFT
    KT LKTN
    QBDLBHFKTPO
    OQNJOTUBMM
    KT LKTN
    QBDLBHFKTPO
    KT LKTN
    QBDLBHFKTPO
    KT
    QBDLBHFKTPO
    KT
    QBDLBHFKTPO
    KT
    QBDLBHFKTPO
    ʜ

    View full-size slide

  48. X
    © DMM.com
    EFWTFSWFSىಈ
    XFCQBDLEFWTFSWFSSVOKT
    CVJME഑Լʹੜ੒࣮ͯ͠ߦ
    ࣮ߦ
    ϒϥ΢β

    View full-size slide

  49. X
    © DMM.com
    Ͳ͏͍͏࢓૊ΈͰಈ͍͍ͯΔͷ͔ʁ
    τϥϯεύΠϧͯ͠,PUMJO͔ΒKT͕Ͱ͖Δ
    QBDLBHFKTPO࡞੒
    KBS͔ΒVOQBDL
    OQNJOTUBMM
    EFWTFSWFSىಈ
    3VO͢Δ·Ͱͷɺେ·͔ͳखॱ͸͜͏ͳͬͯΔ
    ʢҰ෦୺ંͬͯΔͱ͜Ζ΋͋Γ·͢ʣ

    View full-size slide

  50. X
    © DMM.com
    Ͳ͏͍͏࢓૊ΈͰಈ͍͍ͯΔͷ͔ʁ
    τϥϯεύΠϧͯ͠,PUMJO͔ΒKT͕Ͱ͖Δ
    QBDLBHFKTPO࡞੒
    KBS͔ΒVOQBDL
    OQNJOTUBMM
    EFWTFSWFSىಈ
    3VO͢Δ·Ͱͷɺେ·͔ͳखॱ͸͜͏ͳͬͯΔ
    ʢҰ෦୺ંͬͯΔͱ͜Ζ΋͋Γ·͢ʣ
    LPUMJOKT
    LPUMJOGSPOUFOEQMVHJO

    View full-size slide

  51. X
    © DMM.com
    FYQPͰ΋
    8FC։ൃͷΑ͏ʹʜ

    View full-size slide

  52. X
    © DMM.com
    LPUMJOΛ࢖Θͳ͍৔߹ͷී௨ͷFYQP։ൃ
    FYQPJOJUNZOFXQSPKFDU
    "QQKTͳͲΛमਖ਼
    FYQPTUBSU
    3VO͢Δ·Ͱͷɺେ·͔ͳखॱ
    ʢҰ෦୺ંͬͯΔͱ͜Ζ΋͋Γ·͢ʣ

    View full-size slide

  53. X
    © DMM.com
    LPUMJOΛ࢖Θͳ͍৔߹ͷී௨ͷFYQP։ൃ
    FYQPJOJUNZOFXQSPKFDU
    "QQKTͳͲΛमਖ਼
    FYQPTUBSU
    3VO͢Δ·Ͱͷɺେ·͔ͳखॱ
    ʢҰ෦୺ંͬͯΔͱ͜Ζ΋͋Γ·͢ʣ

    View full-size slide

  54. X
    © DMM.com
    LPUMJOΛ࢖Θͳ͍৔߹ͷී௨ͷFYQP։ൃ
    QBDLBHFKTPOΛੜ੒
    OQNJOTUBMM
    BQQKTPOͳͲॾʑඞཁͳϑΝΠϧੜ੒
    "QQKTͳͲΛमਖ਼
    FYQPTUBSU
    3VO͢Δ·Ͱͷɺେ·͔ͳखॱ
    ʢҰ෦୺ંͬͯΔͱ͜Ζ΋͋Γ·͢ʣ

    View full-size slide

  55. X
    © DMM.com
    LPUMJOΛ࢖Θͳ͍৔߹ͷී௨ͷFYQP։ൃ
    QBDLBHFKTPOΛੜ੒
    OQNJOTUBMM
    BQQKTPOͳͲॾʑඞཁͳϑΝΠϧੜ੒
    "QQKTͳͲΛमਖ਼
    FYQPTUBSU
    3VO͢Δ·Ͱͷɺେ·͔ͳखॱ
    ʢҰ෦୺ંͬͯΔͱ͜Ζ΋͋Γ·͢ʣ
    LPUMJOKTͱ
    LPUMJOGSPOUFOEQMVHJO͕
    ΍͍ͬͯΔ͜ͱͱࣅ͍ͯΔ

    View full-size slide

  56. X
    © DMM.com
    ·ͣ͸FYQPͷ"1*Λ࢖͑ΔΑ͏ʹXSBQQFSΛ࡞Δ
    @file:JsModule("expo")
    package expo
    import react.Component
    external fun > registerRootComponent(component: JsClass)
    FYQPϞδϡʔϧΛ࡞੒

    View full-size slide

  57. X
    © DMM.com
    ࣍ʹLPUMJOGSPOUFOEQMVHJOͷΑ͏ͳ
    HSBMEFQMVHJOΛੜ੒͢Δ

    View full-size slide

  58. X
    © DMM.com
    ,PUMJONQQ৔߹ͷී௨ͷFYQP։ൃ
    τϥϯεύΠϧͯ͠,PUMJO͔ΒKT͕Ͱ͖Δ
    QBDLBHFKTPOΛੜ੒
    KBS͔ΒVOQBDL
    OQNJOTUBMM
    BQQKTPOͳͲॾʑඞཁͳϑΝΠϧੜ੒
    "QQKTʹSFOBNF
    FYQPTUBSU
    ͜͏͍͏λεΫΛ࣮૷ͯ͠ߦ͘
    ʢҰ෦୺ંͬͯΔͱ͜Ζ΋͋Γ·͢ʣ
    LPUMJOKT
    LPUMJOFYQPQMVHJO

    View full-size slide

  59. X
    © DMM.com
    τϥϯεύΠϧͯ͠,PUMJO͔ΒKT͕Ͱ͖Δ
    LU
    KT
    LPUMJOKT
    CVJMEKT഑Լʹੜ੒͞ΕΔ

    View full-size slide

  60. X
    © DMM.com
    plugins {
    id "kotlin2js"
    id "org.jetbrains.kotlin.frontend"
    }

    kotlinExpo {
    npm {
    dependency "kotlinx-html-js"
    dependency "kotlin-expo"
    dependency "kotlinx-html-js"
    dependency "react"
    dependency "react-dom"
    dependency "react-redux"
    dependency "react-router-dom"
    }
    }
    QBDLBHFKTPO࡞੒
    QBDLBHFKTPO
    CVJMEFYQP഑Լʹੜ੒͞ΕΔ
    https://github.com/kgmyshin/kotlin-expo-sample/blob/master/kotlin-expo-gradle-plugin/src/main/kotlin/com/kgmyshin/kotlin/expo/tasks/GeneratePackageJsonTask.kt

    View full-size slide

  61. X
    © DMM.com
    KBS͔ΒVOQBDLᶃ
    CVJMEFYQPOPEF@NPEVMFT@JNQPSUFE
    KT
    LKTN
    KBS
    KT
    LKTN
    KBS
    KT
    LKTN
    KBS
    KT
    LKTN
    QBDLBHFKTPO
    KT
    LKTN
    QBDLBHFKTPO
    KT
    LKTN
    QBDLBHFKTPO
    KBS͔Βநग़
    https://github.com/kgmyshin/kotlin-expo-sample/blob/master/kotlin-expo-gradle-plugin/src/main/kotlin/com/kgmyshin/kotlin/expo/tasks/UnpackGradleDependenciesTask.kt

    View full-size slide

  62. X
    © DMM.com
    KBS͔ΒVOQBDLᶄ
    CVJMEFYQPOPEF@NPEVMFT
    KT
    LKTN
    QBDLBHFKTPO
    KT
    LKTN
    QBDLBHFKTPO
    KT
    LKTN
    QBDLBHFKTPO
    γϯϘϦοΫϦϯΫ࡞੒
    CVJMEFYQPOPEF@NPEVMFT@JNQPSUFE
    KT
    LKTN
    QBDLBHFKTPO
    KT
    LKTN
    QBDLBHFKTPO
    KT
    LKTN
    QBDLBHFKTPO
    https://github.com/kgmyshin/kotlin-expo-sample/blob/master/kotlin-expo-gradle-plugin/src/main/kotlin/com/kgmyshin/kotlin/expo/tasks/UnpackGradleDependenciesTask.kt

    View full-size slide

  63. X
    © DMM.com
    OQNJOTUBMM
    CVJMEFYQPOPEF@NPEVMFT
    KT LKTN
    QBDLBHFKTPO
    OQNJOTUBMM
    KT LKTN
    QBDLBHFKTPO
    KT LKTN
    QBDLBHFKTPO
    https://github.com/kgmyshin/kotlin-expo-sample/blob/master/kotlin-expo-gradle-plugin/src/main/kotlin/com/kgmyshin/kotlin/expo/tasks/NpmInstallTask.kt

    View full-size slide

  64. X
    © DMM.com
    OQNJOTUBMM
    CVJMEFYQPOPEF@NPEVMFT
    KT LKTN
    QBDLBHFKTPO
    OQNJOTUBMM
    KT LKTN
    QBDLBHFKTPO
    KT LKTN
    QBDLBHFKTPO
    KT
    QBDLBHFKTPO
    KT
    QBDLBHFKTPO
    KT
    QBDLBHFKTPO
    ʜ
    https://github.com/kgmyshin/kotlin-expo-sample/blob/master/kotlin-expo-gradle-plugin/src/main/kotlin/com/kgmyshin/kotlin/expo/tasks/NpmInstallTask.kt

    View full-size slide

  65. X
    © DMM.com
    BQQKTPO࡞੒
    BQQKTPO
    CVJMEFYQP഑Լʹੜ੒͞ΕΔ
    BQQKTPOͳͲΛੜ੒

    View full-size slide

  66. X
    © DMM.com
    "QQKTʹSFOBNF
    "QQKT
    CVJMEKT഑Լʹੜ੒͞ΕͨKT
    KT
    CVJMEFYQP഑ԼʹNPWF
    NPWF
    https://github.com/kgmyshin/kotlin-expo-sample/blob/master/kotlin-expo-gradle-plugin/src/main/kotlin/com/kgmyshin/kotlin/expo/tasks/BuildTask.kt

    View full-size slide

  67. X
    © DMM.com
    ىಈʢJ04ͷ৔߹ʣ
    CVJMEFYQPͰԼهΛ࣮ߦ
    OPEF@NPEVMFTCJOFYQPTUBSUJPT
    ࣮ߦ
    J04ΞϓϦ͕ىಈ
    https://github.com/kgmyshin/kotlin-expo-sample/blob/master/kotlin-expo-gradle-plugin/src/main/kotlin/com/kgmyshin/kotlin/expo/tasks/RunIOSExpoTask.kt

    View full-size slide

  68. X
    © DMM.com
    ىಈʢ"OESPJEͷ৔߹ʣ
    CVJMEFYQPͰԼهΛ࣮ߦ
    OPEF@NPEVMFTCJOFYQPTUBSUŠBOESPJE
    ࣮ߦ
    "OESPJEΞϓϦ͕ىಈ
    https://github.com/kgmyshin/kotlin-expo-sample/blob/master/kotlin-expo-gradle-plugin/src/main/kotlin/com/kgmyshin/kotlin/expo/tasks/RunAndroidExpoTask.kt

    View full-size slide

  69. X
    © DMM.com
    ·ͱΊ

    View full-size slide

  70. X
    © DMM.com
    ͨͩʜ
    "OESPJE
    :PVS$PEF
    J04 8FC .BD 8JO -JOVY
    &MFDUSPO
    3/
    w ຊ౰ʹͰ͖Δͷʜʁʁ
    w ΍ͬͯΔͷΈͨ͜ͱͳ͍͚Ͳʁʁ

    View full-size slide

  71. X
    © DMM.com
    ͨͩʜ
    "OESPJE
    :PVS$PEF
    J04 8FC .BD 8JO -JOVY
    &MFDUSPO
    3/
    w ຊ౰ʹͰ͖Δͷʜʁʁ
    w ΍ͬͯΔͷΈͨ͜ͱͳ͍͚Ͳʁʁ
    Ͱ͖ΔΑʂ

    View full-size slide