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.
カオスに立ち向かう小規模チームの装備の選択〜フルスタックTSという装備の強み _ 弱み〜/Choosing equipment for a small team facing chaos ~ Strengths and weaknesses of full-stack TS~
bitkey
1
120
型化からはじめる時間づくり/Creating Time Starting with Modeling
bitkey
0
64
職種に名前が付く、ということ/The fact that a job title has a name
bitkey
1
290
心に火を灯すヒントは自分の中にある/The clue to lighting a fire in your heart is within you.
bitkey
1
140
“感動”の伝播によって 技術広報の心に火が灯った瞬間/By spreading excitement The moment when the hearts of the technical public relations staff were lit by the spread of “excitement”.
bitkey
0
370
属人化のピンチをチャンスに変える! メンバーの成長とチーム化を実現した オンボーディング/Turning the pinch of belonging into an opportunity! Onboarding with member growth and teaming
bitkey
1
130
なぜ「Event Sourcing」を選択したのか〜事実に基づくことの重要性〜/Why did we choose "Event Sourcing"?
bitkey
1
460
大量の Cloud (Run) Functions からなるサービスのこれまでとこれから/The past and future of the service with lots of Cloud (Run) functions
bitkey
1
210
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
280
Other Decks in Technology
See All in Technology
コードや知識を組み込む / Incorporating Codes and Knowledge
ks91
PRO
0
140
Goの組織でバックエンドTypeScriptを採用してどうだったか / How was adopting backend TypeScript in a Golang company
kaminashi
12
8.9k
読んで学ぶ Amplify Gen2 / Amplify と CDK の関係を紐解く #jawsug_tokyo
tacck
PRO
1
270
クラウド開発環境Cloud Workstationsの紹介
yunosukey
0
210
Стильный код: натуральный поиск редких атрибутов по картинке. Юлия Антохина, Data Scientist, Lamoda Tech
lamodatech
0
830
生成AIのユースケースをとにかく集めてまるっと学ぶ!/ all about generative ai usecases
gakumura
2
300
ここはMCPの夜明けまえ
nwiizo
32
12k
AIとSREで「今」できること
honmarkhunt
3
540
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
5.4k
SnowflakeとDatabricks両方でRAGを構築してみた
kameitomohiro
1
510
営業向け誰でも話せるOCIセールストーク
oracle4engineer
PRO
2
120
PagerDuty×ポストモーテムで築く障害対応文化/Building a culture of incident response with PagerDuty and postmortems
aeonpeople
3
470
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
680
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Facilitating Awesome Meetings
lara
54
6.3k
Gamification - CAS2011
davidbonilla
81
5.2k
The Cost Of JavaScript in 2023
addyosmani
49
7.7k
Designing for humans not robots
tammielis
253
25k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
RailsConf 2023
tenderlove
30
1.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.7k
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