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
170
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
iOS デバイスから始める Bluetooth 制御の業務用サーマルプリンター対応アプリの作り方
mitsuharu
0
22
iOS 開発で便利なツールたち
mitsuharu
0
170
「ゆめみ大技林 ’24」の紹介
mitsuharu
0
32
技適警察24時
mitsuharu
0
99
iOS アプリ開発におけるデータストリーム超入門
mitsuharu
0
140
オープンソースで作る自己紹介ソリューション
mitsuharu
0
60
発熱から iPhone を守る
mitsuharu
0
95
アクションボタンから始める App Intents の再入門
mitsuharu
0
260
iOSDCから始めるアーキテクチャ自作沼のすゝめ
mitsuharu
0
130
Other Decks in Programming
See All in Programming
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
Advanced App Shrinking Techniques
cbeyls
2
150
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
小さな開発会社を作った理由
polidog
0
1.9k
Namespace on read
tagomoris
2
370
Mastering Developer Experience: A Roadmap for Success 【開発生産性Conference 2024】
findyinc
1
380
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
290
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
Terraformテスト入門
msato
0
520
CSC307 Lecture 09
javiergs
PRO
1
500
Featured
See All Featured
The Invisible Customer
myddelton
117
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
What's new in Ruby 2.0
geeforr
338
31k
Designing the Hi-DPI Web
ddemaree
276
34k
GraphQLとの向き合い方2022年版
quramy
36
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
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