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

!LHNZTIJO %.."OESPJEษڧձ ,PUMJOͰ3FBDU/BUJWF FYQP Λ࢖͍͍ͨ

X © DMM.com ࣗݾ঺հ

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

X © DMM.com ΰʔϧ

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

X © DMM.com BHFOEB

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 ͳͲͳͲ

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

-JOVY &MFDUSPO 3/ w ຊ౰ʹͰ͖Δͷʜʁʁ w ΍ͬͯΔͷݟͨ͜ͱͳ͍͚Ͳʁʁ ͱ͍͏͜ͱͰࢼͯ͠Έͨʂͱ͍͏ͷ͕ࠓճͷൃදͰ͢ʂ

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

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

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͸͜͏ͳΔ

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

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

render(document.getElementById("root")) { a { +"Hello" } } }) } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" language="JavaScript" src=“main.bundle.js"></script> … </head> <body> <div id="root"></div> </body> </html> NBJOLU JOEFYIUNM

render(document.getElementById("root")) { a { +"Hello" } } }) } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" language="JavaScript" src=“main.bundle.js"></script> … </head> <body> <div id="root"></div> </body> </html> NBJOLU JOEFYIUNM ͜ΕͰ3VO͢Ε͹ɺϒϥ΢β͕։͍ͯ8FC͕ಈ͘

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

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

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

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

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

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

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

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഑Լʹੜ੒͞ΕΔ

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͔Βநग़

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

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

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

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

OQNJOTUBMM EFWTFSWFSىಈ 3VO͢Δ·Ͱͷɺେ·͔ͳखॱ͸͜͏ͳͬͯΔ ʢҰ෦୺ંͬͯΔͱ͜Ζ΋͋Γ·͢ʣ

OQNJOTUBMM EFWTFSWFSىಈ 3VO͢Δ·Ͱͷɺେ·͔ͳखॱ͸͜͏ͳͬͯΔ ʢҰ෦୺ંͬͯΔͱ͜Ζ΋͋Γ·͢ʣ LPUMJOKT LPUMJOGSPOUFOEQMVHJO

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

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

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

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

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

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

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

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

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

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

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

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

-JOVY &MFDUSPO 3/ w ຊ౰ʹͰ͖Δͷʜʁʁ w ΍ͬͯΔͷΈͨ͜ͱͳ͍͚Ͳʁʁ

-JOVY &MFDUSPO 3/ w ຊ౰ʹͰ͖Δͷʜʁʁ w ΍ͬͯΔͷΈͨ͜ͱͳ͍͚Ͳʁʁ Ͱ͖ΔΑʂ

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

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

More Decks by Shinnosuke Kugimiya

Other Decks in Programming

Featured

Transcript