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
masaru-tech
April 26, 2017
Programming
1
610
「はやい、やすい、うまい?」React Native
kawasaki.rb #047の発表スライドです。
masaru-tech
April 26, 2017
Tweet
Share
More Decks by masaru-tech
See All by masaru-tech
Sidekiqでクラスターモードは使えるのか? / kawasakirb_060
masarutech
0
810
stimulusの感触
masarutech
0
47
kawasakirb053
masarutech
0
5.5k
kawasakirb051
masarutech
0
510
Other Decks in Programming
See All in Programming
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.9k
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.3k
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
750
PicoRuby on Rails
makicamel
2
130
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
52
33k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
780
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Language of Interfaces
destraynor
158
25k
How STYLIGHT went responsive
nonsquared
100
5.6k
Music & Morning Musume
bryan
46
6.6k
Six Lessons from altMBA
skipperchong
28
3.9k
Scaling GitHub
holman
460
140k
Navigating Team Friction
lara
187
15k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Transcript
ʮ͍ɺ͍͢ɺ͏·͍ʁʯ React Native kawasaki.rb #047 @MasaruTech
ΞδΣϯμ ▸ ࣗݾհ ▸ React Nativeͱ ▸ ͍ ▸ ͍͢
▸ ͏·͍ʁ
ࣗݾհ ▸ Rails͓ͬͯࣄͯ͠ΔΤοεΞΠΞʔ ▸ kawasaki.rb#046͔ΒࢀՃ ▸ ͜͜2ϲ݄ͪΐͬͱϓϥΠϕʔτͰReact NativeΛͬͯ ΞϓϦΛ࡞ͬͯΈ͍ͯΔͱ͜Ζ ▸
Swift/Xcodeॳ৺ऀɺAndroidະܦݧ େఉɹকʢΦΦόɹϚαϧʣ
React Native
React Nativeͱ ▸ FacebookͷReact.jsϕʔεͰωΠςΟϒΞϓϦ͕࡞Ͱ͖ ΔϑϨʔϜϫʔΫ (React 3ܑఋͷ࣍உ) ▸ Webͷࣝ/ٕज़(JS, CSS
LikeͳStyle, npm)Ͱ։ൃͰ͖Δ ▸ ΫϩεϓϥοτϑΥʔϜͰͳ͍ (Learn once, write anywhereɿҰֶɺͲ͜Ͱॻ͚Δ)
͍ɺ͍͢ɺ͏·͍ʁ
͍
։ൃ͍ ▸ ίϯύΠϧॳճىಈ࣌ͷΈ Ҏ߱ίʔυΛมߋͯ͠࠶ίϯύΠϧͤͣʹߋ৽Մೳ ▸ npmͷϥΠϒϥϦ͕͑Δ ▸ ωΠςΟϒͷAPIΒͳͯ͘Կͱ͔ͳΔ ެࣜͷυΩϡϝϯτಡΊେମͲ͏ʹ͔ɾɾɾ ▸
σόοά׳ΕͨChromeͷDeveloper Tool͕͑Δ
ಈ࡞͍ ▸ UIωΠςΟϒଆͰඳը͞ΕΔ ωΠςΟϒͷUIΛJS͕ίϯτϩʔϧ ▸ ListɺύϑΥʔϚϯεͷ࠷దԽ͕͞Ε͍ͯΔ ▸ JSͰΰϦΰϦʹॲཧΛॻ͘ͱ͘ͳΔ(Β͍͠)
͍͢
͡Ί͍͢ ▸ JSͰهड़͢ΔͷͰɺWebͷࣝ͑͋͞Εswift/javaΛΒ ͳͯ͘ΞϓϦΛ࡞ΕΔ ▸ BabelReact Native͕Α͠ͳʹͯ͘͠ΕΔͷͰɺReact.jsͷ Α͏ʹઃఆΛؾʹͤͣES2015/2016Ͱॻ͚Δ
ViewΛΈ͍͢ ▸ ͜Εʹਚ͖Δ ▸ ॳ৺ऀʹSwiftɺXcodeͷIB(Interface Builder)ͰViewΛ Ήͷ͍͠ UIܥΛશͯIBͰࢦఆͰ͖ͳ͍ɻɻɻ ▸ CSSʹࣅͨهड़Ͱॻ͚ΔͷͰWebͷΑ͏ʹσβΠϯ͕Ͱ͖Δ
Viewͷྫ return ( <View style={styles.container}> <Image style={styles.thumbnail} source={{uri: "https://pbs.twimg.com/profile_images/ xxxxxxxxx.jpeg"}}/>
<View style={styles.mainContainer}> <View style={styles.header}> <View style={styles.userInfo}> <Text style={styles.username}> {item.username} </Text> <Text style={styles.accountNo}> {item.accountNo} </Text> </View> <View> <Text style={styles.postedAt}> {item.postedAt} </Text> </View> </View> <View style={styles.messageContainer}> <Text> {item.message} </Text> </View> </View> </View> );
const styles = StyleSheet.create({ container: { padding: 10, borderBottomColor: '#ededed',
borderBottomWidth: 1, backgroundColor: 'transparent', flexDirection: 'row', }, thumbnail: { width: 34, height: 34, borderRadius: 17 }, mainContainer: { flex: 1, flexDirection: 'column', marginLeft: 10, }, header: { flexDirection: 'row', }, userInfo: { flex: 1, flexDirection: 'row' }, username: { fontSize: normalize(16), color: colors.grey1, fontWeight: '800' }, accountNo: { color: colors.grey3, fontSize: normalize(12), marginLeft: 5, marginTop: 3 }, postedAt: { color: colors.grey3, fontSize: normalize(12), marginTop: 3 }, messageContainer: { flexDirection: 'row', marginTop: 10 }, });
͏·͍ʁ
͏·͍Ͱʒ͔͕ͨͬͨࢥ͍͔ͭͳ͔ͬͨ ͳͷͰศརͳϦϩʔυػೳΛհ
Ϧϩʔυ ▸ Reload(⌘+R) ௨ৗͷϦϩʔυ ▸ Live Reload ϑΝΠϧʹมߋ͕͋ΔͱࣗಈͰϦϩʔυ State͕ॳظঢ়ଶʹͳΔ ▸
Hot Reload ϑΝΠϧʹมߋ͕͋ΔͱࣗಈͰϦϩʔυ Stateอ࣋ͨ͠··
·ͱΊ ʮ͍ɺ͍͢ɺ͏·͍ʯ ↓ ʮ͍ɺ͍͢ɺΜΓʯͰͨ͠
͓ΘΓ ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠