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
290
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
6
WKWebViewとアクセシビリティ
mitsuharu
0
38
WKWebView と仲良くする
mitsuharu
0
120
推測するな、計測せよ(Swift編)
mitsuharu
0
45
React Native updates
mitsuharu
0
46
macOS なしで iOS アプリを開発する(※ただし xxx に限る)
mitsuharu
1
290
メーカー製 SDK は不要!標準フレームワークだけで作るサーマルプリンターの印刷アプリ
mitsuharu
0
45
Bluetooth 制御で業務用サーマルプリンター対応アプリを作ろう
mitsuharu
0
76
iOS デバイスから始める Bluetooth 制御の業務用サーマルプリンター対応アプリの作り方
mitsuharu
0
160
Other Decks in Programming
See All in Programming
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
160
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
NPOでのDevinの活用
codeforeveryone
0
910
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.2k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
890
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
200
20250708_JAWS_opscdk
takuyay0ne
2
130
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.2k
効率的な開発手段として VRTを活用する
ishkawa
1
170
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
GitHub's CSS Performance
jonrohan
1031
460k
Designing for humans not robots
tammielis
253
25k
Six Lessons from altMBA
skipperchong
28
3.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Navigating Team Friction
lara
187
15k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Embracing the Ebb and Flow
colly
86
4.8k
YesSQL, Process and Tooling at Scale
rocio
173
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