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
0
130
JSのクラスの後ろ向きな話
U76NER
July 08, 2022
Tweet
Share
More Decks by U76NER
See All by U76NER
GASええやん
u76ner
1
89
競プロへの誘 -いざな-
u76ner
0
920
mockdateええやん
u76ner
0
300
Other Decks in Programming
See All in Programming
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
9.3k
iOSでSVG画像を扱う
kishikawakatsumi
0
180
Node-REDのノードの開発・活用事例とコミュニティとの関わり(Node-RED Con Nagoya 2025)
404background
0
110
外接に惑わされない自システムの処理時間SLIをOpenTelemetryで実現した話
kotaro7750
0
140
AsyncSequenceとAsyncStreamのプロポーザルを全部読む!!
s_shimotori
1
210
CSC305 Lecture 12
javiergs
PRO
0
250
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
470
Go言語はstack overflowの夢を見るか?
logica0419
0
670
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
250
三者三様 宣言的UI
kkagurazaka
0
320
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
350
エンジニアに事業やプロダクトを理解してもらうためにやってること
murabayashi
0
100
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
2.1k
Why You Should Never Use an ORM
jnunemaker
PRO
60
9.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
BBQ
matthewcrist
89
9.9k
For a Future-Friendly Web
brad_frost
180
10k
Balancing Empowerment & Direction
lara
5
710
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Context Engineering - Making Every Token Count
addyosmani
8
330
Speed Design
sergeychernyshev
32
1.2k
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を使った 人類にクラスという概念は早すぎる(クソデカ主語)