$30 off During Our Annual Pro Sale. View Details »
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
930
mockdateええやん
u76ner
0
310
Other Decks in Programming
See All in Programming
開発に寄りそう自動テストの実現
goyoki
1
780
Microservices rules: What good looks like
cer
PRO
0
1.2k
まだ間に合う!Claude Code元年をふりかえる
nogu66
5
730
令和最新版Android Studioで化石デバイス向けアプリを作る
arkw
0
380
認証・認可の基本を学ぼう後編
kouyuume
0
180
Cell-Based Architecture
larchanjo
0
110
全員アーキテクトで挑む、 巨大で高密度なドメインの紐解き方
agatan
8
20k
【CA.ai #3】Google ADKを活用したAI Agent開発と運用知見
harappa80
0
300
Go コードベースの構成と AI コンテキスト定義
andpad
0
120
なあ兄弟、 余白の意味を考えてから UI実装してくれ!
ktcryomm
11
11k
モデル駆動設計をやってみようワークショップ開催報告(Modeling Forum2025) / model driven design workshop report
haru860
0
260
手が足りない!兼業データエンジニアに必要だったアーキテクチャと立ち回り
zinkosuke
0
600
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
70k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.3k
Side Projects
sachag
455
43k
Site-Speed That Sticks
csswizardry
13
990
Designing for humans not robots
tammielis
254
26k
Stop Working from a Prison Cell
hatefulcrawdad
273
21k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Writing Fast Ruby
sferik
630
62k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
1
94
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
970
The World Runs on Bad Software
bkeepers
PRO
72
12k
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を使った 人類にクラスという概念は早すぎる(クソデカ主語)