Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ReactNative製iOSAppのNative化への挑戦
株式会社ビットキー / Bitkey Inc.
PRO
November 26, 2021
Technology
1
520
ReactNative製iOSAppのNative化への挑戦
株式会社ビットキー / Bitkey Inc.
PRO
November 26, 2021
Tweet
Share
More Decks by 株式会社ビットキー / Bitkey Inc.
See All by 株式会社ビットキー / Bitkey Inc.
SRE_チーム立ち上げから1年_気づいたら_SRE_っぽくない仕事まで貢献しちゃってる説
bitkey
PRO
0
4.8k
人間の直感に対応させた複雑度<Cognitive Complexity>の計測ツールをgo/astで実装してみた
bitkey
PRO
0
87
ビットキーのプロダクトの根幹スマートアクセスをよりスケールするための破壊と創造
bitkey
PRO
0
33
ロッカーを中心にユーザー体験をConnectしていくために限界まで汎用的に考えたお話
bitkey
PRO
0
22
全てのIDを管理するために~メアド・電話番号を持っていない「こども」をどう取り扱うか~
bitkey
PRO
0
50
ビル全体をスマート化するって何~workhubをさらに進化させたマルチテナント機能について~
bitkey
PRO
0
20
GoConference_人生いろいろモノレポもいろいろ
bitkey
PRO
0
430
Web開発の知見を活かして組み込み開発環境を整備した話_2021秋版
bitkey
PRO
0
460
SLOのある生活を始めよう
bitkey
PRO
0
440
Other Decks in Technology
See All in Technology
JUnit5.7, 5.8の新機能紹介 #jjug_ccc #jjug_ccc_b / junit 5.7, 5.8 new features
kyonmm
PRO
2
420
Azure Arc Virtual MachineとAzure Arc Resource Bridge / VM provisioning through Azure portal on Azure Stack HCI (preview)
sashizaki
0
150
【toranoana.deno#7】Denoからwasmを呼び出す基礎
toranoana
0
130
JDK Flight Recorder入門
chiroito
1
510
紙にまつわる苦しみを機能化してきた カミナシの歴史
kaminashi
0
1.2k
RDRA + JavaによるレジャーSaaSプロダクトの要件定義と実装のシームレスな接続
jjebejj
PRO
3
710
IoTLT88-NTKanazawa-laundry-dry
yukima0707
0
230
Build 2022で発表されたWindowsアプリ開発のあれこれ振り返ろう
hatsunea
1
380
eBPF for Security Observability
lizrice
0
190
Modern Android dependency injection
hugovisser
1
130
JAWS-UG re:Habilitaion 報告 / JAWS-UG OITA rehabilitation
hiranofumio
0
130
Strategyパターン
hankehly
0
140
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
63
7.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
10
3.4k
Ruby is Unlike a Banana
tanoku
91
9.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
5
2.3k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
The Invisible Side of Design
smashingmag
290
48k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
920
The Mythical Team-Month
searls
209
39k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
12k
For a Future-Friendly Web
brad_frost
166
7.4k
Transcript
React NativeiOSAppͷ NativeԽͷઓ - React Native × SwiftUI -
Outline 0. workhubAppʹ͍ͭͯ 1. ͳͥNativeԽͷಓΛาΉ͜ͱʹ͔ͨ͠ 2. NativeԽͷํ๏ 3. ࣮ࡍʹӡ༻ͯ͠Έ͔ͯͬͨ͜ͱ 4.
ࠓޙͷల 2 2
ࡈ౻ ޛ Shogo Saito 2016 2019 גࣜձࣾϫʔΫεΞϓϦέʔγϣϯζʹೖࣾ ECύοέʔδͷCMSྖҬͷ։ൃΛ୲ ϏοτΩʔʹೖࣾ εϚʔτϑΥϯΞϓϦʮbitlockʯͷ্ཱͪ͛ɾ࣮
Λ୲ bitkey platformνʔϜҟಈ إೝূٕज़Λར༻ͨ͠ΞϓϦέʔγϣϯ։ൃͳͲʹ ܞΘΔ 2021 εϚʔτϑΥϯΞϓϦʮworkhubʯͷ νʔϜϚωʔδϟʔͱͯ͠։ൃʹܞΘΔ 2020
workhubAppʹ͍ͭͯ 4 4
0. workhubAppʹ͍ͭͯ WebαʔϏεɺͦͯ͠ϋʔυΣΞ܈ͱ࿈ܞ͢Δ͜ͱʹΑͬͯʮಇۭؒ͘ʯͦͷͷɺ ۭͦͯؒ͠ʹඥͮ͘Ϟϊɾಇ͘ώτͷαϙʔτΛߦ͏εϚʔτϑΥϯΞϓϦɻ 5
0. workhubAppʹ͍ͭͯ ۙͳεϚʔτϑΥϯΛ༻͍ͯɺιϑτΣΞͱϋʔυΣΞ(=σδλϧͱϑΟδΧϧ)ͱΛίωΫτ͠ɺ ʑͷʮಇ͘ʯΛαϙʔτ͢ΔͨΊͷΞϓϦͰ͢ɻ ※ओཁػೳ ɾಇͨ͘ΊͷʮۭؒʯʮϞϊʯͷ༧ ɾbitlockγϦʔζͷઃஔɺղࢪৣͷαϙʔτ ɾQRίʔυɺRFID(NFC)Λར༻ͨ͠νΣοΫΠϯମݧ ɾإೝূػೳͷαϙʔτͱͯ͠ɺεϚʔτϑΥϯΞϓϦ͔Βͷإొ ɾetc…
6
ͳͥNativeԽͷಓΛ าΉ͜ͱʹ͔ͨ͠ 7 7
ɾReact NativeͱɺFacebookͷMobile Application Framework ɾReact(JavaScript)Λهड़͢Δ͜ͱʹΑͬͯiOS, AndroidΞϓϦΛߏங͢Δ͜ͱ͕Մೳͳ ɹΫϩεϓϥοτϑΥʔϜରԠͷ։ൃFramework ɾWebαʔϏεͰͷ։ൃܦݧ͕͋Δ or JavaScript͕هड़Ͱ͖Ε
iOS/Android ΞϓϦΛ࡞Մೳ → ۃɺ iOSΤϯδχΞ͕͍ͳ͍ڥͰ͋Δఔ࡞Δ͜ͱ͕Ͱ͖Δ 8 1. ͳͥNativeԽͷಓΛาΉ͜ͱʹ͔ͨ͠
ॳظϩʔϯν࣌ʹ༗རʹಇ͘έʔεଟ͍React NativeͰ͋Δ͕ɾɾ ɾ࠷৽OSͷै ɾReact NativeͷVersionUpΛͨͳ͍ͱiOS / AndroidͷVersionUpʹରԠͰ͖ͳ͍ ɾϥΠϒϥϦͷڧґଘ ɾiOS /
Android ͔Βʹఏڙ͞Ε͍ͯΔػೳͷར༻ϥΠϒϥϦΛ༻͍ͯͷར༻͕ओͱͳΔ ɾ Bluetooth ΧϝϥىಈɺNFCಡΈऔΓͳͲ͜Εʹؚ·ΕΔ ɾBuild͕͍ ɾReact Native͕ CocoaPods ͱ͍͏Package Managerʹґଘ͍ͯ͠Δ 9 1. ͳͥNativeԽͷಓΛาΉ͜ͱʹ͔ͨ͠
Ҏ্ͷΑ͏ͳཧ༝͔Βɺ React NativeΛ٫͠ iOS NativeͳΞϓϦΛ ࡞͢Δํ 10 10 1. ͳͥNativeԽͷಓΛาΉ͜ͱʹ͔ͨ͠
ͱ͍͍ͭͭ... 11 11 1. ͳͥNativeԽͷಓΛาΉ͜ͱʹ͔ͨ͠
͍͖ͳΓطଘͷAppΛ ·Δ͝ͱํస͍͠ 12 12 1. ͳͥNativeԽͷಓΛาΉ͜ͱʹ͔ͨ͠
ແཧͷͳ͍ൣғͰ ʮ؇͔ͳҠߦʯΛਪ͠ਐΊ͍ͨ 13 13 1. ͳͥNativeԽͷಓΛาΉ͜ͱʹ͔ͨ͠
NativeԽͷํ๏ 14 14
2. NativeԽͷํ๏ ɾͯ͞ɺҰޱʹNativeԽ͍ͯ͘͠ͱ͍ͬͯ... ɾϏδωεϩδοΫΛSwiftͰهड़͢Δ ʁ ɾίϯϙʔωϯτͷ࡞SwiftͰରԠ͢Δ ʁ ɾͲͷΑ͏ʹReact Native͔Βݺͼग़ͤΑ͍ͷ͔ ʁ
etc… ɹɹ ߟ͑Δ͜ͱଟͦ͏Ͱ͋Δɻ 15
͔͠͠ߟ͑ͯΈΕ... 16 16 2. NativeԽͷํ๏
React Nativeͷػߏ ԿΒ͔ͷܗͰ iOS Nativeʹܨ͕͍ͬͯΔͣ 17 17 2. NativeԽͷํ๏
ࠔͬͨͱ͖ͦ͜ ެࣜυΩϡϝϯτʂ 18 18 2. NativeԽͷํ๏
2. NativeԽͷํ๏ ɾRCTBridgeModule Λ༻͍ͨҠߦ͕Մೳ (https://reactnative.dev/docs/native-modules-ios) ɾReact NativeͷΈʹ͔ͬΔʹɺObjective-CͷϚΫϩΛར༻͕ඞཁ Interface෦ʹ͍ͭͯObjective-CͰهड़͢Δඞཁ͕͋Δɻ ɾݺͼग़͍ͨؔ͠ͷInterfaceΛఆٛͯ͋͛͠Δ͚ͩͰOK ɾJavaScriptͷasync
/ awaitར༻Մೳʂ 19 ϏδωεϩδοΫΛSwiftͰهड़͢Δ
2. NativeԽͷํ๏ 20 JavaScript React Native Bridge RCTBridgeModule Business Logic
ϏδωεϩδοΫΛSwiftͰهड़͢Δ
2. NativeԽͷํ๏ ɾRCTViewManagerΛ׆༻ (https://reactnative.dev/docs/native-components-ios) ɾ͏·͘ద༻Ͱ͖Ε ௨ৗͷReact Nativeͷίϯϙʔωϯτͱ ಉ༷ͷ༻ײͰReact NativeʹSwiftίϯϙʔωϯτΛ ಋೖͰ͖Δͣɻ
21 ίϯϙʔωϯτΛSwiftͰهड़͢Δ
2. NativeԽͷํ๏ 22 JavaScript React Native Bridge RCTView Manager UIView
ίϯϙʔωϯτΛSwiftͰهड़͢Δ
2. NativeԽͷํ๏ ɾઌ΄ͲͷྫͰ MapView ͷΑ͏ͳɺiOS͕ఏڙ͍ͯ͠Δίϯϙʔωϯτͷಋೖྫ͕ հ͞Ε͍ͯ·͕ͨ͠ɾɾ ɾObjective-C ͦͷ··ͷར༻ਏͦ͏ ɾࣗ༝ʹViewͷΧελϚΠζ͕͍ͨ͠ etc…
23 ίϯϙʔωϯτΛSwiftͰهड़͢Δ
͜͜Ͱ;ͱཱͪࢭ·Δ... 24 24 2. NativeԽͷํ๏
ίϯϙʔωϯτͷ࡞ख๏ʁ 25 25 2. NativeԽͷํ๏
2. NativeԽͷํ๏ ɾUIKitʁ SwiftUIʁ → (ՄೳͰ͋Ε) SwiftUIΛ࠾༻͍ͨ͠ ※ SwiftUI… ɾApple͕WWDC19ʹͯൃදͨ͠ɺReact
ͳͲͱಉ༷ͷએݴతͳUIߏஙFramework ɾ10/8ݱࡏ, SwiftUI 3 ͱ͍͏ܗͰఏڙ͞Ε͍ͯΔ ɾUIKitͷશޓʹࢸ͍ͬͯͳ͍͕ɺࠓޙΜʹ։ൃ͕ߦΘΕ͍ͯͩ͘Ζ͏ 26 ίϯϙʔωϯτΛSwiftͰهड़͢Δ
2. NativeԽͷํ๏ 27 JavaScript React Native Bridge RCTView Manager UIView
ίϯϙʔωϯτΛSwiftUIͰهड़͢Δ SwiftUIView
2. NativeԽͷํ๏ ɾSwiftUIͰ࡞ͨ͠View͔Βɺ UIViewΛੜͰ͖ΕRCTViewManager͕ͦͷ··ద༻Ͱ͖Δͣ ͦ͜Ͱొ͢Δͷ͕ UIHostingController 28 ίϯϙʔωϯτΛSwiftUIͰهड़͢Δ
ɾSwiftUIͰ࡞ͨ͠View͔Βɺ ɹUIViewΛੜͰ͖ΕRCTViewManager͕ͦͷ··ద༻Ͱ͖Δͣ ͦ͜Ͱొ͢Δͷ͕ UIHostingController Objective-Cʹެ։͢ΔͨΊɺ Proxy Class Λ NSObjectͰ࡞ 2.
NativeԽͷํ๏ 29 ίϯϙʔωϯτΛSwiftUIͰهड़͢Δ
2. NativeԽͷํ๏ ɾ͋ͱ௨ৗͷRCTViewManagerͷར༻࣌ͱಉ༷ʹObjective-CͷViewͱͯ͠ฦͯ͋͛͠ΕΑ͍ 30 ίϯϙʔωϯτΛSwiftUIͰهड़͢Δ
2. NativeԽͷํ๏ 31 JavaScript React Native Bridge RCTView Manager SwiftUI
Proxy UIHosting Controller SwiftUI View ίϯϙʔωϯτΛSwiftUIͰهड़͢Δ
લ߲ͷArchitectureͷ࠾༻ʹΑΓɺReact Native͔ΒSwiftUIͷݺͼग़͕͠Մೳʹʂ 32 36 2. NativeԽͷํ๏
ະͷ༰ ఏڙ͞Ε͍ͯΔػೳΛಡΈղ͚ ϓϩμΫτʹద༻Մೳʂ 33 38 2. NativeԽͷํ๏
࣮ࡍʹӡ༻ͯ͠Έͯ ͔ͬͨ͜ͱ 34 39
ྑ͔ͬͨ 35 40 2. NativeԽͷํ๏
3. ࣮ࡍʹӡ༻ͯ͠ΈͯΘ͔ͬͨ͜ͱ ʲྑ͔ͬͨ #1ʳ ɾReact NativeͰར༻͍ͯͨ͠ϥΠϒϥϦ܈ΛɺiOSଆʹॲཧΛدͤΔ͜ͱͰෆཁʹͰ͖ΔΑ͏ʹͳΓɺ ϘτϧωοΫͱͳ͍ͬͯͨBuild࣌ؒͷॖΛ࣮ݱɻ ɾFull React Native࣌ʹൺΔͱ10Ҏ্ͷॖΛ࣮ݱʂ
ɾBluetoothNFCػೳɺΧϝϥىಈͳͲ֤छiOSʹґଘ͢Δػೳ܈Λ React NativeͷϥΠϒϥϦʹҰཔΒ࣮͕ͣՄೳʹͳͬͨ ɾiOSͷUpdateʹैָ͕ʹ (ۙͩͱiOS15ରԠ) ɾଞͷiOSϓϩδΣΫτͰར༻͍ͯͨ͠ࢿ࢈ (SwiftࣾϥΠϒϥϦ)Λ׆༻͘͢͠ͳͬͨ ɾView͔Β࡞Մೳʹͳͬͨ͜ͱͰࢿ࢈׆༻ͷϞνϕʔγϣϯΛಘΒΕ͘͢ͳͬͨ ɾXcode / SwiftUIͷϓϨϏϡʔػೳͷ׆༻͕Մೳʹ 36
3. ࣮ࡍʹӡ༻ͯ͠ΈͯΘ͔ͬͨ͜ͱ ʲྑ͔ͬͨ #2ʳ ɾSwiftUIΛ׆༻Ͱ͖Δͱ͍͏Ϟνϕʔγϣϯ↑ ɾiOSΤϯδχΞͷڠྗΛಘ͍͢ঢ়ଶʹ͍͚࣋ͬͯͨ ɾઌͷఆܗతͳ෦͚ͩهड़͢Εɺ͋ͱ௨ৗͷSwiftͰॻ͚ΔͨΊ 37
ਏ͍... 38 43 2. NativeԽͷํ๏
3. ࣮ࡍʹӡ༻ͯ͠ΈͯΘ͔ͬͨ͜ͱ ʲਏ͍ #1ʳ ɾϥΠϒϥϦͷݮʹ͍ͭͯɺͦͷޮՌΛݟΕૉΒ͍͠ͷͰ͋Δͷͷɺ (વͳ͕Β)ϥΠϒϥϦ͕୲͍࣮ͬͯͨ༰Λաෆͳ͘දݱ͢ΔͨΊͷ ݟɾεΩϧ͕ҰఆٻΊΒΕΔɻ →ͱ͖ʹReact NativeͷϥΠϒϥϦ͕ఏڙ͍ͯ͠ΔObjective-CͷίʔυΛಡΈղ͘ඞཁ͋Γ ɾSwiftUIίϯϙʔωϯτΛؚΉViewʹ͓͍ͯɺReact
NativeͷHotReload͕༗ޮ׆༻Ͱ͖͓ͯΒͣɺ ʮ RCTViewManagerʹొͯ͠Α͍ಉҰ໊শͷView1͚ͭͩʯͱ͍͏੍ʹҾ͔͔ͬͬͯ͠·͏ →Xcode PreviewΛ׆༻͠ͳ͕ΒؤுΔ͜ͱʹͳΔ͔ 39
3. ࣮ࡍʹӡ༻ͯ͠ΈͯΘ͔ͬͨ͜ͱ ʲਏ͍ #2ʳ ɾ1ͭͷը໘Λ࡞Δͷʹରͯ͠ɺهड़ྔBridgeͷ͚ͩͲ͏ͯ͠૿͑ͯ͠·͏ ɾSwift ͔ΒReact NativeͷॲཧΛݺͼग़͍ͨ͠߹໘ →React NativeͷViewଆͰeventEmitterΛ࡞͠ɺ
ɹɹɹɹSwift͔Βpublish͢Δ͜ͱͰsubscribeͤ͞ॲཧ࣮ߦͤ͞Δ ɾఆܕతͳهड़܈Λؒҧ͑ͯ͠·ͬͨ߹ɺReact Native͔Β͏·͘ݺͼग़ͤͣ ɹɹʮԿ͕߹க͍ͯ͠ͳ͍͕ͨΊʹViewϨϯμϦϯά͞Εͳ͍ͷ͔ʯͷௐࠪʹ͕͔͔࣌ؒͬͯ͠·͏ 40
ࠓޙͷల 41 46
4. ࠓޙͷల ɾํ๏ཱ͕֬Ͱ͖͖ͯͨͷͰɺอकੑͷ্ͷͨΊSwiftUIͷஔ͖͑ࠓޙਵ࣌ߦ͍ͬͯ͘ ɾը໘ / ίϯϙʔωϯτΛSwiftUIͰ࡞͢ΔલஈͰඞਢͱͳΔɺObjective-Cهड़ / Proxyʹ͍ͭͯ ɹίʔυͷࣗಈੜΛߦ͏πʔϧΛ࡞ͯ͠DXվળΛਤΔ ɾGenesis
(https://github.com/yonaskolb/Genesis) ɾswift-argument-parser (https://github.com/apple/swift-argument-parser) ɾSwiftଆͷUnitTestͷ֦ॆ ɾγϯϓϧͳMVVMܕ ArchitectureΛΊΔͷͰɺUnitTestॻ͖͘͢ͳͬͨ ɾͷThe Composable Architecture(TCA)Λ༻͍ͨɺʮSwiftଆͰͷঢ়ଶཧʯͷҠߦ 42
͓Βͤ ͍͞͝ʹ 43 48
͓Βͤ ҰॹʹੈͷதΛม͑Δ ΞϓϦΛ࡞Γ·͠ΐ͏ʂ 44 49
45