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

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

TomPenguin
January 26, 2022
Programming
0
210

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

TomPenguin

January 26, 2022
Tweet

More Decks by TomPenguin

See All by TomPenguin
【JavaScript】Strategy Patternっぽいのをちょい使いしてif分を駆逐する
tompenguin
0
86
Git ゼンゼン ムズカシクナイ
tompenguin
0
360
あきらめる Atomic Design
tompenguin
5
500

Other Decks in Programming

See All in Programming
Javaの入門が終わったら何の勉強をすればいいの？ / what should we study after language
kishida
6
35k
Kaigi_on_Rails_2022スポンサーLT登壇資料.pdf
yuta_onishi_97
1
270
LintオタクによるLint解説 / Introduction to Lints
orgachem
20
5.8k
Amazon S3 Selectで実現するサーバーレス高負荷対応サイト
seike460
PRO
2
570
디자인에 이어 코딩까지 AI가 프로그램 개발을 척척? : GitHub Copilot, 어디까지 알아보셨나요
outsider
0
610
How To 脆弱性対応
cmkomuro
0
280
『良いコード／悪いコードで学ぶ設計入門』を一歩深める読み方 / deepen good code bad code
minodriven
11
3.9k
Ltag
inoue2002
0
120
RuboCop Under a Microscope
koic
8
1.2k
やさしく入門するOAuth2.0/easy-entry-oauth
marchin1989
3
440
RubyWorld Conference 2022 に初めて現地参加してみて
shiorin
0
160
Elixirコミュニティ の歩き方〜国内オンライン編〜
elijo
3
920

Featured

See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
23
4.4k
Building Adaptive Systems
keathley
25
1.3k
Testing 201, or: Great Expectations
jmmastey
24
5.6k
Teambox: Starting and Learning
jrom
124
7.8k
Fireside Chat
paigeccino
16
1.6k
Robots, Beer and Maslow
schacon
154
7.3k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
152
13k
What’s in a name? Adding method to the madness
productmarketing
11
1.8k
What's new in Ruby 2.0
geeforr
335
30k
Designing for humans not robots
tammielis
244
24k
Clear Off the Table
cherdarchuk
79
290k

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