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
ReactNativeで勉強会のビューワーアプリを作ってみて学んだ知見
Search
masarufuruya
November 29, 2017
0
300
ReactNativeで勉強会のビューワーアプリを作ってみて学んだ知見
masarufuruya
November 29, 2017
Tweet
Share
More Decks by masarufuruya
See All by masarufuruya
DevOpsに投資するリソースの無いスタートアップがふりかえりを改革して自己組織化されたチームへ近づいてる話
masarufuruya
1
1.2k
SQL利用者を3倍に増やしデータの民主化を推進した話.pdf
masarufuruya
0
700
BigQuery Scriptingを利用してCloudSQLのテーブルを転送する仕組みを作った話
masarufuruya
0
30
未経験からデータエンジニアに チャレンジして学んだ大切なこと
masarufuruya
0
670
ドラッカー風エクササイズを導入して エンジニアチームの相互理解を促進した話
masarufuruya
0
1.2k
Watsonを使って音声入力できるVRブレストアプリを作っている話
masarufuruya
0
390
非SPAで小さく始めるReactアーキテクチャ
masarufuruya
1
1.2k
ReactNativeでIOSアプリのプッシュ通知を実装する
masarufuruya
0
1.2k
Web+スマホ+VRで一人ブレストアプリを作ってみた
masarufuruya
0
210
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
43
9.7k
The Cult of Friendly URLs
andyhume
74
5.7k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
The Brand Is Dead. Long Live the Brand.
mthomps
48
28k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
StorybookのUI Testing Handbookを読んだ
zakiyama
11
4.6k
For a Future-Friendly Web
brad_frost
171
8.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
Six Lessons from altMBA
skipperchong
20
3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
The Cost Of JavaScript in 2023
addyosmani
14
3.8k
Transcript
ReactNativeͰษڧձͷϏϡʔϫ ʔΞϓϦΛ࡞ͬͯΈֶͯΜͩݟ ݹՈ େ
ࣗݾհ ݹՈ େ (@enzerubank) ϑϦʔϥϯε ϑϩϯτΤϯυΤϯδχΞ ωΠςΟϒ(Swift, Kotlin)ͷࣝθϩ ࣄͰReactNativeͷΞϓϦ։ൃΛΔ͜ͱʹʂ
ࠓճͷൃදͰ͢͜ͱ ◦ ࣮ͰֶΜͩReactNativeͷϕʔεͷΞʔ ΩςΫνϟΛαϯϓϧΛݩʹ͠·͢
͜Μͳ͜ͱࠓճ͠·ͤΜ ◦ ReactNative, Reduxʹؔ͢Δجૅతͳ ◦ ࣮ࡍͷϦϦʔεʹ͚ͨௐͷ
ࠓճಋೖͨ͠ϥΠϒϥϦ ◦ react-native ◦ axios ◦ redux ◦ redux-saga ◦
react-navigation
ࠓճಋೖͨ͠ϥΠϒϥϦ ◦ react-native ◦ axios ◦ redux ◦ redux-saga ◦
react-navigation redux֎ͷ෭࡞༻Λ୲ ը໘ભҠΛ୲ɻWebͰ͑Δ ঢ়ଶมߋͷͨΊͷϧʔϧΛܾΊΔ શମͷϕʔε
ॲཧͷྲྀΕ View Action ඇಉظॲཧ Store Reducer Saga Πϕϯτൃੜ ඞཁʹԠͯ͡SagaΛ్தʹڬΉ ΠϕϯτΛ͢
ঢ়ଶΛߋ৽ ϏϡʔΛ࠶ඳը
ॲཧͷྲྀΕ View Action ඇಉظॲཧ Store Reducer Πϕϯτൃੜ ඞཁʹԠͯ͡SagaΛ్தʹڬΉ ΠϕϯτΛ͢ ঢ়ଶΛߋ৽
ϏϡʔΛ࠶ඳը Saga
σϞ
redux-sagaͷ֓ཁ • Root͕λεΫΛForkͯ͠ฒྻॲཧΛ࣮ݱ͢Δ • λεΫৗʹΠϕϯτͷൃੜΛͭ Fork RootSaga Call Take HomeScreenSaga
redux-sagaͰActionΛड͚औΔ • takeͰϢʔβʔͷΫϦοΫΠϕϯτΛݕ • ΠϕϯτΛऔಘ͢ΔؔΛ࣮ߦ
redux-sagaͰॲཧΛ࣮ߦ͢Δ • callͰΠϕϯτͷऔಘ • putͰऔಘ߲ͨ͠ͰReducerΛߋ৽͢Δ
react-navigationʹΑΔը໘ભҠ • Ұཡͷ্ʹهࣄৄࡉը໘Λදࣔ • StackNavigationΛར༻
ExpoͰಈ࡞֬ೝ (հ͖͠Εͳ͍ͷͰ) • QRίʔυ͔Βμϯϩʔυ • Ұ௨Γͷಈ͖͕࣮ػͰࢼͤΔ https://expo.io/@react-navigation/NavigationPlayground
react-navigation+Reduxͷҙ • Quick Start௨ΓͰ্ख͍͔͘ͳ͍ • Reduxͱͷ࿈ܞφϏ༻ͷReducer͕ඞཁ ※ https://reactnavigation.org/docs/guides/redux
WebViewʹ͍ͭͯ • ৄࡉը໘ཁૉ͕ଟ͍ͷͰར༻ • ࠓճγϯϓϧʹURLಡΈࠐΈ • AndroidChromeͰදࣔ͢Δ ※ Chromeͷํ͕ύϑΥʔϚϯε͕ྑ͍Β͍͠ (ৄ͍͠ํͥͻڭ͍͑ͯͩ͘͞)
※
ࠓޙऔΓΈ͍ͨ͜ͱ ◦ ਤɾΧϝϥػೳΛͬͨΞϓϦ։ൃ ◦ SketchσʔλͷReactNativeग़ྗ
͝੩ௌ͋Γ͕ͱ͏͍͟͝· ͨ͠ʂ