ReactNativeで勉強会のビューワーアプリを作ってみて学んだ知見

Transcript

1. ReactNativeͰษڧձͷϏϡʔϫ ʔΞϓϦΛ࡞ͬͯΈֶͯΜͩ஌ݟ ݹՈ େ
2. ࣗݾ঺հ ݹՈ େ (@enzerubank) ϑϦʔϥϯε ϑϩϯτΤϯυΤϯδχΞ ωΠςΟϒ(Swift, Kotlin)ͷ஌ࣝ͸θϩ ࢓ࣄͰReactNativeͷΞϓϦ։ൃΛ΍Δ͜ͱʹʂ
3. ࠓճͷൃදͰ࿩͢͜ͱ ◦ ࣮຿ͰֶΜͩReactNativeͷϕʔεͷΞʔ ΩςΫνϟΛαϯϓϧΛݩʹ࿩͠·͢
4. ͜Μͳ͜ͱ͸ࠓճ͸࿩͠·ͤΜ ◦ ReactNative, Reduxʹؔ͢Δجૅతͳ࿩ ◦ ࣮ࡍͷϦϦʔεʹ޲͚ͨௐ੔ͷ࿩
5. ࠓճಋೖͨ͠ϥΠϒϥϦ ◦ react-native ◦ axios ◦ redux ◦ redux-saga ◦ react-navigation
6. ࠓճಋೖͨ͠ϥΠϒϥϦ ◦ react-native ◦ axios ◦ redux ◦ redux-saga ◦ react-navigation redux֎ͷ෭࡞༻Λ୲౰ ը໘ભҠΛ୲౰ɻWebͰ΋࢖͑Δ ঢ়ଶมߋͷͨΊͷϧʔϧΛܾΊΔ શମͷϕʔε
7. ॲཧͷྲྀΕ View Action ඇಉظॲཧ Store Reducer Saga Πϕϯτൃੜ ඞཁʹԠͯ͡SagaΛ్தʹڬΉ ΠϕϯτΛ౉͢ ঢ়ଶΛߋ৽ ϏϡʔΛ࠶ඳը
8. ॲཧͷྲྀΕ View Action ඇಉظॲཧ Store Reducer Πϕϯτൃੜ ඞཁʹԠͯ͡SagaΛ్தʹڬΉ ΠϕϯτΛ౉͢ ঢ়ଶΛߋ৽ ϏϡʔΛ࠶ඳը Saga
9. σϞ
10. redux-sagaͷ֓ཁ • Root͕λεΫΛForkͯ͠ฒྻॲཧΛ࣮ݱ͢Δ • λεΫ͸ৗʹΠϕϯτͷൃੜΛ଴ͭ Fork RootSaga Call Take HomeScreenSaga
11. redux-sagaͰActionΛड͚औΔ • takeͰϢʔβʔͷΫϦοΫΠϕϯτΛݕ஌ • ΠϕϯτΛऔಘ͢Δؔ਺Λ࣮ߦ
12. redux-sagaͰॲཧΛ࣮ߦ͢Δ • callͰΠϕϯτͷऔಘ • putͰऔಘ߲ͨ͠໨ͰReducerΛߋ৽͢Δ
13. react-navigationʹΑΔը໘ભҠ • Ұཡͷ্ʹهࣄৄࡉը໘Λදࣔ • StackNavigationΛར༻
14. ExpoͰಈ࡞֬ೝ (঺հ͖͠Εͳ͍ͷͰ) • QRίʔυ͔Βμ΢ϯϩʔυ • Ұ௨Γͷಈ͖͕࣮ػͰࢼͤΔ https://expo.io/@react-navigation/NavigationPlayground
15. react-navigation+Reduxͷ஫ҙ఺ • Quick Start௨ΓͰ͸্ख͍͔͘ͳ͍ • Reduxͱͷ࿈ܞ͸φϏ༻ͷReducer͕ඞཁ ※ https://reactnavigation.org/docs/guides/redux
16. WebViewʹ͍ͭͯ • ৄࡉը໘͸ཁૉ͕ଟ͍ͷͰར༻ • ࠓճ͸γϯϓϧʹURLಡΈࠐΈ • Android͸ChromeͰදࣔ͢Δ ※ Chromeͷํ͕ύϑΥʔϚϯε͕ྑ͍Β͍͠ (ৄ͍͠ํͥͻڭ͍͑ͯͩ͘͞) ※
17. ࠓޙऔΓ૊Έ͍ͨ͜ͱ ◦ ஍ਤɾΧϝϥػೳΛ࢖ͬͨΞϓϦ։ൃ ◦ SketchσʔλͷReactNativeग़ྗ
18. ͝੩ௌ͋Γ͕ͱ͏͍͟͝· ͨ͠ʂ