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.6k
フロントエンドエンジニアが 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
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
230
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
5.8k
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.4k
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
460
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
事業継続を支える自動テストの考え方
tsuemura
0
300
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
57k
Featured
See All Featured
Faster Mobile Websites
deanohume
306
31k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
BBQ
matthewcrist
86
9.5k
What's in a price? How to price your products and services
michaelherold
244
12k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
It's Worth the Effort
3n
184
28k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Building Your Own Lightsaber
phodgson
104
6.2k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
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ΞϓϦ
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠ɻ