Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JSのクラスの後ろ向きな話

 JSのクラスの後ろ向きな話

U76NER

July 08, 2022
Tweet

More Decks by U76NER

Other Decks in Programming

Transcript

  1. 1 LT会(仮) 2022/07/08 u76ner JSのクラスの 後ろ向きな話 1

  2. - 先週輪読会でクラスの章を読んだ - 古い書き方とかを見つつ、JavaScriptのクラスをざっくり紐解こう という趣旨 - たぶん実務に役立つことはないネタ - (付け焼き刃なので不正確な部分があるかも) 2

    はじめに
  3. - もともとJavaScriptにクラスという概念はない - 語弊がありそうだけど - 無理やりJavaScriptでクラスを表現していた歴史がある - 期待に応えて(?)、ES6(ES2015)でclass構文が追加された 3 JSにおけるクラスの歴史

  4. - オブジェクト指向 - Class-based - Prototype-based 4 JSにクラスはない?

  5. - Class-based(Wikipedia) - クラス(ひな型)を用いてオブジェクトを生成する - ひな形であるクラスに注目している 5 JSにクラスはない?

  6. - Class-based(Wikipedia) - クラス(ひな型)を用いてオブジェクトを生成する - ひな形であるクラスに注目している - とてもわかりやすい例 6 JSにクラスはない?

    たい焼き器(クラス) たい焼き(インスタンス)
  7. - Prototype-based(Wikipedia) - オブジェクトはすべてオブジェクトから生まれる - クローン元のオブジェクトをプロトタイプという 7 JSにクラスはない?

  8. - Prototype-based(Wikipedia) - オブジェクトはすべてオブジェクトから生まれる - クローン元のオブジェクトをプロトタイプという - とてもわかりやすい例 8 JSにクラスはない?

    原初たい焼き(プロトタイプ) クローンたい焼き
  9. - JavaScriptはプロトタイプベース - そもそも言語の思想が違う - そんな中、JavaScriptにおけるクラスは無理やり作られた - たい焼きでたい焼き器を作ったようなもの - (TypeScriptの型はクラスの概念に近いかもね)

    9 JSにクラスはない?
  10. 10 余談 たい焼き器(天然) たい焼き器(養殖)

  11. - フィールド - ES2015以降 - コンストラクタなし - コンストラクタあり 11 クラスの書き方

  12. - フィールド - ES5以前 - コンストラクタなし - コンストラクタあり 12 クラスの書き方

  13. - メソッド - ES2015以降 13 クラスの書き方

  14. - メソッド - ES5以前 14 クラスの書き方

  15. - メソッド - ES5以前 15 クラスの書き方

  16. - メソッド - ES2015以降 16 クラスの書き方

  17. - メソッド - ES5以前 - 違うオブジェクトのメソッドであり、実体として違うもの - 必要以上にメモリを食ってしまう 17 クラスの書き方

  18. - メソッド - こうしないといけない 18 クラスの書き方 めんどい

  19. - prototype - オブジェクトにプロパティがなかったときに参照しに行く - 実は結構目にしてる 19 クラスの書き方

  20. - MDN Web DocsのArrayのページより 20 クラスの書き方

  21. - class構文のように、 読み書きしやすいように導入された文法のことを 糖衣構文(syntax sugar)という - Wikipedia - 例 -

    C言語における p->member は (*p).member の糖衣構文 21 余談2(まじめ)
  22. 22 まとめ

  23. 23 まとめ 一方、ReactはFunction Componentを使った

  24. 24 まとめ 一方、ReactはFunction Componentを使った 人類にクラスという概念は早すぎる(クソデカ主語)