2020/04/28 MixLeap Live Study #59 - Reactとその仲間たち での発表資料です。 (https://yahoo-osaka.connpass.com/event/170013/) 1. Redux 2. React Navigation 3. Firestore について触れています。

1. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
2020年4⽉28⽇
⻄仲 幸太
React Nativeで家計簿
アプリを作って得たもの

2. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
Copyright © 2017 Yahoo Japan Corporation. All Rights Reserved.
⾃⼰紹介
名前
西仲 幸太
担当プロダクト
メール配信管理PF
好きな言語
Javascript
(React.js, Node.js, Typescript)
写真

3. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
アジェンダ
3
1. アプリの紹介(デモ)2分
2. 技術の紹介 6分
- Redux
- React Navigation
- Firebase
3. まとめ 1分

4. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
今⽇のゴール
4
こういう技術を使えば、
こんな感じのものが作れる、
という感覚を持ってもらえれば嬉しいです。

5. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
作成中の家計簿アプリの紹介
5
【背景】
家族で家計費を計算するときに複雑な計算を
しているため、既存のものでは難しそうと感じ
たから。
（つまり、React Nativeを使いたかった……)

6. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
作成中の家計簿アプリの紹介
6

7. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
技術の紹介
7
ユーザ
シンプルな構成
App

8. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
技術の紹介
8
利用している技術
React Navigation Redux

9. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
技術の紹介
9
利用している技術
React Navigation Redux

10. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
技術の紹介①Redux
10
Hooksのリリース
React: 2019年2⽉
Redux: 2019年6⽉
https://github.com/reduxjs/react-
redux/releases/tag/v7.1.0

11. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
技術の紹介①Redux
11

12. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
技術の紹介①Redux
12
以前までの書き⽅ならこんな感じ

13. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
技術の紹介①Redux
13
記述量がかなり減ってます︕︕

14. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
技術の紹介②ReactNavigation
14
React Navigation V5のリリース
【New!!】2020年2⽉6⽇
https://reactnavigation.org/blog/2020/02/
06/react-navigation-5.0
=>タグで囲む形式になって可読性が上がりました。

15. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
技術の紹介③Firebase
20
Firestoreを利⽤しています
https://firebase.google.com/docs/firestore/?hl=ja

16. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
技術の紹介③Firebase
21
FirestoreとRDBMSとの違い
Firestore（ドキュメント指向NoSQL）
・エンドユーザー（クライアント）から直接アクセスすることができる
OracleDBなどのRDBMS
・サーバーサイドロジックの裏側に隠蔽する形で利⽤される
バックエンドで考えること（ユーザー認証、データのバリデーション等）にかかる時間を
節約することができる

17. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
技術の紹介③Firebase
22
Firestoreの特徴
考えること
・必要なデータを加⼯不要な形式で取得できるようにすること
機能
・セキュリティルール
- Firestoreへのリクエストが来たときに働くバリデーション
・リアルタイムリスナー(Reactと親和性が⾼い)
- 最新状態をアプリケーションに同期する仕組み
・オフライン対応
- 読み取りはキャッシュ、書き込み要求はキューに蓄積できる

18. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
技術の紹介③Firebase
25
Firestoreの学習コストは低くありませんが、
ぜひ使ってみて下さい。

19. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
まとめというか感想
26
• React NativeもReactです
• Reactの良さ (VirtualDOM, Undirectional
Dataflow, Component Oriented)はそのまま
• ReactNative +Expo + Firestoreでそれなりに⾼
速にアプリ開発を進められます

20. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
https://www.sli.do/ で
#REACT を入力
登壇者への質問
登壇者への個別質問はメンション
（@◯◯さん）を付けてください。
なんでも気軽にどうぞ！
アンケートのお願い
イベント終了後、もしくは
途中で視聴を終了される方へお願いです。
本日の感想を教えてください！
良かった点、悪かった点、一言でも
構いません！ 今後、オンラインで
開催して欲しいイベントなどもぜひ！

21. Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.
EOP