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.
October 08, 2021
Technology
1
1.3k
ReactNative製iOSAppのNative化への挑戦
株式会社ビットキー / Bitkey Inc.
October 08, 2021
Tweet
Share
More Decks by 株式会社ビットキー / Bitkey Inc.
See All by 株式会社ビットキー / Bitkey Inc.
オフィスビルを監視しよう:フィジカル×デジタルにまたがるSLI/SLO設計と運用の難しさ / Monitoring Office Buildings: The Challenge of Physical-Digital SLI/SLO Design & Operation
bitkey
0
13
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
0
15
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
16k
遠隔で同時に4人教育!? 〜リモート新人の「孤立」を防ぐオンボーディング事例〜/Educating 4 people at the same time remotely!〜Onboarding Case Studies to Prevent “Isolation” of Remote Newcomers〜
bitkey
0
47
ファームウェアは土管になるべきか 翻訳機になるべきか/Should firmware be a clay pipe or a translator?
bitkey
0
53
テストは合意形成をすべし!/Testing should be consensus building!
bitkey
0
63
Agentic Coding と 山登り と TypeScript〜体系的に考えてみよう!〜/Agentic Coding, Mountain Climbing and TypeScript~Let's think systematically!~
bitkey
0
250
"発信文化"をどうやって計測する?技術広報のKPI探索記/How do we measure communication culture?
bitkey
4
630
MCP でモノが動くとおもしろい/It is interesting when things move with MCP
bitkey
3
770
Other Decks in Technology
See All in Technology
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
320
PO初心者が考えた ”POらしさ”
nb_rady
0
210
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
210
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
280
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
OPENLOGI Company Profile for engineer
hr01
1
34k
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
340
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
22k
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
390
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
260
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Building Adaptive Systems
keathley
43
2.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Scaling GitHub
holman
460
140k
The Pragmatic Product Professional
lauravandoore
35
6.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Six Lessons from altMBA
skipperchong
28
3.9k
Visualization
eitanlees
146
16k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
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