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
720
Other Decks in Programming
See All in Programming
CSC509 Lecture 04
javiergs
PRO
0
300
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
Catch Up: Go Style Guide Update
andpad
0
220
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.6k
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
960
明日から始めるリファクタリング
ryounasso
0
140
Cursorハンズオン実践!
eltociear
2
1k
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.3k
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
170
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
540
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
100
チームの境界をブチ抜いていけ
tokai235
0
160
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Speed Design
sergeychernyshev
32
1.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
BBQ
matthewcrist
89
9.8k
Making Projects Easy
brettharned
119
6.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
The World Runs on Bad Software
bkeepers
PRO
72
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Facilitating Awesome Meetings
lara
56
6.6k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
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ΞϓϦͷΈͷ։ൃͰ͋Γ