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
ReactNative製iOSAppのNative化への挑戦
Search
株式会社ビットキー / Bitkey Inc.
PRO
October 08, 2021
Technology
1
1.2k
ReactNative製iOSAppのNative化への挑戦
株式会社ビットキー / Bitkey Inc.
PRO
October 08, 2021
Tweet
Share
More Decks by 株式会社ビットキー / Bitkey Inc.
See All by 株式会社ビットキー / Bitkey Inc.
DevOpsDays Tokyo 2024 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略 / DevOpsDays Tokyo 2024 - Between Digital and Analog - Automated Testing Strategies to Support Smart Building Development.
bitkey
PRO
0
5
マルチプラットフォームを見据えるiOSのTCA設計|Designing iOS Apps with TCA for Multi-Platform Strategies
bitkey
PRO
1
68
また輝く瞳を取り戻すために / To get your eyes shining again.
bitkey
PRO
0
22
“持続可能な”開発を実現するためにスタートアップで実践したこと / What we did at the start to achieve 'sustainable' development.
bitkey
PRO
0
81
エンジニアのマネジメントキャリアにおける技術広報 / Technical Public Relations in Developers' Management Careers
bitkey
PRO
0
67
リリース速度10倍を実現したビットキー流DevOps - Argo CD との付き合い方 - / Bitkey-style DevOps with 10X faster release speed - How to work with Argo CD -
bitkey
PRO
0
260
SLI・SLOを「データ」として活用する
bitkey
PRO
0
130
ビットキーのIoT基盤における AWS IoT Rule Action 活用
bitkey
PRO
0
83
創業期にやったプロダクトマネジメントっぽいこと / Product management-like things we did during the start-up phase.
bitkey
PRO
1
570
Other Decks in Technology
See All in Technology
Yahoo! 知恵袋フロントエンドをリアーキテクトしている話
lycorptech_jp
PRO
1
100
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
2
260
DevOpsDays History and my DevOps story
kawaguti
PRO
9
2.5k
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
150
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
450
本当のAWS基礎
toru_kubota
0
510
Janus
bkuhlmann
1
490
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
210
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
Azureの基本的な権限管理の勉強会
yhana
0
270
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
170
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
0
160
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
10
990
Building an army of robots
kneath
300
41k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Web Components: a chance to create the future
zenorocha
305
41k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Statistics for Hackers
jakevdp
789
220k
Designing for Performance
lara
601
67k
Product Roadmaps are Hard
iamctodd
44
9.7k
Become a Pro
speakerdeck
PRO
11
4.5k
In The Pink: A Labor of Love
frogandcode
138
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
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