Vanilla JavaScript はマルチプラットフォームの夢を見るか

YUMEMI.grow Mobile #13
https://yumemi.connpass.com/event/317381/

Transcript

1. 7BOJMMB
   +BWB4DSJQU
   ͸
   ϚϧνϓϥοτϑΥʔϜͷເΛݟΔ͔ ߐຊޫ੖ :6.&.*HSPX
   .PCJMF
   
    1
2. ࣗݾ঺հ w ͑΋ͱΈͭ͸Δ
   w גࣜձࣾΏΊΈ
   
   J04ςοΫϦʔυ
   w ٕज़ಉਓࢽʮΏΊΈେٕྛ
   `ʯʹهࣄΛدߘ͠·ͨ͠
   w 
   ٕॻതʢऴྃʣɺ
   ٕज़ॻయͰ഑෍͠·͢
   w ిࢠ൛΋͋Γ·͢ 2
3. +BWB4DSJQU
   .VMUJ1MBUGPSN
   ͷ௅ઓ w ྲྀߦΓͷ
   ,.1
   Λ࢝Ίͱͨ͠ϚϧνϓϥοτϑΥʔϜ։ൃ
   w J04
   
   "OESPJE
   ͷ྆ํͰ࢖͑Δݴޠ
   $
   ΍
   +BWB4DSJQU
   ͕͋Δ
   w ࠓճ͸
   J04
   Ͱ
   +BWB4DSJQU
   ͸ຊ౰ʹಋೖͰ͖Δͷ͔ʁ
   w ࢖͍ͪ͝͝͸Ͳ͏ͳͷ͔ʁΛௐ΂·ͨ͠ දهͷ஫ҙ
   w +BWB4DSJQU
   
   +4
   w ύοέʔδ
   
   ϥΠϒϥϦ 3
4. +4ϥΠϒϥϦͷ४උ w +4
   ϥΠϒϥϦ͸؅ཧπʔϧ
   OQN
   ͔Β௥Ճ͢Δ͜ͱ͕Ͱ͖·͢
   w IUUQTXXXOQNKTDPN
   w ࢲ͸
   ZBSO
   ࢖͍ͳͷͰɺ࣍ͷΑ͏ͳײ͡Ͱ४උ͠·ͨ͠ cd js-packages yarn init yarn add hoge 4
5. +4ؔ਺ͷ࣮ߦ w +4$POUFYU
   Ͱ
   KT
   ϑΝ ΠϧΛಡΈࠐΉ
   w ؔ਺໊Λࢦఆͯ͠ɺؔ ਺Λऔಘ࣮ͯ͠ߦ͢Δ
   w ؔ਺͓Αͼ໭Γ஋͸
   +47BMVF
   ͱ͍͏ܕͰ ѻ͏ import JavaScriptCore guard let path = Bundle.main.path(forResource: "bundle", ofType: "js"), let contents = try? String(contentsOfFile: path) else { return } let context: JSContext = JSContext(virtualMachine: JSVirtualMachine()) context.evaluateScript(contents) guard let function = context.objectForKeyedSubscript(name: "func_name") else { return } let arguments = ؔ਺ͷҾ਺ʢจࣈɺ਺ࣈɺ഑ྻͳͲ [Any] ͷܕʣ let result = function.call(withArguments: [arguments]) return result 5
6. ΤϥʔϋϯυϦϯά w +4
   ϑΝΠϧͷಡΈࠐΈ΍ؔ਺࣮ߦͷΤϥʔ͸εϩʔ͞Εͳ͍
   w +4$POUFYU
   ͷΤϥʔϋϯυϦϯάؔ਺ΛཔΓʹݪҼΛ௥ٻͯ͠मਖ਼͢Δ
   w ஍ຯ͕ͩɺͱͯ΋ॏཁͳϝιουͰ͢ context.exceptionHandler = { context, error in guard let error = error, let message = error.toString() else { return } print("JSContext#exceptionHandler Error: \(message)") } 6
7. +4ϑΝΠϧͱJ04ϓϩδΣΫτ w +4
   Ͱ͸ʮIPHFJOEFYKTʯ΍ʮQJZPJOEFYKTʯͳͲɺಉ໊ϑΝΠϧ͕ڞ ଘͰ͖Δ͕ɺJ04ΞϓϦͷϓϩδΣΫτͰ͸ಉ໊ϑΝΠϧ͸࢖͑ͳ͍
   w ϥΠϒϥϦ͕ଞͷϥΠϒϥϦʹґଘ͍ͯ͠Δ৔߹΋͋Δ
   w ෳ਺ͷ
   +4
   ϥΠϒϥϦΛ
   J04
   ։ൃϓϩδΣΫτʹ௥Ճ͢Δͷ͸೉͍͠ 7
8. 8FCQBDL
   Ͱ̍ͭͷϑΝΠϧʹ w ෳ਺ͷϑΝΠϧΛ̍ͭͷϑΝΠϧʹ·ͱΊͯ͘Ε ΔϞδϡʔϧόϯυϥ
   w ྫ͑͹ɺ#SJEHF
   ͱͳΔ
   JOEFYKT
   Λ࡞੒ͯ͠ɺͦ ΕΛର৅ʹͯ͠
   CVOEMF
   ϑΝΠϧΛ࡞੒͢Δ
   w ઃఆϑΝΠϧ
   XFCQBDLDPO fi HKT
   ͳͲॻ͖ํ͸ল ུʢ෇࿥ͷ
   63-
   Λݟ͍ͯͩ͘͞ʣ yarn add -D webpack wepback-cli yarn webpack // index.js import hoge from "hoge" import piyo from "piyo" export class Bridge { static hoge(arg) { return hoge(arg) } static piyo(arg) { return piyo(arg) } } 8
9. Ϟδϡʔϧ࡞੒ޙͷಡΈࠐΈ w όϯυϧϑΝΠϧ͕ϞδϡʔϧԽ͞ΕͨͷͰɺؔ਺औಘ·Ͱͷεςοϓ͕ ૿͕͑ͨɺ͜Ε·Ͱ࢖͍ํͱ͸มΘΒͳ͍ guard let module = context.objectForKeyedSubscript("module_name"), let bridge = module.objectForKeyedSubscript("bridge_name"), let function = bridge.objectForKeyedSubscript("function_name") else { return } let arguments = ؔ਺ͷҾ਺ʢจࣈɺ਺ࣈɺ഑ྻͳͲ [Any] ͷܕʣ let result = function.call(withArguments: [arguments]) return result 9
10. σϞ w +VTU
    ͱ͍͏
    +4
    ͷศརϥΠϒϥϦΛ
    J04
    ͷதͰ࢖ͬͯΈͨ
    w ฏۉܭࢉʢ+VTUNFBOʣ
    w ཚ਺બ୒ʢ+VTUSBOEPNʣ
    w ͜͜Ͱɺ+VTU
    ͸ఆ൪ϥΠϒϥϦ
    MPEBTI
    ͷஔ׵ީิͷ̍ͭͱݺ͹ΕΔϥΠϒϥϦ
    w IUUQTHJUIVCDPNBOHVTDKVTU 10
11. ධՁɿ,.1ͷΑ͏ʹͳΔʁˠ
    ͳΒͳ͍ w +BWB4DSJQU
    ੡ϥΠϒϥϦ͸਺͕ଟ͘ॆ࣮ͯ͠Δͷ͸͔͕֬ͩɺΘ͟Θ͟
    J04
    ͷதͰಈ͔͢ཧ༝͸ബ͍
    w +47BMVF
    ͸ԿʹͰ΋ͳΔܕɺؔ਺Ҿ਺͸
    "OZ
    ͳͷͰɺܕ҆શͳ։ൃ͸Ͱ ͖ͳ͍
    w ॲཧڞ௨Խ͍ͨ͠৔߹ɺૉ
    7BOJMMB
    ͷ
    +4
    Ͱ͸ͳ͘ɺ3FBDU
    /BUJWF
    ͳͲ ͷϚϧνϓϥοτϑΥʔϜରԠͷϑϨʔϜϫʔΫΛར༻͢ΔͱΑ͍
    w ʢλΠτϧճऩʣ 11
12. Ͱ͸ɺͲ͏ͯ͠
    +4
    Λಈ͔͍ͨ͠ͷ͔ w ໘നͦ͏͔ͩͬͨΒ
    w +BWB4DSJQU
    Ͱॻ͔Εͨ
    044
    Λ
    J04
    ΞϓϦͷதͰಈ͔͔ͨͬͨ͠
    w ͱ͋Δௐ΂෺Λ͍ͯͯ͠ɺͦͷศརπʔϧ͕͋Δ͜ͱΛ஌ͬͨ
    w ͨͩ͠ɺͦΕ͸
    +BWB4DSJQU
    ੡Ͱ͋Γɺ4XJGU
    ͳͲͷҠ২͸ͳ͔ͬͨ
    w ͦ͏͍͑͹ɺJ04
    ͸
    +BWB4DSJQU$PSF
    ͕͋Δͳ͋ʜ͕ΩοΧέ
    w ಈ࡞֬ೝࡁΈͰɺػձ͕͋Ε͹
    J04%$
    ͷύϯϑϨοτهࣄͰॻ͖͍ͨ 12
13. ·ͱΊ w ·ͬͨ͘ɺ+4͸࠷ߴͩͥ
    w IUUQTHJUIVCDPNNJUTVIBSV6TF+BWB4DSJQU1BDLBHFT 13