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
700
Other Decks in Programming
See All in Programming
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
110
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
XP, Testing and ninja testing
m_seki
3
250
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
940
PipeCDのプラグイン化で目指すところ
warashi
1
280
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
600
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
240
Team operations that are not burdened by SRE
kazatohiei
1
320
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
950
Goで作る、開発・CI環境
sin392
0
240
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
0
160
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
54
13k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Faster Mobile Websites
deanohume
307
31k
BBQ
matthewcrist
89
9.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
A designer walks into a library…
pauljervisheath
207
24k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
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ΞϓϦͷΈͷ։ൃͰ͋Γ