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
150
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
Google PixelでAIコーディングしたい
1coin
0
30
AIとペーパー電車をつくってみた
1coin
0
130
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
460
「学び」を捉えてマインドアップデート
1coin
0
320
ヤフー名古屋TechMeetupを 運営して学んだこと "縁 ~en~"
1coin
0
110
なぜエンジニアの私が マジ価値MeetupでLTをするのか
1coin
0
200
freee会計でのModule Federationによるマイクロフロントエンドの実践
1coin
2
26k
「この技術書がすごい」 好きなので語ります ~Team Geekついて~
1coin
1
420
リモートでも本音が言い合えるチームに なるためにやったこと
1coin
0
880
Other Decks in Technology
See All in Technology
Geospatialの世界最前線を探る [2025年版]
dayjournal
0
160
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
4
2.9k
データエンジニアがこの先生きのこるには...?
10xinc
0
470
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
1
530
許しとアジャイル
jnuank
1
140
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
4
170
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
150
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
360
自動テストのコストと向き合ってみた
qa
0
200
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
560
extension 現場で使えるXcodeショートカット一覧
ktombow
0
220
Featured
See All Featured
Music & Morning Musume
bryan
46
6.8k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
How to Ace a Technical Interview
jacobian
280
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Invisible Side of Design
smashingmag
301
51k
Making Projects Easy
brettharned
119
6.4k
It's Worth the Effort
3n
187
28k
Navigating Team Friction
lara
189
15k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
KATA
mclloyd
32
15k
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