$30 off During Our Annual Pro Sale. View Details »

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

TomPenguin
January 26, 2022

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

TomPenguin

January 26, 2022
Tweet

More Decks by TomPenguin

Other Decks in Programming

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 完全に理解したわ