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

    View Slide

  2. あなたは誰ですか?
    Vue.jsばっかりさわっているエンジニア。
    仙台から福岡のシステム開発会社へフルリ
    モートで勤務。
    デザインからやるWeb制作の仕事、個人で
    小さく始めました。
    TomPenguin
    tompenguin_
    Work at karabiner, inc

    View Slide

  3. アジェンダ
    ● クロージャとは
    ● クロージャの何が嬉しいのか
    ● いろいろなクロージャ
    ● ダメなクロージャ

    View Slide


  4. クロージャとは
    What’s Closure

    View Slide

  5. 子関数が親関数の変数を参照する仕組みのことです。
    ① クロージャとは
    ちょう大雑把に言うと
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures

    View Slide

  6. これだけだよ。今日はお疲れ様でした。

    View Slide

  7. 嘘だよ。
    でも本当に
    クロージャってこれだけ

    View Slide

  8. ① クロージャとは
    親関数

    View Slide

  9. ① クロージャとは
    子関数

    View Slide

  10. ① クロージャとは
    親関数の変数

    View Slide

  11. ① クロージャとは
    親関数の変数の参照

    View Slide

  12. ① クロージャとは
    子関数を返却

    View Slide

  13. ① クロージャとは
    親関数の変数の参照を保持

    View Slide


  14. クロージャの何が嬉しいのか
    What makes you happy?

    View Slide

  15. ② クロージャの何が嬉しいのか
    ● 関数の再利用性が高まる
    ● 引数がシンプルになる
    ● テストが容易になる

    View Slide

  16. ② クロージャの何が嬉しいのか
    関数の再利用性が高まる
    同じ api client、option
    を使いまわせる

    View Slide

  17. ② クロージャの何が嬉しいのか
    引数がシンプルになる
    path を渡すだけで良い

    View Slide

  18. テストが容易になる
    someAPIClient にモック
    を差し込むことでリクエ
    スト結果をコントロール
    できる
    ② クロージャの何が嬉しいのか

    View Slide


  19. いろいろなクロージャ
    Various Closures

    View Slide

  20. 「子関数を直接返す」
    ③ いろいろなクロージャ

    View Slide

  21. 「親関数の引数を参照する」
    ③ いろいろなクロージャ

    View Slide

  22. 「もっと短く」
    ③ いろいろなクロージャ

    View Slide

  23. 「参照先がModuleスコープ」
    ③ いろいろなクロージャ

    View Slide


  24. ダメなクロージャ
    Bad pattern

    View Slide

  25. 「状態を持っている」
    ④ ダメなクロージャ
    クロージャは参照を保持するので
    状態を持つことができる。
    しかし状態を持つと状態の変更の
    追跡が困難になるので避ける。

    View Slide

  26. 子関数が親関数の変数を参照する仕組みのことです。
    まとめ
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures
    クロージャとは
    ちょう大雑把に言うと

    View Slide

  27. クロージャ
    を理解して正しく使う
    JavaScript
    TomPenguin
    karabiner. inc
    2022/01/26
    完全に理解したわ

    View Slide