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
フロントエンドエンジニアが React Native を触ってみた話
Search
Kamakura Masaya
March 09, 2017
Technology
9
2.7k
フロントエンドエンジニアが React Native を触ってみた話
【RECRUIT Technologies NIGHT vol.5】リクルート流フロントエンド開発 /
https://atnd.org/events/86112
Kamakura Masaya
March 09, 2017
Tweet
Share
Other Decks in Technology
See All in Technology
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
ビギナーであり続ける/beginning
ikuodanaka
3
750
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
230
OPENLOGI Company Profile for engineer
hr01
1
34k
Lazy application authentication with Tailscale
bluehatbrit
0
210
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
440
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
21k
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Why Our Code Smells
bkeepers
PRO
336
57k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
How to train your dragon (web standard)
notwaldorf
95
6.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Git: the NoSQL Database
bkeepers
PRO
430
65k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Transcript
ϑϩϯτΤϯυΤϯδχΞ͕ React Native Λ৮ͬͯΈͨ RECRUIT Technologies NIGHT vol.5 ח ਖ਼ʢϦΫϧʔτςΫϊϩδʔζɹITιϦϡʔγϣϯ౷ׅ෦ʣ
ࣗݾհ • ໊લɿח ਖ਼ • ৬ۀɿϑϩϯτΤϯυΤϯδχΞ • React/Redux ͱ͔ͬͯWebΞϓϦΛ࡞͍ͬͯΔ •
React Native ͷௐࠪʢ2017/01ʙʣ
ຊͷ༰ • React Native ʹ͍ͭͯ • ͳͥ React Native ͳͷ͔
• React Native ΞʔΩςΫνϟ • σϞΞϓϦհ
ຊͷ༰ • React Native ʹ͍ͭͯ • ͳͥ React Native ͳͷ͔
• React Native ΞʔΩςΫνϟ • σϞΞϓϦհ
React Native ͱ • Facebook͕த৺ͱͳͬͯ։ൃΛ͍ͯ͠ΔωΠςΟϒΞϓϦ։ൃͷͨΊͷ ϑϨʔϜϫʔΫ • ಛ • Webٕज़/ࣝ(HTML/CSS/JavaScript/React)ΛͬͯɺiOS/Android
ͷΞϓϦΛ։ൃͰ͖Δ • Native UI (WebViewͰͳ͍) • ϋΠύϑΥʔϚϯε • ։ൃޮ͕ྑ͍(Live Reload, Hot Reloading)
— Tom Occhino (Engineering Manager at Facebook) Learn Once, Write
Anywhere ” “
• Web ΞϓϦͰ React Λ࠾༻͢Δέʔε͕૿͍͑ͯΔ • React Λॻ͚Δਓࡐ͕૿͍͑ͯΔ • ਓһ֬อָ͕ʹͳΔ
• React Native Λ͏͜ͱʹΑͬͯ React(Web) Λ͑ΔΤϯδχΞ ͷࣄ෯Λ֦େͰ͖Δ
React Native(Platforms) • iOS/Android/tvOS • built in
React Native for Windows • react-native-windows • https://github.com/ReactWindows/react-native-windows
React Native for MacOS • react-native-macos • https://github.com/ptmt/react-native-macos
React Native for MacOS • react-native-touchbar • https://github.com/ptmt/react-native-touchbar
Showcase https://facebook.github.io/react-native/showcase.html
Instagram https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7
Push Notification Settings https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7 • طଘΞϓϦͷ౷߹ • ·ͣ؆୯ͳը໘͔ΒऔΓֻ͔ͬͨ • ݩʑWebView
• UI͕γϯϓϧ • φϏήʔγϣϯগͳ͍
Edit Profile & Photos Of https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7 • ωΠςΟϒͰ࡞ͬͨը໘Λ React Native
Խ • ύϑΥʔϚϯεΛଌఆ • τϨʔυΦϑ͕Ͳͷ͘Β͍͔
Instagram(code sharing) https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7 • iOS/Android ؒͰڞ௨ԽͰ ͖ͨίʔυ
WebView → React Native https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7 • WebView ͷ • ىಈ͕͍
• UXʹωΠςΟϒײ͕ͳ͍ • React Native Խ͢Δ͜ͱʹΑΓ • ىಈ࣌ؒͱUXΛେ෯ʹվળ
True Native → React Native https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7 • ίʔυͷڞ௨Խ • Live
Reload, Hot Reloadingͷ ͓͔͛ͰίϯύΠϧɺΠϯετʔ ϧαΠΫϧ͕ૣ͘ͳΓ։ൃύ ϑΥʔϚϯε্ • ΑΓૣ͘ػೳΛϦϦʔεͰ͖Δ Α͏ʹͳͬͨ
DEMO
React(Web)/React Nativeͱͷҧ͍ ϙΠϯτ View ComponentɺϥΠϑελΠϧͷߟ͑ํಉ༷ ཁૉ React Native ͷ Component
ʹॻ͖͑ Style CSSͷ͕ࣝͦͷ··͑Δ Flexbox ʹΑΔ Component ͷஔ Data Flow fluxΞʔΩςΫνϟͷར༻͕Մೳ Navigation ʢը໘ભҠʣ react-routerϥΠΫͳϞδϡʔϧ͕͋Δ
View • JSXʹΑΔ࣮ React React Native <div> <span> <img> <View>
<Text> <Image>
View render() { return ( <View style={styles.container}> <Text style={styles.title}> My
Counter App! </Text> <Text style={styles.value}> {this.state.count} </Text> <Button title="Add +1" onPress={() => this.inc()} /> </View> ); }
Style const styles = StyleSheet.create({ container: { flex: 1, alignItems:
'center', paddingTop: 65, backgroundColor: '#F5FCFF', }, title: { fontSize: 25, margin: 10, }, value: { color: '#333333', marginBottom: 5, fontSize: 40, }, }); • CSS in JS • StyleSheet.createͰఆٛͨ͠ ελΠϧΛͦΕͧΕͷ ComponentʹదԠ͢Δ • ComponentͷஔFlexbox Ͱࢦఆ͢Δ
Style const styles = StyleSheet.create({ container: { flex: 1, alignItems:
'center', paddingTop: 65, backgroundColor: '#F5FCFF', }, title: { fontSize: 25, margin: 10, }, value: { color: '#333333', marginBottom: 5, fontSize: 40, }, }); • CSS in JS • StyleSheet.createͰఆٛͨ͠ ελΠϧΛͦΕͧΕͷ ComponentʹదԠ͢Δ • ComponentͷஔFlexbox Ͱࢦఆ͢Δ
Style render() { return ( <View style={styles.container}> <Text style={styles.title}> My
Counter App! </Text> <Text style={styles.value}> {this.state.count} </Text> <Button title="Add +1" onPress={() => this.inc()} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', paddingTop: 65, backgroundColor: '#F5FCFF', }, title: { fontSize: 25, margin: 10, }, value: { color: '#333333', marginBottom: 5, fontSize: 40, }, }); StyleSheet render()
Style const styles = StyleSheet.create({ container: { flex: 1, alignItems:
'center', paddingTop: 65, backgroundColor: '#F5FCFF', }, title: { fontSize: 25, margin: 10, }, value: { color: '#333333', marginBottom: 5, fontSize: 40, }, }); • CSS in JS • StyleSheet.createͰఆٛͨ͠ ελΠϧΛͦΕͧΕͷ ComponentʹదԠ͢Δ • ComponentͷஔFlexbox Ͱࢦఆ͢Δ
Style(Flexbox:flexDirection) const styles = StyleSheet.create({ container: { flex: 1, flexDirection:
'row', alignItems: 'center', paddingTop: 65, backgroundColor: '#F5FCFF', }, title: { fontSize: 25, margin: 10, }, value: { color: '#333333', marginBottom: 5, fontSize: 40, }, });
Style(Flexbox:justifyContent) const styles = StyleSheet.create({ container: { flex: 1, alignItems:
‘center', justifyContent: ‘space-between’, paddingTop: 65, backgroundColor: '#F5FCFF', }, title: { fontSize: 25, margin: 10, }, value: { color: '#333333', marginBottom: 5, fontSize: 40, }, });
Style(FAQ) • CSS Modules ͕͍͍ͨʁ • ελΠϧఆٛΛผϑΝΠϧ(.css)ʹͯ͠importͯ͠ར༻͢Δํ๏ • React Native
ͷελΠϧఆٛ CSS ʹࣅͯΔ͚ͲͬͺΓผ • ίϯϙʔωϯτʹ༩Ͱ͖ͳ͍ϓϩύςΟ͕͋ΔͱܯࠂΛͩ͠ ͯ͘ΕΔ • ҰԠɺ࣮ݱͰ͖Δύοέʔδ͋Δ • https://github.com/sabeurthabti/react-native-css
Style(FAQ)
Style(FAQ) ར༻Մೳͳkey
• ٙࣅཁૉ(:after/:before)͕͍͍ͨʁ • ٙࣅཁૉఘΊͯɺී௨ʹཁૉΛॻ͔͘͠ͳ͍ • webfontΛ:beforeʹೖΕΔͱ͔webͩͱΑ͘Δ͚ͲͰ͖ͳ͍ Style(FAQ)
• ٙࣅΫϥε͕͍͍ͨʁ • JSଆͰఆͯ͠ελΠϧࢦఆ͢Δඞཁ͕͋Δ • React Native ൛ Radium Έ͍ͨͳͷଘࡏ͢Δ
• https://github.com/vitalets/react-native-extended-stylesheet Style(FAQ) :first-child i === 0 :last-child i === arr.length - 1 :nth-child(even) i % 2 :nth-child(odd) !(i%2)
• shorthand͕͍͍ͨʁ • ղܾ͠Α͏ͱ͍ͯ͠ΔϞδϡʔϧ͋Δ(margin, padding͔͠ରԠ͠ ͍ͯͳ͍͚Ͳɾɾɾ) • https://github.com/narendrashetty/react-native-styles-shorthand • ඪ४Ͱ͍͔ͭ͘ରԠ
• marginHorizontal, marginVertical • paddingHorizontal, paddingVertical Style(FAQ)
• CSS ʹ׳Ε͗͢Δͱ React Native ͷελΠϧఆٛ࠷ॳށ͏͔ ͠Εͳ͍ • ֎෦ϞδϡʔϧͰղܾ͢Δબࢶ͋Δ͕ɺReact Native
ͷόʔ δϣϯ্͕͕Δ͜ͱͰղܾ͞ΕΔ͜ͱ͋ΔͷͰɺ·ͣඪ४ͷ ΓํͰͬͨ΄͏͕ྑ͍ Style
iOS/Androidͷҧ͍ • Write Once, Run Anywhere? - No! • ϓϥοτϑΥʔϜ͝ͱʹUI/UXͷϕετϓϥΫςΟεҧ͏
• φϏήʔγϣϯʢΔϘλϯʣ • ϋϯόʔΨʔϝχϡʔ / λϒϝχϡʔ
iOS/Android • iOS/AndroidͰҟͳΔίʔυΛॻ͘ํ๏2ͭ͋Δ • Platform.OS, Platform.select • ϑΝΠϧࣗମΛ͚Δ • example.ios.js
/ example.android.js
Platform.OS, Platform.select if (Platform.OS === ‘android’) { // Android ͷΈ࣮ߦ͢Δίʔυ
} else if (Platform.OS === ‘ios’) { // iOS ͷΈ࣮ߦ͢Δίʔυ } // files ComponentIOS.js ComponentAndroid.js // component const Component = Platform.select({ ios: () => require('ComponentIOS'), android: () => require('ComponentAndroid'), })(); <Component />;
ϑΝΠϧࣗମΛ͚Δ // Files example.ios.js example.android.js // Usage import example from
'./example'; // Ϗϧυ࣌ʹఆ͞ΕΔ $ react-native run-ios $ react-native run-android
ຊͷ༰ • React Native ʹ͍ͭͯ • ͳͥ React Native ͳͷ͔
• React Native ΞʔΩςΫνϟ • σϞΞϓϦհ
ͳͥ React Native ͳͷ͔ • Webٕज़ΛͬͯϞόΠϧΞϓϦ։ൃΛՄೳʹ͢ΔϑϨʔϜϫʔΫ ͍͔ͭ͋͘Δ • React Native
• NativeScript • Ionic • PhoneGap/Cordova Native UI WebView
ͳͥ React Native ͳͷ͔ • Ϣʔβʔͷଟ͍ΞϓϦͰ࠾༻͞Ε͍ͯΔʢFB, Instagram, Airbnbʣ • (R-Tech)FEඪ४Ͱ͋Δ
React/Redux ͷαʔϏεͰ͋ΕɺWeb൛Ͱ ։ൃͨ͠ίʔυͷڞ༗Խ͕Մೳ • FEඪ४Ͱ։ൃͰ͖ΔΤϯδχΞ૿Ճத
ͳͥ React Native ͳͷ͔ • Web ΞϓϦΛ࡞ͬͨޙʹεϚϗΞϓϦ൛ཉ͍͠ͱ͍͏ཁ͋Δ • WebView ϕʔεͷαʔϏε͕ଟ͍ͷͰ
React Native ԽʹΑΔύ ϑΥʔϚϯε্͕ૂ͑Δ • ੑೳྑ͘ͳ͍ͬͯͷͰɺࢿޮՌΞϓϦಛੑʹґଘ͢Δ
ຊͷ༰ • React Native ʹ͍ͭͯ • ͳͥ React Native ͳͷ͔
• React Native ΞʔΩςΫνϟ • σϞΞϓϦհ
React Native ΞʔΩςΫνϟ Android/iOS Native JavaScriptCore (JSC) Bridge App
Android/iOS Native JavaScriptCore (JSC) Bridge(IPC) JS Runtime (Production) App
Android/iOS Native V8(Chrome) Bridge(WebSocket) JS Runtime (Debug Mode) App
JS Runtime (Debug Mode) Tap!
Chrome Dev ToolsʢWebSocketʣ
Chrome Dev ToolsʢBreak Pointsʣ
Data Flow touch update
Data Flow Touch Event Main Thread Native Modules MessageQueue JS
Thread UITouch
Data Flow Touch Event Handle Event Main Thread Native Modules
MessageQueue JS Thread UITouch [ ‘EventEmitter’, ‘receiveTouches’, [‘topTouchStart’, {‘target’: 12, ’x’: 42, ‘y’: 106}] ]
Data Flow Touch Event Handle Event Main Thread Native Modules
MessageQueue JS Thread UITouch setState(), render()
Data Flow Touch Event Handle Event Main Thread Native Modules
MessageQueue JS Thread UITouch UIManager.u pdate…. setState(), render() [ ‘UIManager’, ‘update’, [viewID, attributes] ]
Data Flow Touch Event Handle Event Main Thread Native Modules
MessageQueue JS Thread UITouch UIManager.u pdate…. setState(), render() [ ‘UIManager’, ‘update’, [viewID, attributes] ]
Data Flow Touch Event Handle Event Main Thread Native Modules
MessageQueue JS Thread UITouch UIManager.u pdate…. setState(), render() [ ‘UIManager’, ‘update’, [8, {‘text’: ‘6’}] ]
Data Flow Touch Event Handle Event Main Thread Native Modules
Event Queue JS Thread UITouch UIManager.u pdate…. setState(), render() Update UI dispatch_async()
Data Flow Touch Event Handle Event Main Thread Native Modules
Event Queue JS Thread UITouch UIManager.u pdate…. setState(), render() Update UI [UIManager updateView: @8, props:@{@“text”: @“6”}]
ຊͷ༰ • React Native ʹ͍ͭͯ • ͳͥ React Native ͳͷ͔
• React Native ΞʔΩςΫνϟ • σϞΞϓϦհ
σϞΞϓϦ • Web(React) Ͱ࡞ͬͨαʔϏεΛ React Native Ͱ࣮த Web React Native
• ײ • Web ͷ React Λͬͨ͜ͱ͕͋Ε͙͢ʹॻ͚Δ/Θ͔Δ • Web ʹ͍ۙײ֮Ͱͷ։ൃ
• npm • Cmd-RͰϦϩʔυɺLive Reload, Hot Reloading DEMOΞϓϦ
• ײଓ͖ • ը໘100%࡞Γ͠ • Web Ͱ࡞ͬͨίϯϙʔωϯτΛࢀߟʹͰ͖Δ • Web ൛Λ
Flexbox Ͱ࡞͍ͬͯͳ͍ͱߟ͑Δ͜ͱ͕૿͑Δ • ڞ௨ԽͰ͖Δίʔυ͕ଟ͍ • Redux(Actions, Reducers)ɺBFF ͱͷ௨৴෦ • mono-repo ͰߏΛߟ͑Δͷ͋Γ DEMOΞϓϦ
• ײଓ͖ • Objective-C(Swift),Java ͷ͕ࣝඞཁʹͳΔͱ͜Ζ͍·ͷͱ͜ Ζͳ͍ • React Native ͕ఏڙ͍ͯ͠ͳ͍APIΛ͍͍ͨͱ͔ɺ
Cocoapods Ͱಋೖͨ͠ϥΠϒϥϦͱ Bridge ͍ͨ͠ͱ͔ͳ͚Ε ɾɾɾ • ࠔͬͨͱ͖ͷͨΊʹνʔϜʹ1ਓ Native ʹৄ͍͠ਓཉ͍͠ DEMOΞϓϦ
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ɻ