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
P2P ではじめる WebRTC のつまづきどころ
tnoho
1
280
AWS表彰プログラムとキャリアについて
naoki_0531
1
150
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
300
OpenTelemetry の Log を使いこなそう
biwashi
5
1.1k
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
170
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
750
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
2
280
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
1
430
スプリントレビューを効果的にするために
miholovesq
9
1.7k
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
270
Jitera Company Deck / JP
jitera
0
280
Expertise as a Service via MCP
yodakeisuke
1
160
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Building an army of robots
kneath
306
45k
Designing for Performance
lara
610
69k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
How STYLIGHT went responsive
nonsquared
100
5.7k
A Tale of Four Properties
chriscoyier
160
23k
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ΞϓϦ
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ɻ