【JavaScript】クロージャを理解して正しく使う

Transcript

1. クロージャ を理解して正しく使う JavaScript TomPenguin karabiner. inc 2022/01/26 完全に理解したわ
2. あなたは誰ですか？ Vue.jsばっかりさわっているエンジニア。 仙台から福岡のシステム開発会社へフルリ モートで勤務。 デザインからやるWeb制作の仕事、個人で 小さく始めました。 TomPenguin tompenguin_ Work at karabiner, inc
3. アジェンダ • クロージャとは • クロージャの何が嬉しいのか • いろいろなクロージャ • ダメなクロージャ
4. ① クロージャとは What’s Closure
5. 子関数が親関数の変数を参照する仕組みのことです。 ① クロージャとは ちょう大雑把に言うと https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures
6. これだけだよ。今日はお疲れ様でした。
7. 嘘だよ。 でも本当に クロージャってこれだけ
8. ① クロージャとは 親関数
9. ① クロージャとは 子関数
10. ① クロージャとは 親関数の変数
11. ① クロージャとは 親関数の変数の参照
12. ① クロージャとは 子関数を返却
13. ① クロージャとは 親関数の変数の参照を保持
14. ② クロージャの何が嬉しいのか What makes you happy?
15. ② クロージャの何が嬉しいのか • 関数の再利用性が高まる • 引数がシンプルになる • テストが容易になる
16. ② クロージャの何が嬉しいのか 関数の再利用性が高まる 同じ api client、option を使いまわせる
17. ② クロージャの何が嬉しいのか 引数がシンプルになる path を渡すだけで良い
18. テストが容易になる someAPIClient にモック を差し込むことでリクエ スト結果をコントロール できる ② クロージャの何が嬉しいのか
19. ③ いろいろなクロージャ Various Closures
20. 「子関数を直接返す」 ③ いろいろなクロージャ
21. 「親関数の引数を参照する」 ③ いろいろなクロージャ
22. 「もっと短く」 ③ いろいろなクロージャ
23. 「参照先がModuleスコープ」 ③ いろいろなクロージャ
24. ④ ダメなクロージャ Bad pattern
25. 「状態を持っている」 ④ ダメなクロージャ クロージャは参照を保持するので 状態を持つことができる。 しかし状態を持つと状態の変更の 追跡が困難になるので避ける。
26. 子関数が親関数の変数を参照する仕組みのことです。 まとめ https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures クロージャとは ちょう大雑把に言うと
27. クロージャ を理解して正しく使う JavaScript TomPenguin karabiner. inc 2022/01/26 完全に理解したわ