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
470
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
690
Other Decks in Programming
See All in Programming
20250528 AWS Startupイベント登壇資料:AIコーディングの取り組み
procrustes5
0
160
Effect の双対、Coeffect
yukikurage
4
1.3k
赤裸々に公開。 TSKaigiのオフシーズン
takezoux2
0
110
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
m4maruyama
0
110
Datadog RUM 本番導入までの道
shinter61
1
220
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
150
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
kazumura
1
160
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
740
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
cuebic9bic
3
320
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
180
Use Perl as Better Shell Script
karupanerura
0
690
PT AI без купюр
v0lka
0
220
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Faster Mobile Websites
deanohume
307
31k
Raft: Consensus for Rubyists
vanstee
139
7k
Speed Design
sergeychernyshev
30
990
Designing Experiences People Love
moore
142
24k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
What's in a price? How to price your products and services
michaelherold
245
12k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
770
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
A Tale of Four Properties
chriscoyier
159
23k
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ΞϓϦͷΈͷ։ൃͰ͋Γ