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 for Webの使いどころ
Search
nacam403
October 12, 2018
Programming
1
480
React Native for Webの使いどころ
nacam403
October 12, 2018
Tweet
Share
More Decks by nacam403
See All by nacam403
per-env-build.pdf
nacam403
1
1.3k
bitrise-code-signing.pdf
nacam403
0
710
Other Decks in Programming
See All in Programming
testingを眺める
matumoto
1
130
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
350
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
140
Rancher と Terraform
fufuhu
2
220
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.3k
AIでLINEスタンプを作ってみた
eycjur
1
230
CSC305 Summer Lecture 12
javiergs
PRO
0
140
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
18
10k
個人軟體時代
ethanhuang13
0
320
TDD 実践ミニトーク
contour_gara
1
290
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.1k
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Building an army of robots
kneath
306
46k
Docker and Python
trallard
45
3.5k
Writing Fast Ruby
sferik
628
62k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
A Tale of Four Properties
chriscoyier
160
23k
For a Future-Friendly Web
brad_frost
180
9.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Faster Mobile Websites
deanohume
309
31k
How STYLIGHT went responsive
nonsquared
100
5.8k
Transcript
React Native for Webͷ ͍Ͳ͜Ζ 2018/10/12 SurviveJS05 @nacam403
ࣗݾհ @nacam403 (S.Nakamura) גࣜձࣾCureAppͷ ΤϯδχΞͰ͢ JavaScript , AWS, MongoDBͳͲ
React Native for Webͱʁ React ຊՈͷWeb༻ϥΠϒϥϦ React Native ReactͰωΠςΟϒΞϓϦΛ࡞ΕΔʢiOS/Androidʣ React
Native for Web ʮReact Native༻ͷίϯϙʔωϯτΛWebͰಈ͔ͤ·͢ʯ ʮʁʁʁɹWeb༻࠷ॳ͔Β͋ΔΑͶɾɾɾʁʯ
React Native༻ͷίϯϙʔωϯτ import React from 'react'; import { View, Text
} from 'react-native'; const App = () => ( <View> <Text>Hello, world!</Text> </View> ); import React from 'react'; const App = () => ( <div> <p>Hello, world!</p> </div> ); React div, pͳͲ͕جຊཁૉ React Native View, TextͳͲ͕جຊཁૉ
React Native for WebΛ͏ͱ React Native༻ʹॻ͍ͨίϯϙʔωϯτΛWebͰ͑Δ ʢΈΛҰݴͰɿViewTextͳͲΛɺdivͳͲʹม͢Δʣ import React from
'react'; import { View, Text } from 'react-native'; const App = () => ( <View> <Text>Hello, world!</Text> </View> ); ϒϥβͰදࣔͰ͖ͪΌ͏
React Native for Webͷ࠾༻ࣄྫ • Ұ൪༗໊ͳͷTwitter Lite • PWA൛ͷTwitterެࣜΫϥΠΞϯτ (PWA:
Progressive Web App)
͜͜·Ͱͷ·ͱΊ React Native for WebΛ͏ͱ React NativeͷίϯϙʔωϯτΛ Webʹྲྀ༻Ͱ͖·͢ʢڞ௨ԽͰ͖·͢ʣ ※ Ұ෦ɺະରԠͷίϯϙʔωϯτ
ຊ ͰWebͱωΠςΟϒΞϓϦͬͯɺ UIͷσβΠϯ͕݁ߏҧΘͳ͍ʁ for Webͷ͍Ͳ͜ΖͲͩ͜Ζ͏ʁ
ωΠςΟϒΞϓϦͱ ϞόΠϧ͚WebΞϓϦͷ2ຊཱͯ։ൃ • Twitterʹࣅͨύλʔϯ • ωΠςΟϒΞϓϦΛReact NativeͰ࡞Εɺ ίϯϙʔωϯτΛ͘͢͝ڞ௨ԽͰ͖Δ • ʮTwitterΫϥεͳΒ·ͩ͠ɺ
ɹ͜Μͳ෩ʹ྆ํ։ൃ͢Δͱ͋͜Δʁʯ ʮʯ
ϞόΠϧ͚WebΞϓϦ͚ͩ։ൃ • React NativeʹɺϞόΠϧʹదͨ͠ίϯϙʔ ωϯτ͕ἧ͍ͬͯΔʢScrollView, FlatList …ʣ • for WebΛͬͯͦΕΒΛWebʹ༌ೖ͠ɺ
ϞόΠϧΒ͍͠UIΛ࡞͍ͬͯ͘ • ͍ͭͰʹʮকདྷɺfor WebΛΊͯReact Native ΞϓϦʹมʯͷੴʹͳΔʢݱ࣮ຯബ͍ʣ
ఆ൪ίϯϙʔωϯτ͚ͩڞ௨Խ • WebͰωΠςΟϒͰͦ͏มΘΒͳ͍ίϯ ϙʔωϯτʹߜͬͯڞ௨Խ͢Δ • ϘλϯɺೖྗཝɺΞΠίϯɾɾɾ • ྫɿاۀ৫Ͱڞ௨ίϯϙʔωϯτूΛ ࡞Δͱ͖
React Native༻ͷίϯϙʔωϯτϥΠϒϥϦΛ WebΞϓϦʹྲྀ༻ • ྫɿʮΧϨϯμʔͷίϯϙʔωϯτ͕ཉ͍͠ʯ React Native༻ʹreact-native-calendar͕͋ͬͨɻ ͜ΕΛWebͰͬͪΌ͓͏ɻ • Web/ωΠςΟϒͦΕͧΕͷϥΠϒϥϦΛ୳͞ͳͯ͘
͍͍ɻ͍ํΛௐͳ͍͍ͯ͘ɻ ※ iOS/AndroidͷωΠςΟϒ෦ʹґଘͨ͠ϥΠϒϥϦ ͳͲෆՄ
ΞότͳਤͰཧ Ϋϩε ϓϥοτ ϑΥʔϜ ୯Ұ ϓϥοτ ϑΥʔϜ ݱ࣮ຯ͋Δ ϩϚϯؾຯ ωΠςΟϒͱ8FC
ຊཱͯ ఆ൪ίϯϙʔωϯτ Λڞ௨Խ ࠓ8FC͚ͩ কདྷωΠςΟϒԽ ʢ·ͨͦͷٯʣ 3FBDU/BUJWF༻ϥΠϒϥϦΛ 8FCʹྲྀ༻ ϞόΠϧ8FC ͚ͩ։ൃ
·ͱΊ • React Native for WebΛ͏ͱ React NativeͷίϯϙʔωϯτΛ Webʹྲྀ༻Ͱ͖·͢ʢڞ௨ԽͰ͖·͢ʣ •
ສೳͰͳ͍ͷͷɺࣗͨͪʹ߹͍ͬͨ Ͳ͜Ζ͕ݟ͔ͭΕཱͪ·͢ • WebΞϓϦͷΈͷ։ൃͰ͋Γ