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
グローバル変数は危ないって聞いたけど なんでReduxはいいの??
Search
nayuta24
September 30, 2024
0
280
グローバル変数は危ないって聞いたけど なんでReduxはいいの??
2024/9/19に開催された「kaonavi Tech Talk 〜若手エンジニア Face to Face LT会」で発表した内容です。
nayuta24
September 30, 2024
Tweet
Share
More Decks by nayuta24
See All by nayuta24
コードレビュアー「見習い」 になったぞ!!
nayuta24
0
170
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
KATA
mclloyd
30
14k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Gamification - CAS2011
davidbonilla
81
5.4k
Side Projects
sachag
455
42k
Code Reviewing Like a Champion
maltzj
524
40k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building Adaptive Systems
keathley
43
2.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Transcript
株式会社カオナビ 中村優太 グローバル変数は危ないって聞いたけど なんでReduxはいいの??
自己紹介 中村優太 名前: 株式会社カオナビ(23卒) 所属: フロントエンドエンジニア 職能: 音楽、あんこをつくること 好きなこと: @tanasokoo
X:
株式会社カオナビ 中村優太 グローバル変数は危ないって聞いたけど なんでReduxはいいの??
グローバル変数
• 関数の外で宣言した変数 → グローバル変数 • 関数の中で宣言した変数 → ローカル変数 ざっくりいうと
グローバル変数のメリット • どこからでもアクセスできる • 変数を何度も宣言する必要がない
なんかよく危ないって 言われている
特に規模の大きなアプリケーション で危なさが増す
規模が大きくなったときに起こる問題 • いつ、どこで変わるかが分からない • 変わったときに何が起こるのか分からない • 命名が衝突する • デバッグがやりづらくなる •
単体テストが書きづらくなる etc
「グローバル」って危ない💣
弊社の開発では 「Redux」を使用している
https://redux.js.org/introduction/getting-started
https://redux.js.org/introduction/getting-started
https://redux.js.org/introduction/getting-started 「global state」!? なんか危なそうなことやっとる💣
None
結論 1. 「行儀の悪い」グローバル変数 2. 「行儀の良い」グローバル変数 この世には2種類のグローバル変数がある
結論 1. 「行儀の悪い」グローバル変数 2. 「行儀の良い」グローバル変数 この世には2種類のグローバル変数がある ↑ Reduxは正しく使えば、こちらなのでOK!
「行儀が良い」とは
グローバル変数で起こりがちな問題 の対策をしている
規模が大きくなったときに起こる問題 • いつ、どこで変わるかが分からない • 変わったときに何が起こるのか分からない • 命名が衝突する • デバッグがやりづらくなる •
単体テストが書きづらくなる etc
規模が大きくなったときに起こる問題 • いつ、どこで変わるかが分からない • 変わったときに何が起こるのか分からない • 命名が衝突する • デバッグがやりづらくなる •
単体テストが書きづらくなる etc
グローバルスコープ ローカルスコープ
グローバルスコープ いつ、どこで 何が起こるか分かりやすい ローカルスコープ
グローバルスコープ ローカルスコープ
グローバルスコープ ローカルスコープ
グローバルスコープ ローカルスコープ
グローバルスコープ ローカルスコープ いつ、どこで何が 起きるか分かりにくい
⭕ いつ、何が起こるのかわかりづらいこと 本質的に悪いのは ❌ スコープが広いこと
いつ、何が起こるかが分かりやすければ グローバルでもOK
• 変数(State)が変わる場所を一箇所に集まっている • 変数(State)が変わったときに起こることが明確 Reduxはどうなっているか
https://redux.js.org/tutorials/essentials/part-1-overview-concepts グローバルに Stateを扱える
https://redux.js.org/tutorials/essentials/part-1-overview-concepts 変数の管理が一箇所なので わかりやすい!
https://redux.js.org/tutorials/essentials/part-1-overview-concepts 何が起こるかが一箇所 にまとまっているので わかりやすい!
https://redux.js.org/style-guide/
https://redux.js.org/style-guide/ Model Action as Events, Not Setters (ActionをSetterではなくEventとしてモデル化) 例:ユーザー名を入力するフォーム ❌「ユーザー名をセットする」みたいなSetter単位
→ userNameだけ値を更新する(状態の変化が追跡しにくい) ⭕「ユーザー名を更新する」みたいなEvent単位 → userNameだけでなく、touched(フォーム入力されたフラグ)も同時に更新され るはず(状態の変化が追跡しやすい)
https://redux.js.org/tutorials/essentials/part-1-overview-concepts 変数の定義が一箇所なので わかりやすい! 何が起こるかが一箇所 にまとまっているので わかりやすい!
✅ いつ、どこで変わるかが分かりやすい ✅ 変わったときに何が起こるのか分かりやすい ✅ 命名が衝突しない ✅ デバッグがやりやすい ✅ 単体テストが書きやすい
etc 「規模が大きくなったときに起こる問題」をクリア
None
この考え方自体は 実はいろんなところにある
その一例が「DB」
DB State less State less State less State less ←
グローバルState 状態管理の責務をDBに集めている
None
まとめ
株式会社カオナビ 中村優太 グローバル変数は危ないって聞いたけど なんでReduxはいいの??
結論 1. 「行儀の悪い」グローバル変数 2. 「行儀の良い」グローバル変数 この世には2種類のグローバル変数がある ↑ Reduxは正しく使えば、こちらなのでOK!
結論 1. 「行儀の悪い」グローバル変数 2. 「行儀の良い」グローバル変数 この世には2種類のグローバル変数がある ↑ Reduxは正しく使えば、こちらなのでOK!
株式会社カオナビ 中村優太 グローバル変数は危ないって聞いたけど なんでReduxはいいの??