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
240
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
React Native updates
mitsuharu
0
11
macOS なしで iOS アプリを開発する(※ただし xxx に限る)
mitsuharu
1
210
メーカー製 SDK は不要!標準フレームワークだけで作るサーマルプリンターの印刷アプリ
mitsuharu
0
21
Bluetooth 制御で業務用サーマルプリンター対応アプリを作ろう
mitsuharu
0
43
iOS デバイスから始める Bluetooth 制御の業務用サーマルプリンター対応アプリの作り方
mitsuharu
0
80
iOS 開発で便利なツールたち
mitsuharu
0
240
「ゆめみ大技林 ’24」の紹介
mitsuharu
0
65
技適警察24時
mitsuharu
0
230
iOS アプリ開発におけるデータストリーム超入門
mitsuharu
0
200
Other Decks in Programming
See All in Programming
情報漏洩させないための設計
kubotak
5
1.4k
EC2からECSへ 念願のコンテナ移行と巨大レガシーPHPアプリケーションの再構築
sumiyae
3
600
オニオンアーキテクチャを使って、 Unityと.NETでコードを共有する
soi013
0
370
rails newと同時に型を書く
aki19035vc
6
730
HTML/CSS超絶浅い説明
yuki0329
0
200
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
910
Scaling your build logic
antalmonori
1
110
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
8
1.4k
20241217 競争力強化とビジネス価値創出への挑戦:モノタロウのシステムモダナイズ、開発組織の進化と今後の展望
monotaro
PRO
0
310
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
2.8k
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
210
Swiftコンパイラ超入門+async関数の仕組み
shiz
0
180
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
How STYLIGHT went responsive
nonsquared
96
5.3k
It's Worth the Effort
3n
184
28k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
How GitHub (no longer) Works
holman
312
140k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
192
16k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Designing for Performance
lara
604
68k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Facilitating Awesome Meetings
lara
51
6.2k
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