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
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
230
Autify Company Deck
autifyhq
2
44k
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
1k
“日本一のM&A企業”を支える、少人数SREの効率化戦略 / SRE NEXT 2025
genda
1
270
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.9k
本当にわかりやすいAIエージェント入門
segavvy
1
400
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
400
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
130
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
470
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
1k
Introduction to Bill One Development Engineer
sansan33
PRO
0
260
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
120
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Gamification - CAS2011
davidbonilla
81
5.4k
Practical Orchestrator
shlominoach
189
11k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
Making Projects Easy
brettharned
116
6.3k
GitHub's CSS Performance
jonrohan
1031
460k
Writing Fast Ruby
sferik
628
62k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
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ΞϓϦ
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ɻ