Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
【JavaScript】クロージャを理解して正しく使う
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
TomPenguin
January 26, 2022
Programming
550
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
【JavaScript】クロージャを理解して正しく使う
TomPenguin
January 26, 2022
More Decks by TomPenguin
See All by TomPenguin
Domain Modelを共有していい感じにプロダクトを作る
tompenguin
0
370
【JavaScript】Strategy Patternっぽいのをちょい使いしてif分を駆逐する
tompenguin
0
230
Git ゼンゼン ムズカシクナイ
tompenguin
0
570
あきらめる Atomic Design
tompenguin
5
770
Other Decks in Programming
See All in Programming
Apple Intelligence を用いた個人情報誤送信防止、及びユーザーリクエスト体験の改善について
yukiny
0
180
速習iPhone Duo対応
yuukiw00w
2
830
Security issues being discussed on Web Platforms
petamoriken
0
1.2k
Augmenting AI with the Power of Jakarta EE
ivargrimstad
0
300
Java 27新機能 / Java 27 new features
kishida
2
170
GitHubハンズオン講座 — 実務レベルのチーム開発のフローを身につけよう
junhat6
0
110
Augmenting AI with the Power of Jakarta EE
ivargrimstad
0
300
モジュールの視点からSwiftを読み解く #iosdc
s_shimotori
0
200
KiroのSpecで「五目並べ」を作ってみる
satoshi256kbyte
1
240
個人開発基盤をまるごとCloudflareに引っ越して爆速で総合的体験を向上させた話
tinykitten
0
210
Go × SIMDで高速化するベクトル検索 ~ルーフラインモデルでSIMDが効く境界を探れ! ~
po3rin
1
3.9k
UPDATE をやめる — EF Core でマスタをバージョン管理する
panda728
PRO
0
800
Featured
See All Featured
ラッコキーワード サービス紹介資料
rakko
1
5M
The SEO Collaboration Effect
kristinabergwall1
1
570
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
Docker and Python
trallard
47
4.2k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
620
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
68
58k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
63
46k
It's Worth the Effort
3n
188
29k
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
1k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
370
Transcript
クロージャ を理解して正しく使う JavaScript TomPenguin karabiner. inc 2022/01/26 完全に理解したわ
あなたは誰ですか? Vue.jsばっかりさわっているエンジニア。 仙台から福岡のシステム開発会社へフルリ モートで勤務。 デザインからやるWeb制作の仕事、個人で 小さく始めました。 TomPenguin tompenguin_ Work at
karabiner, inc
アジェンダ • クロージャとは • クロージャの何が嬉しいのか • いろいろなクロージャ • ダメなクロージャ
① クロージャとは What’s Closure
子関数が親関数の変数を参照する仕組みのことです。 ① クロージャとは ちょう大雑把に言うと https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures
これだけだよ。今日はお疲れ様でした。
嘘だよ。 でも本当に クロージャってこれだけ
① クロージャとは 親関数
① クロージャとは 子関数
① クロージャとは 親関数の変数
① クロージャとは 親関数の変数の参照
① クロージャとは 子関数を返却
① クロージャとは 親関数の変数の参照を保持
② クロージャの何が嬉しいのか What makes you happy?
② クロージャの何が嬉しいのか • 関数の再利用性が高まる • 引数がシンプルになる • テストが容易になる
② クロージャの何が嬉しいのか 関数の再利用性が高まる 同じ api client、option を使いまわせる
② クロージャの何が嬉しいのか 引数がシンプルになる path を渡すだけで良い
テストが容易になる someAPIClient にモック を差し込むことでリクエ スト結果をコントロール できる ② クロージャの何が嬉しいのか
③ いろいろなクロージャ Various Closures
「子関数を直接返す」 ③ いろいろなクロージャ
「親関数の引数を参照する」 ③ いろいろなクロージャ
「もっと短く」 ③ いろいろなクロージャ
「参照先がModuleスコープ」 ③ いろいろなクロージャ
④ ダメなクロージャ Bad pattern
「状態を持っている」 ④ ダメなクロージャ クロージャは参照を保持するので 状態を持つことができる。 しかし状態を持つと状態の変更の 追跡が困難になるので避ける。
子関数が親関数の変数を参照する仕組みのことです。 まとめ https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures クロージャとは ちょう大雑把に言うと
クロージャ を理解して正しく使う JavaScript TomPenguin karabiner. inc 2022/01/26 完全に理解したわ