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 + Redux + Typescipt 開門から入門まで
Search
ichien178
July 18, 2019
Technology
0
140
React + Redux + Typescipt 開門から入門まで
第9回若手WEB名古屋 - connpass -
https://wakateweb-nagoya.connpass.com/event/135743/
ichien178
July 18, 2019
Tweet
Share
More Decks by ichien178
See All by ichien178
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
「学び」を捉えてマインドアップデート
1coin
0
270
ヤフー名古屋TechMeetupを 運営して学んだこと "縁 ~en~"
1coin
0
79
なぜエンジニアの私が マジ価値MeetupでLTをするのか
1coin
0
170
freee会計でのModule Federationによるマイクロフロントエンドの実践
1coin
2
24k
「この技術書がすごい」 好きなので語ります ~Team Geekついて~
1coin
1
390
リモートでも本音が言い合えるチームに なるためにやったこと
1coin
0
810
私の仕事観 + 今の仕事
1coin
0
60
複雑化したReact hookのデバッグとその対策
1coin
4
1.1k
Other Decks in Technology
See All in Technology
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4.1k
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
100
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
22
5.8k
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.2k
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
High Performance PHP
cmuench
0
140
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
BBQ
matthewcrist
86
9.5k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
A Tale of Four Properties
chriscoyier
158
23k
Fireside Chat
paigeccino
34
3.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Typedesign – Prime Four
hannesfritz
40
2.5k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
@1coin178 WWN 2019-07-18 React + Redux + TypeScript 開門から入門まで
いま 開発 • UIフレームワーク: React • アーキテクチャ: Redux • 言語:
TypeScript
用語 おさらい
React - Facebook社が開発したUIフレームワーク JavaScriptライブラリ - 2013 にオープンソース化 - UI Component管理、宣言的なUI
- 仮想DOMが特徴 DOM差分によるUIレンダリング パフォーマンス最適化 - 最新バージョン: v16.8.6 - 成熟してきた印象 - create-react-appコマンドで面倒な環境構築をやってくれる - webpack怖い....
React Component管理なにがうれしい? - UI 再利用性向上 - ロジック、デザインをパーツごとにまとめ、閉じこめる (そんなくらい 理解)
Reactで宣言的(Declarative) UIなにがうれしい? - どうしたいか(命令)でなく、どうなっていてほしいか(結果) - コードやUI 見通しが良くなる - デバッグもしやすい -
再利用性向上 Introduction to declarative UI - Flutter - https://flutter.dev/docs/get-started/flutter-for/declarative
Store Redux - アプリケーション 状態管理 フレームワーク - React + Reduxによる状態管理
一元化 - React: UI ComponentごとにStateを管理 - Redux: すべて State管理を単一 State = Storeに任せる - データ 流れを一方通行に、シンプルに Action Reducer State new State UI
一元管理できると何がうれしい か • 状態管理しているStoreに(すべて )React Componentがアクセス可能 • Componentがネストしていた場合、state値 連続橋渡しを回避 •
アプリ 状態を把握、再現しやすい
TypeScript - 型があるJS - トランスパイルする で、JS バージョンやブラウザごと 対応が容易そう - ES2015
- モダンな書き方ができる - VSCodeがサポートしている
開門 よし、入門だ
使い方
React App(ts) 環境構築 ~ 起動まで
None
None
VSCode F12で宣言元へジャンプ!
Functional ComponentとComponent - 関数としてシンプルに記述できる - 単にComponent 場合 classとextends - Stateを持たない。React
Component Lifecycleがない - Components and Props – React - https://reactjs.org/docs/components-and-props.html#function-and-class-components
Count Up アプリ
Count Up アプリ setState countup render state {count: x} +1
new state {count: x +1}
React + Redux ActionCreator Store Reducer React Component - this.props
mapStateToProps mapDispatchToProps Action
Store Redux ( 再掲) - アプリケーション 状態管理 フレームワーク - React
+ Reduxによる状態管理 一元化 - React: UI ComponentごとにStateを管理 - Redux: すべて State管理を単一 State = Storeに任せる - データ 流れを一方通行に、シンプルに Action Reducer State new State UI
React-Redux ライブラリ導入
#1 ActionType・ActionCreator 作成
#2 Redux Store 定義
#3 Reducer実装
#4 Store 作成・Componentと結合
#4 Store 作成・Componentと結合
#5 Store 値を参照
github sample code https://github.com/1coin178/react-redux-ts-super-simple-countup
Redux デバッグ Redux DevTools • Chrome拡張機能 • 飛んだAction 確認 •
Store 構造把握 • タイムライン https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ja
Redux デバッグ Redux DevTools (導入方法)
Redux デバッグ redux-logger • consoleログにAction・Stata 状態を出力してくれる。 https://github.com/LogRocket/redux-logger
Redux デバッグ redux-logger ( 導入方法)
学習: オンライン講座 egghead • 月額: 5000円くらい
学習: オンライン講座 egghead • 月額: 5000円くらい
React + Redux + TSを使ってみて 良かったこと - Redux: 流れを理解すれ 簡単
- Redux: ど Componentでもすべて Stateにアクセスできる - TS: 宣言元ジャンプOK、定義ファイルを見るとIFがわかる 悩んだこと - Redux: 理解が難しかった... - Redux: Store 構造設計... - Redux: ディレクトリ構造... - ducks, re-duck, actions/reducers - Redux: ボイラープレート多し... - redux-actions - TS: interface定義どこでやる?
Fin.
Appendix
github sample code https://github.com/1coin178/react-redux-ts-super-simple-countup