Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JSのクラスの後ろ向きな話
Search
U76NER
July 08, 2022
Programming
140
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
JSのクラスの後ろ向きな話
U76NER
July 08, 2022
More Decks by U76NER
See All by U76NER
GASええやん
u76ner
1
100
競プロへの誘 -いざな-
u76ner
0
1k
mockdateええやん
u76ner
0
320
Other Decks in Programming
See All in Programming
使いながら育てる Claude Code — 開発フローの1コマンド化 × 繰り返し指摘の自動仕組み化
shiki_kakaku
0
1.8k
人間の目はかわらない、だからJPEGは30年もつ
yuzneri
12
18k
リアルな遅延を測る仕様
kota_yata
1
110
GDG Korea Android: 2026 I/O Extended ~ What's new in Android development tools
pluu
0
220
源内ハンズオン概要編
hideg
0
190
freee が目指す データ マネジメント戦略 AI-Ready 時代を支える 攻めのガバナンスとは
freee
PRO
0
380
Terraform標準の組織で AWS CDKをどう使うか
mu7889yoon
1
520
Detecting Compromised CI with eBPF and Cilium Tetragon
lizrice
0
190
ルールを書いて終わらせないハーネスエンジニアリング
yug1224
5
1.9k
jsmini JavaScript Engine を作ってみた話
yosuke_furukawa
PRO
0
320
PHP に部分適用が来るぞ!……ところで何それ?おいしいの? #phpcon / phpcon-2026
shogogg
0
660
Google Apps Script で Ruby を動かす
kawahara
0
240
Featured
See All Featured
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
470
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
What's in a price? How to price your products and services
michaelherold
247
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Being A Developer After 40
akosma
91
590k
Why Our Code Smells
bkeepers
PRO
340
58k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
640
AI Search: Where Are We & What Can We Do About It?
aleyda
0
7.8k
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
390
HDC tutorial
michielstock
2
790
The #1 spot is gone: here's how to win anyway
tamaranovitovic
3
1.1k
Stewardship and Sustainability of Urban and Community Forests
pwiseman
0
470
Transcript
1 LT会(仮) 2022/07/08 u76ner JSのクラスの 後ろ向きな話 1
- 先週輪読会でクラスの章を読んだ - 古い書き方とかを見つつ、JavaScriptのクラスをざっくり紐解こう という趣旨 - たぶん実務に役立つことはないネタ - (付け焼き刃なので不正確な部分があるかも) 2
はじめに
- もともとJavaScriptにクラスという概念はない - 語弊がありそうだけど - 無理やりJavaScriptでクラスを表現していた歴史がある - 期待に応えて(?)、ES6(ES2015)でclass構文が追加された 3 JSにおけるクラスの歴史
- オブジェクト指向 - Class-based - Prototype-based 4 JSにクラスはない?
- Class-based(Wikipedia) - クラス(ひな型)を用いてオブジェクトを生成する - ひな形であるクラスに注目している 5 JSにクラスはない?
- Class-based(Wikipedia) - クラス(ひな型)を用いてオブジェクトを生成する - ひな形であるクラスに注目している - とてもわかりやすい例 6 JSにクラスはない?
たい焼き器(クラス) たい焼き(インスタンス)
- Prototype-based(Wikipedia) - オブジェクトはすべてオブジェクトから生まれる - クローン元のオブジェクトをプロトタイプという 7 JSにクラスはない?
- Prototype-based(Wikipedia) - オブジェクトはすべてオブジェクトから生まれる - クローン元のオブジェクトをプロトタイプという - とてもわかりやすい例 8 JSにクラスはない?
原初たい焼き(プロトタイプ) クローンたい焼き
- JavaScriptはプロトタイプベース - そもそも言語の思想が違う - そんな中、JavaScriptにおけるクラスは無理やり作られた - たい焼きでたい焼き器を作ったようなもの - (TypeScriptの型はクラスの概念に近いかもね)
9 JSにクラスはない?
10 余談 たい焼き器(天然) たい焼き器(養殖)
- フィールド - ES2015以降 - コンストラクタなし - コンストラクタあり 11 クラスの書き方
- フィールド - ES5以前 - コンストラクタなし - コンストラクタあり 12 クラスの書き方
- メソッド - ES2015以降 13 クラスの書き方
- メソッド - ES5以前 14 クラスの書き方
- メソッド - ES5以前 15 クラスの書き方
- メソッド - ES2015以降 16 クラスの書き方
- メソッド - ES5以前 - 違うオブジェクトのメソッドであり、実体として違うもの - 必要以上にメモリを食ってしまう 17 クラスの書き方
- メソッド - こうしないといけない 18 クラスの書き方 めんどい
- prototype - オブジェクトにプロパティがなかったときに参照しに行く - 実は結構目にしてる 19 クラスの書き方
- MDN Web DocsのArrayのページより 20 クラスの書き方
- class構文のように、 読み書きしやすいように導入された文法のことを 糖衣構文(syntax sugar)という - Wikipedia - 例 -
C言語における p->member は (*p).member の糖衣構文 21 余談2(まじめ)
22 まとめ
23 まとめ 一方、ReactはFunction Componentを使った
24 まとめ 一方、ReactはFunction Componentを使った 人類にクラスという概念は早すぎる(クソデカ主語)