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
🔨 小さなビルドシステムを作る
momeemt
4
680
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
180
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
320
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
AIコーディングAgentとの向き合い方
eycjur
0
270
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
アセットのコンパイルについて
ojun9
0
120
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
690
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
AWS発のAIエディタKiroを使ってみた
iriikeita
1
180
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
440
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Why Our Code Smells
bkeepers
PRO
339
57k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
How to Ace a Technical Interview
jacobian
279
23k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
KATA
mclloyd
32
14k
Building an army of robots
kneath
306
46k
Code Reviewing Like a Champion
maltzj
525
40k
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ΞϓϦͷΈͷ։ൃͰ͋Γ