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