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

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

U76NER
July 08, 2022

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

U76NER

July 08, 2022
Tweet

More Decks by U76NER

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. 10
    余談
    たい焼き器(天然) たい焼き器(養殖)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. - class構文のように、
    読み書きしやすいように導入された文法のことを
    糖衣構文(syntax sugar)という
    - Wikipedia
    - 例
    - C言語における p->member は (*p).member の糖衣構文
    21
    余談2(まじめ)

    View full-size slide

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

    View full-size slide

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

    View full-size slide