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

by TomPenguin

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

① クロージャとは What’s Closure

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

① クロージャとは親関数

Slide 9

Slide 9 text

① クロージャとは子関数

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

③ いろいろなクロージャ Various Closures

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

④ ダメなクロージャ Bad pattern

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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