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
110
競プロへの誘 -いざな-
u76ner
0
1k
mockdateええやん
u76ner
0
320
Other Decks in Programming
See All in Programming
AIに既存システムを理解させる技術 ~レガシーを見捨てないハーネスエンジニアリング入門~
ochtum
0
210
信頼性の目標を誰も求めてない
shubox
0
490
AI に Inclusive UI を書かせよう — Design Rules Skill で Compose UI を作り直す
theoriatec2024
1
450
Building an Out-of-Order CPU
latte72
0
680
in-process GraphQL のすすめ #ginzajs
izumin5210
4
1.5k
私のClaude Code活用法 (個人開発編) - PHPerKaigi mini #4(2026/08/24)
panda_program
1
210
高専キャリア LT 発表内容
crysta1221
6
5.5k
GraphRAGのKnowledge Graphを 直接!見る/View-GraphRAG's-KnowledgeGraph-directly!
tyumugi1113
0
230
LoopHub - ローカルで動く GitHub で、AI と共同開発
jugyo
0
430
書籍「プロフェッショナルAI駆動開発」紹介スライド
juntaromatsumoto
0
990
「AI時代、配布するPythonコードをどう守るか: 難読化の実験と判断軸」 #PyconJP2026
pkshadeck
PRO
2
160
一参加者から『中の人』へ 〜全通PHPerがブースに立って学んだ、カンファレンスを100倍楽しむコツ〜
wp_daisuke
0
120
Featured
See All Featured
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
370
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
Darren the Foodie - Storyboard
khoart
PRO
3
3.9k
Information Architects: The Missing Link in Design Systems
soysaucechin
1
1.1k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
380
It's Worth the Effort
3n
188
29k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
3k
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
10k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
490
Unsuck your backbone
ammeep
672
58k
Color Theory Basics | Prateek | Gurzu
gurzu
0
460
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を使った 人類にクラスという概念は早すぎる(クソデカ主語)