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.
Waroomを使って ハードウェアからソフトウェアまで 領域横断してインシデントマネジメント始めてみた /I started incident management using Waroom across domains from hardware to software.
bitkey
PRO
0
9
データを用いてサービス品質の向上に貢献!! SREのプラクティスを用いた守りのデータ分析 / Using Data to Improve Service Quality! Defensive data analysis using SRE practices
bitkey
PRO
2
120
“共通化”で失敗したモデリング実例 / Modeling examples of failures due to "commonization
bitkey
PRO
2
180
事業フェーズの変化を乗り越えるEnabling/Platform SREへの転換 / Transition to Enabling/Platform SRE to overcome changes in business phase
bitkey
PRO
2
97
スタートアップにおける Platform Engineering の 片鱗 / A glimpse of platform engineering in startups
bitkey
PRO
2
210
Node.js のサーバーをなるべく自動生成に頼って Go にリプレイスした話 / A story about replacing a Node.js server with Go, relying on automatic generation as much as possible.
bitkey
PRO
2
190
スマートロック開発におけるSLI/SLOを用いた解錠体験の改善 / Improving the unlocking experience using SLI/SLO in smart lock development
bitkey
PRO
3
300
Bitkeyのモバイルアプリを進化させるための歩き方 / Walking the evolution of Bitkey's mobile apps
bitkey
PRO
1
460
Pointer と向き合う / Facing the Pointer
bitkey
PRO
1
64
Other Decks in Technology
See All in Technology
Intuneお役立ちツールのご紹介
sukank
3
780
Microsoft Intune アプリのトラブルシューティング
sophiakunii
1
450
スクラム成熟度セルフチェックツールを作って得た学びとその活用法
coincheck_recruit
1
120
形式手法の 10 メートル手前 #kernelvm / Kernel VM Study Hokuriku Part 7
ytaka23
5
830
AGIについてChatGPTに聞いてみた
blueb
0
120
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
0
270
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
390
Terraform未経験の御様に対してどの ように導⼊を進めていったか
tkikuchi
2
390
2024年グライダー曲技世界選手権参加報告/2024 WGAC report
jscseminar
0
330
3次元点群データ「VIRTUAL SHIZUOKA』のオープンデータ化による恩恵と協働の未来/FOSS4G Japan 2024
kazz24s
0
140
隣接領域をBeyondするFinatextのエンジニア組織設計 / beyond-engineering-areas
stajima
1
250
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
160
Featured
See All Featured
KATA
mclloyd
29
14k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
830
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Code Reviewing Like a Champion
maltzj
520
39k
Practical Orchestrator
shlominoach
186
10k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Building Applications with DynamoDB
mza
90
6.1k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
YesSQL, Process and Tooling at Scale
rocio
168
14k
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