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
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
880
Rustから学ぶ 非同期処理の仕組み
skanehira
1
150
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.2k
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
380
「Linux」という言葉が指すもの
sat
PRO
4
140
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
270
Agile PBL at New Grads Trainings
kawaguti
PRO
1
450
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
430
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
500
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
1.1k
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
230
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
Become a Pro
speakerdeck
PRO
29
5.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Designing for humans not robots
tammielis
253
25k
Documentation Writing (for coders)
carmenintech
74
5k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Visualization
eitanlees
148
16k
Designing Experiences People Love
moore
142
24k
Thoughts on Productivity
jonyablonski
70
4.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
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ΞϓϦ
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ɻ