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
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
890
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
860
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.4k
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
320
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
46
31k
NPOでのDevinの活用
codeforeveryone
0
260
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
950
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
XSLTで作るBrainfuck処理系
makki_d
0
210
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
Team operations that are not burdened by SRE
kazatohiei
1
210
エンジニア向け採用ピッチ資料
inusan
0
160
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
Practical Orchestrator
shlominoach
188
11k
Rails Girls Zürich Keynote
gr2m
94
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Writing Fast Ruby
sferik
628
61k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
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อ࣋ͨ͠··
·ͱΊ ʮ͍ɺ͍͢ɺ͏·͍ʯ ↓ ʮ͍ɺ͍͢ɺΜΓʯͰͨ͠
͓ΘΓ ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠