Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vanilla JavaScript はマルチプラットフォームの夢を見るか
Search
Mitsuharu Emoto
May 17, 2024
Programming
0
300
Vanilla JavaScript はマルチプラットフォームの夢を見るか
YUMEMI.grow Mobile #13
https://yumemi.connpass.com/event/317381/
Mitsuharu Emoto
May 17, 2024
Tweet
Share
More Decks by Mitsuharu Emoto
See All by Mitsuharu Emoto
iPhoneと共に過ごす夏
mitsuharu
0
18
WKWebViewとアクセシビリティ
mitsuharu
0
52
WKWebView と仲良くする
mitsuharu
0
130
推測するな、計測せよ(Swift編)
mitsuharu
0
52
React Native updates
mitsuharu
0
56
macOS なしで iOS アプリを開発する(※ただし xxx に限る)
mitsuharu
1
340
メーカー製 SDK は不要!標準フレームワークだけで作るサーマルプリンターの印刷アプリ
mitsuharu
0
51
Bluetooth 制御で業務用サーマルプリンター対応アプリを作ろう
mitsuharu
0
84
iOS デバイスから始める Bluetooth 制御の業務用サーマルプリンター対応アプリの作り方
mitsuharu
0
190
Other Decks in Programming
See All in Programming
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
480
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
220
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.5k
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
440
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
900
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
100
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
980
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
Swiftビルド弾丸ツアー - Swift Buildが作る新しいエコシステム
giginet
PRO
0
1.6k
CSC305 Lecture 02
javiergs
PRO
1
260
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
930
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
331
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Music & Morning Musume
bryan
46
6.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
How to Ace a Technical Interview
jacobian
280
23k
Documentation Writing (for coders)
carmenintech
75
5k
The Pragmatic Product Professional
lauravandoore
36
6.9k
RailsConf 2023
tenderlove
30
1.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Rails Girls Zürich Keynote
gr2m
95
14k
Transcript
7BOJMMB+BWB4DSJQU ϚϧνϓϥοτϑΥʔϜͷເΛݟΔ͔ ߐຊޫ :6.&.*HSPX.PCJMF 1
ࣗݾհ w ͑ͱΈͭΔ w גࣜձࣾΏΊΈJ04ςοΫϦʔυ w ٕज़ಉਓࢽʮΏΊΈେٕྛ`ʯʹهࣄΛدߘ͠·ͨ͠ w ٕॻതʢऴྃʣɺٕज़ॻయͰ͠·͢ w
ిࢠ൛͋Γ·͢ 2
+BWB4DSJQU.VMUJ1MBUGPSNͷઓ w ྲྀߦΓͷ,.1Λ࢝Ίͱͨ͠ϚϧνϓϥοτϑΥʔϜ։ൃ w J04"OESPJEͷ྆ํͰ͑Δݴޠ$ +BWB4DSJQU͕͋Δ w ࠓճJ04Ͱ+BWB4DSJQUຊʹಋೖͰ͖Δͷ͔ʁ w ͍ͪ͝͝Ͳ͏ͳͷ͔ʁΛௐ·ͨ͠
දهͷҙ w +BWB4DSJQU+4 w ύοέʔδϥΠϒϥϦ 3
+4ϥΠϒϥϦͷ४උ w +4ϥΠϒϥϦཧπʔϧOQN͔ΒՃ͢Δ͜ͱ͕Ͱ͖·͢ w IUUQTXXXOQNKTDPN w ࢲZBSO͍ͳͷͰɺ࣍ͷΑ͏ͳײ͡Ͱ४උ͠·ͨ͠ cd js-packages yarn
init yarn add hoge 4
+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
ΤϥʔϋϯυϦϯά 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
+4ϑΝΠϧͱJ04ϓϩδΣΫτ w +4ͰʮIPHFJOEFYKTʯʮQJZPJOEFYKTʯͳͲɺಉ໊ϑΝΠϧ͕ڞ ଘͰ͖Δ͕ɺJ04ΞϓϦͷϓϩδΣΫτͰಉ໊ϑΝΠϧ͑ͳ͍ w ϥΠϒϥϦ͕ଞͷϥΠϒϥϦʹґଘ͍ͯ͠Δ߹͋Δ w ෳͷ+4ϥΠϒϥϦΛJ04։ൃϓϩδΣΫτʹՃ͢Δͷ͍͠ 7
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
Ϟδϡʔϧ࡞ޙͷಡΈࠐΈ 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
σϞ w +VTUͱ͍͏+4ͷศརϥΠϒϥϦΛJ04 ͷதͰͬͯΈͨ w ฏۉܭࢉʢ+VTUNFBOʣ w ཚબʢ+VTUSBOEPNʣ w ͜͜Ͱɺ+VTUఆ൪ϥΠϒϥϦMPEBTI
ͷஔީิͷ̍ͭͱݺΕΔϥΠϒϥϦ w IUUQTHJUIVCDPNBOHVTDKVTU 10
ධՁɿ,.1ͷΑ͏ʹͳΔʁˠͳΒͳ͍ w +BWB4DSJQUϥΠϒϥϦ͕ଟ͘ॆ࣮ͯ͠Δͷ͔͕֬ͩɺΘ͟Θ͟ J04ͷதͰಈ͔͢ཧ༝ബ͍ w +47BMVFԿʹͰͳΔܕɺؔҾ"OZͳͷͰɺܕ҆શͳ։ൃͰ ͖ͳ͍ w ॲཧڞ௨Խ͍ͨ͠߹ɺૉ 7BOJMMB
ͷ+4Ͱͳ͘ɺ3FBDU/BUJWFͳͲ ͷϚϧνϓϥοτϑΥʔϜରԠͷϑϨʔϜϫʔΫΛར༻͢ΔͱΑ͍ w ʢλΠτϧճऩʣ 11
ͰɺͲ͏ͯ͠+4Λಈ͔͍ͨ͠ͷ͔ w ໘നͦ͏͔ͩͬͨΒ w +BWB4DSJQUͰॻ͔Εͨ044ΛJ04ΞϓϦͷதͰಈ͔͔ͨͬͨ͠ w ͱ͋ΔௐΛ͍ͯͯ͠ɺͦͷศརπʔϧ͕͋Δ͜ͱΛͬͨ w ͨͩ͠ɺͦΕ+BWB4DSJQUͰ͋Γɺ4XJGUͳͲͷҠ২ͳ͔ͬͨ w
ͦ͏͍͑ɺJ04+BWB4DSJQU$PSF͕͋Δͳ͋ʜ͕ΩοΧέ w ಈ࡞֬ೝࡁΈͰɺػձ͕͋ΕJ04%$ͷύϯϑϨοτهࣄͰॻ͖͍ͨ 12
·ͱΊ w ·ͬͨ͘ɺ+4࠷ߴͩͥ w IUUQTHJUIVCDPNNJUTVIBSV6TF+BWB4DSJQU1BDLBHFT 13