React Native for Webの使いどころ

Transcript

1. React Native for Webͷ ࢖͍Ͳ͜Ζ 2018/10/12 SurviveJS05 @nacam403
2. ࣗݾ঺հ @nacam403 (S.Nakamura) גࣜձࣾCureAppͷ ΤϯδχΞͰ͢ JavaScript , AWS, MongoDBͳͲ
3. React Native for Webͱ͸ʁ React
 ຊՈͷWeb༻ϥΠϒϥϦ React Native
 ReactͰωΠςΟϒΞϓϦΛ࡞ΕΔʢiOS/Androidʣ React Native for Web
 ʮReact Native༻ͷίϯϙʔωϯτΛWebͰ΋ಈ͔ͤ·͢ʯ
 ʮʁʁʁɹWeb༻͸࠷ॳ͔Β͋ΔΑͶɾɾɾʁʯ
4. 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ͳͲ͕جຊཁૉ
5. React Native for WebΛ࢖͏ͱ React Native༻ʹॻ͍ͨίϯϙʔωϯτΛWebͰ΋࢖͑Δ
 ʢ࢓૊ΈΛҰݴͰɿView΍TextͳͲΛɺdivͳͲʹม׵͢Δʣ import React from 'react'; import { View, Text } from 'react-native'; const App = () => ( <View> <Text>Hello, world!</Text> </View> ); ϒϥ΢βͰදࣔͰ͖ͪΌ͏
6. React Native for Webͷ࠾༻ࣄྫ • Ұ൪༗໊ͳͷ͸Twitter Lite • PWA൛ͷTwitterެࣜΫϥΠΞϯτ
 (PWA: Progressive Web App)
7. ͜͜·Ͱͷ·ͱΊ React Native for WebΛ࢖͏ͱ
 React NativeͷίϯϙʔωϯτΛ
 Webʹྲྀ༻Ͱ͖·͢ʢڞ௨ԽͰ͖·͢ʣ ※ Ұ෦ɺະରԠͷίϯϙʔωϯτ΋
8. ຊ୊ Ͱ΋WebͱωΠςΟϒΞϓϦͬͯɺ
 UIͷσβΠϯ͕݁ߏҧΘͳ͍ʁ for Webͷ࢖͍Ͳ͜Ζ͸Ͳͩ͜Ζ͏ʁ
9. ωΠςΟϒΞϓϦͱ
 ϞόΠϧ޲͚WebΞϓϦͷ2ຊཱͯ։ൃ • Twitterʹࣅͨύλʔϯ • ωΠςΟϒΞϓϦΛReact NativeͰ࡞Ε͹ɺ
 ίϯϙʔωϯτΛ͘͢͝ڞ௨ԽͰ͖Δ • ʮTwitterΫϥεͳΒ·ͩ͠΋ɺ
 ɹ͜Μͳ෩ʹ྆ํ։ൃ͢Δͱ͋͜Δʁʯ
 ʮʯ
10. ϞόΠϧ޲͚WebΞϓϦ͚ͩ։ൃ • React Nativeʹ͸ɺϞόΠϧʹదͨ͠ίϯϙʔ ωϯτ͕ἧ͍ͬͯΔʢScrollView, FlatList …ʣ • for WebΛ࢖ͬͯͦΕΒΛWebʹ༌ೖ͠ɺ
 ϞόΠϧΒ͍͠UIΛ࡞͍ͬͯ͘ • ͍ͭͰʹʮকདྷɺfor WebΛ΍ΊͯReact Native ΞϓϦʹม਎ʯͷ෍ੴʹ΋ͳΔʢݱ࣮ຯ͸ബ͍ʣ
11. ఆ൪ίϯϙʔωϯτ͚ͩڞ௨Խ • WebͰ΋ωΠςΟϒͰ΋ͦ͏มΘΒͳ͍ίϯ ϙʔωϯτʹߜͬͯڞ௨Խ͢Δ • ϘλϯɺೖྗཝɺΞΠίϯɾɾɾ • ྫɿاۀ΍૊৫಺Ͱڞ௨ίϯϙʔωϯτूΛ ࡞Δͱ͖
12. React Native༻ͷίϯϙʔωϯτϥΠϒϥϦΛ WebΞϓϦʹྲྀ༻ • ྫɿʮΧϨϯμʔͷίϯϙʔωϯτ͕ཉ͍͠ʯ
 React Native༻ʹ͸react-native-calendar͕͋ͬͨɻ
 ͜ΕΛWebͰ΋࢖ͬͪΌ͓͏ɻ • Web/ωΠςΟϒͦΕͧΕͷϥΠϒϥϦΛ୳͞ͳͯ͘ ͍͍ɻ࢖͍ํΛௐ΂ͳ͍͍ͯ͘ɻ ※ iOS/AndroidͷωΠςΟϒ෦෼ʹґଘͨ͠ϥΠϒϥϦ ͳͲ͸ෆՄ
13. Ξό΢τͳਤͰ੔ཧ Ϋϩε
 ϓϥοτ
 ϑΥʔϜ ୯Ұ
 ϓϥοτ
 ϑΥʔϜ ݱ࣮ຯ͋Δ ϩϚϯؾຯ ωΠςΟϒͱ8FC
 ຊཱͯ ఆ൪ίϯϙʔωϯτ Λڞ௨Խ ࠓ͸8FC͚ͩ
 কདྷωΠςΟϒԽ
 ʢ·ͨ͸ͦͷٯʣ 3FBDU
    /BUJWF༻ϥΠϒϥϦΛ 8FCʹྲྀ༻ ϞόΠϧ8FC ͚ͩ։ൃ
14. ·ͱΊ • React Native for WebΛ࢖͏ͱ
 React NativeͷίϯϙʔωϯτΛ
 Webʹྲྀ༻Ͱ͖·͢ʢڞ௨ԽͰ͖·͢ʣ • ສೳͰ͸ͳ͍΋ͷͷɺࣗ෼ͨͪʹ߹ͬͨ࢖͍ Ͳ͜Ζ͕ݟ͔ͭΕ͹໾ཱͪ·͢ • WebΞϓϦͷΈͷ։ൃͰ΋͋Γ