ハイブリッドなReact NativeアプリをKotlin MPPでチョット良くする

ハイブリッドなReact NativeアプリをKotlin MPPでチョット良くする

集まれKotlin好き!Kotlin愛好会 vol.21のLT資料です

https://love-kotlin.connpass.com/event/173821/
識別番号44(開発中のMastodonクライアント): https://github.com/subroh0508/ID44

7c3b3366947123ba6772698b09edf4e2?s=128

subroh_0508

April 28, 2020
Tweet

Transcript

  1. ϋΠϒϦουͳ3FBDU/BUJWFΞϓϦΛ ,PUMJO.11ͰŧŔŕŪྑ͘͢Δ ,PUMJOѪ޷ձWPM ʹ͜͠Γ͞ͿΖʙ!TVCSPI@

  2. "CPVU.F ʹ͜͠Γ͞ͿΖʙ ✦౦ژ౎ɾҏ౾େౡग़਎ ✦גࣜձࣾ#FBS5BJM ‣ "OESPJEΤϯδχΞ ,PUMJO+BWB ˑ ‣ 8FCΤϯδχΞ

    3BJMT3FBDU ݄ʹొஃ༧ఆͩͬͨTIJCVZBBQLͷڙཆొஃͰ͢
  3. 1SPMPHVF 3FBDU/BUJWFͰ "OESPJEΞϓϦ࡞͍ͬͯΔਓʔʂ

  4. 1SPMPHVF 3FBDU/BUJWF /BUJWF.PEVMFͰ "OESPJEΞϓϦ࡞͍ͬͯΔਓʔʂ ˠϋΠϒϦοτߏ੒

  5. "HFOEB ˑ3FBDU/BUJWF ,PUMJO.11ͰϩδοΫͱ6*ͷ׬શͳڞ௨ԽΛເʹ ɹϚϧνϓϥοτϑΥʔϜରԠͷΞϓϦΛ։ൃத ˠ3FBDU/BUJWF ,PUMJO.11PO"OESPJEͷσʔλΫϥεڞ௨Խͷ஌ݟ ˠʮએݴత6*ͳΒ+FUQBDL$PNQPTFͰʜʯ͸͜ͷ෼͚ͩ ๻΋ۀ຿Ͱ͸3FBDU/BUJWF৮ͬͯͳ͍ͬ͢

  6. 3FBDU/BUJWF /BUJWF.PEVMF 3FBDU/BUJWF w +BWB4DSJQU 3FBDUKTͰ/BUJWFϞόΠϧΞϓϦΛ࡞ΕΔϑϨʔϜϫʔΫ w ωΠςΟϒίʔυͰ࣮૷͞ΕͨϞδϡʔϧ΋ݺͼग़͠Մೳʂ w "OESPJE,PUMJO+BWBɹɹJ044XJGU0CKFDUJWF$

    w ϋΠϒϦουʹ͢ΔͱԿ͕خ͍͔͠ˠলུ w ࢀߟʮ3FBDU/BUJWFͱ&YQPΛ༻͍ͨΫϩεϓϥοτϑΥʔϜ։ൃೖ໳ʯ !%SPJE,BJHJ%BZ ผ్Ϋϥεఆ͕ٛඞཁ
  7. ྫ 5PBTUͷදࣔ<,PUMJO> w class ToastModule( context: ReactApplicationContext ) : ReactContextBaseJavaModule(context)

    { override fun getName() = "ToastExample" @ReactMethod fun show(message: String) { Toast.makeText( reactApplicationContext, message, Toast.LENGTH_SHORT ).show() } } 3FBDU$POUFYU#BTF+BWB.PEVMFΛ ܧঝ HFU/BNF ϝιουΛ ΦʔόʔϥΠυ !3FBDU.FUIPEΛ͚ͭͨ ϝιουʹ࣮ߦ͍ͨ͠ॲཧΛهड़
  8. ྫ 5PBTUͷදࣔ<+BWBTDSJQU> w // ToastExample.js import { NativeModules } from

    'react-native'; module.exports = NativeModules.ToastExample; // app.js import { ToastExample } from './ToastExample'; ToastExample.show('In The Name Of。 ...LOVE?'); HFU/BNF Ͱࢦఆͨ͠ ໊લͰΞΫηεͰ͖Δ !3FBDU.FUIPEΛ͚ͭͨ ϝιουΛ+4͔Βݺ΂Δ ͔͠͠େ͖ͳ໰୊͕ʜ ɾТɾʆ ˞1SPNJTFΛ࢖͑͹ ɹඇಉظॲཧʹ΋ରԠ
  9. ໰୊!3FBDU.FUIPEͷϝιουʹ౉ͤΔҾ਺ʹ੍ݶ͕͋Δʂ w ˑϓϦϛςΟϒܕ ˑ.BQ ˑ"SSBZ ˑEBUBDMBTTΛ౉͍ͨ͠ʂ ˠ.BQʹม׵ ˠ+40/ 4USJOH ʹม׵

    ˠ+4ͰͷσγϦΞϥΠζ࣌ ৘ใͷܽམ͕ൃੜ͢Δʂ
  10. ྫ "1*Ϩεϙϯεͷ੒൱ͱϝοηʔδจࣈྻΛ࣋ͭEBUBDMBTT w data class Response( val isSuccessful: Boolean, val

    successMessage: String, val errorMessage: String ) { fun message() = if (isSuccessful) successMessage else errorMessage fun toMap(): ReadableMap = ... } @ReactMethod fun fetch(promise: Promise) { val res: Response = client.get(...) promise.resolve(res.toMap()) } 3FTQPOTFܕͷ஋Λ ඇಉظతʹฦ͢ϝιου JT4VDDFTTGVMʹΑͬͯ ฦΓ஋͕มΘΔNFTTBHFϝιου
  11. ྫ GFUDIϝιουΛ+4͔Βݺͼग़͢ͱʜ w import { FetchExample } from './FetchExample'; const

    res = await FetchExample.fetch(); console.log(res); // -> { // isSuccessful: true, // successMessage: 'Success :)', // errorMessage: 'Error :(' // } SFT͸ͨͩͷ+4ͷ0CKFDU NFTTBHFϝιου͕ݺ΂ͳ͍ʂ ˠ,PUMJOͰ࣮૷ͨ͠ϩδοΫΛ ɹ΋͏Ұ౓+4Ͱॻ͘ͷ͸ආ͚͍ͨʜ ͍͍ղܾ๏ɺ͋ΔΜ΍Ͱʜ
  12. 4PMVUJPO ,PUMJO.11 LPUMJOYTFSJBMJ[FSͰղܾʂ w EBUBDMBTTΛDPNNPO.BJOσΟϨΫτϦҎԼʹ഑ஔ ˠ+7.ɾ+4޲͚ʹϏϧυ ˠ/BUJWF.PEVMFͱ3FBDUͷ྆ํͰEBUBDMBTTΛѻ͑ΔΑ͏ʹʂ w LPUMJOYTFSJBMJ[FSΛ࢖ͬͯγϦΞϥΠζɾσγϦΞϥΠζ ˠ,PUMJO.11ରԠͷγϦΞϥΠζϥΠϒϥϦ

    ˠ+40/ม׵PS.BQม׵ .BQQFSNBQ  .BQQFSVNNBQ  ࢀߟIUUQTHJUIVCDPN,PUMJOLPUMJOYTFSJBMJ[BUJPOCMPCNBTUFSEPDTSVOUJNF@VTBHFNENBQQFS
  13. 4PMVUJPO ࣮ࡍʹ࢖͍ͬͯΔՕॴ +4 /BUJWF.PEVMF͔Β΍͖ͬͯͨ஋Λ LPUMJOYTFSJBMJ[BUJPOͰσγϦΞϥΠζ ,PUMJOͰఆٛͨ͠$VTUPN(FUUFSΛ 3FBDUͰݺͼग़͠

  14. $PODMVTJPO w 3FBDU/BUJWF /BUJWF.PEVMFͳΞϓϦΛ,PUMJO.11ͰŧŔŕŪྑͨ͘͠ w ʮσʔλΫϥεͷڞ௨ԽʯʮϩδοΫͷڞ௨ԽʯͷԸܙΛ࣮ײ͠΍͍͢ w ,PUMJOͷ๛෋ͳදݱྗΛ+4ͷੈքʹ࣋ͪࠐΉ͜ͱ͕Ͱ͖Δʂ w ݱঢ়ɺ༗༻ੑ͕ݟ͑ͨͷ͸"OESPJEͷΈ

    J048FCͷݕূ͸͜Ε͔Β  w ϋΠϒϦουߏ੒ΞϓϦͰ೰ΜͰ͍Δਓͷॿ͚ʹʜͳΔͱ͍͍ͳʜ ˠ,PUMJO.11͕໨ࢦ͢ੈք؍
  15. $. ˑ3FBDU/BUJWF ,PUMJO.11ͰϩδοΫͱ6*ͷ׬શͳڞ௨ԽΛເʹ ɹϚϧνϓϥοτϑΥʔϜରԠͷ.BTUPEPOΫϥΠΞϯτΞϓϦΛ։ൃதʂ (JU)VCIUUQTHJUIVCDPNTVCSPI*% ϓϥοτϑΥʔϜ ༧ఆ "OESPJEJ04&MFDUSPO ϋΠϒϦοτߏ੒ͷࢀߟʹʂ ஌ݟ͋Δํ͔Βͷποίϛ׻ܴʂ

    5IBOLGPSMJTUFOJOH