グローバル変数は危ないって聞いたけど なんでReduxはいいの？？

2024/9/19に開催された「kaonavi Tech Talk 〜若手エンジニア Face to Face LT会」で発表した内容です。

Transcript

1. 株式会社カオナビ 中村優太 グローバル変数は危ないって聞いたけど なんでReduxはいいの？？
2. 自己紹介 中村優太 名前： 株式会社カオナビ（23卒） 所属： フロントエンドエンジニア 職能： 音楽、あんこをつくること 好きなこと： @tanasokoo X：
3. 株式会社カオナビ 中村優太 グローバル変数は危ないって聞いたけど なんでReduxはいいの？？
4. グローバル変数
5. • 関数の外で宣言した変数 → グローバル変数 • 関数の中で宣言した変数 → ローカル変数 ざっくりいうと
6. グローバル変数のメリット • どこからでもアクセスできる • 変数を何度も宣言する必要がない
7. なんかよく危ないって 言われている
8. 特に規模の大きなアプリケーション で危なさが増す
9. 規模が大きくなったときに起こる問題 • いつ、どこで変わるかが分からない • 変わったときに何が起こるのか分からない • 命名が衝突する • デバッグがやりづらくなる • 単体テストが書きづらくなる etc
10. 「グローバル」って危ない💣
11. 弊社の開発では 「Redux」を使用している
12. https://redux.js.org/introduction/getting-started
13. https://redux.js.org/introduction/getting-started
14. https://redux.js.org/introduction/getting-started 「global state」！？ なんか危なそうなことやっとる💣
16. 結論 1. 「行儀の悪い」グローバル変数 2. 「行儀の良い」グローバル変数 この世には2種類のグローバル変数がある
17. 結論 1. 「行儀の悪い」グローバル変数 2. 「行儀の良い」グローバル変数 この世には2種類のグローバル変数がある ↑ Reduxは正しく使えば、こちらなのでOK！
18. 「行儀が良い」とは
19. グローバル変数で起こりがちな問題 の対策をしている
20. 規模が大きくなったときに起こる問題 • いつ、どこで変わるかが分からない • 変わったときに何が起こるのか分からない • 命名が衝突する • デバッグがやりづらくなる • 単体テストが書きづらくなる etc
21. 規模が大きくなったときに起こる問題 • いつ、どこで変わるかが分からない • 変わったときに何が起こるのか分からない • 命名が衝突する • デバッグがやりづらくなる • 単体テストが書きづらくなる etc
22. グローバルスコープ ローカルスコープ
23. グローバルスコープ いつ、どこで 何が起こるか分かりやすい ローカルスコープ
24. グローバルスコープ ローカルスコープ
25. グローバルスコープ ローカルスコープ
26. グローバルスコープ ローカルスコープ
27. グローバルスコープ ローカルスコープ いつ、どこで何が 起きるか分かりにくい
28. ⭕ いつ、何が起こるのかわかりづらいこと 本質的に悪いのは ❌ スコープが広いこと
29. いつ、何が起こるかが分かりやすければ グローバルでもOK
30. • 変数(State)が変わる場所を一箇所に集まっている • 変数（State）が変わったときに起こることが明確 Reduxはどうなっているか
31. https://redux.js.org/tutorials/essentials/part-1-overview-concepts グローバルに Stateを扱える
32. https://redux.js.org/tutorials/essentials/part-1-overview-concepts 変数の管理が一箇所なので わかりやすい！
33. https://redux.js.org/tutorials/essentials/part-1-overview-concepts 何が起こるかが一箇所 にまとまっているので わかりやすい！
34. https://redux.js.org/style-guide/
35. https://redux.js.org/style-guide/ Model Action as Events, Not Setters （ActionをSetterではなくEventとしてモデル化） 例：ユーザー名を入力するフォーム ❌「ユーザー名をセットする」みたいなSetter単位 → userNameだけ値を更新する（状態の変化が追跡しにくい） ⭕「ユーザー名を更新する」みたいなEvent単位 → userNameだけでなく、touched（フォーム入力されたフラグ）も同時に更新され るはず（状態の変化が追跡しやすい）
36. https://redux.js.org/tutorials/essentials/part-1-overview-concepts 変数の定義が一箇所なので わかりやすい！ 何が起こるかが一箇所 にまとまっているので わかりやすい！
37. ✅ いつ、どこで変わるかが分かりやすい ✅ 変わったときに何が起こるのか分かりやすい ✅ 命名が衝突しない ✅ デバッグがやりやすい ✅ 単体テストが書きやすい etc 「規模が大きくなったときに起こる問題」をクリア
39. この考え方自体は 実はいろんなところにある
40. その一例が「DB」
41. DB State less State less State less State less ← グローバルState 状態管理の責務をDBに集めている
43. まとめ
44. 株式会社カオナビ 中村優太 グローバル変数は危ないって聞いたけど なんでReduxはいいの？？
45. 結論 1. 「行儀の悪い」グローバル変数 2. 「行儀の良い」グローバル変数 この世には2種類のグローバル変数がある ↑ Reduxは正しく使えば、こちらなのでOK！
46. 結論 1. 「行儀の悪い」グローバル変数 2. 「行儀の良い」グローバル変数 この世には2種類のグローバル変数がある ↑ Reduxは正しく使えば、こちらなのでOK！
47. 株式会社カオナビ 中村優太 グローバル変数は危ないって聞いたけど なんでReduxはいいの？？