夏の読書感想LT「素のJavaScriptによる実践オブジェクト指向」 ＠saitama.js 20220830

2022年8月30日に開催されたsaitama.jsに登壇枠としてお邪魔した際のスライドです！
Twitter：https://twitter.com/rom1000_yksbpn

素のJavascriptによる実践オブジェクト指向
しらたまほ著
技術書典マーケット：https://techbookfest.org/product/5173846357311488?productVariantID=4791737553780736
BOOTH：https://booth.pm/ja/items/1514854

Transcript

1. 夏
   の
   素
   の 読
   書
   感
   想
   L
   T
   #saitama.js
   Ja
   va
   Sc
   ri
   pt
   に
   よ
   る
   実
   践
   オ
   ブ
   ジ
   ェ
   ク
   ト
   指
   向
   登
   壇
   者
   R
   O
   M
   専
   20
   22
   年
   08
   月
   30
   日
   

   View Slide

2. 自己紹介します
   ROM専
   https://twitter.com/rom1000_yksbpn
   株式会社IBJで唯一のフロントエンド
   最近古着が好きで古着ファッションで出社したりす
   るが、結構浮いてて悲 C
   埼玉県には足を踏み入れたことがない
   

   View Slide

3. 夏といえば、夏休み！
   夏休みといえば、読書感想文！
   

   View Slide

4. 夏といえば、夏休み！
   夏休みといえば、読書感想文！
   ということで、
   JavaScriptの積み本からほどいた一冊がこちら
   

   View Slide

5. 素のJavascriptによる
   実践オブジェクト指向
   著：しらたまほ（発行：イモに聞け）
   技術書典13で購入しました
   

   View Slide

6. 現在は、
   技術書典マーケットとBOOTHで
   購入できるようです
   技術書典マーケット
   https://techbookfest.org/product/5173846357311488?productVa
   riantID=4791737553780736
   BOOTH
   https://booth.pm/ja/items/1514854
   ※URLは概要欄にも載せてあります※
   

   View Slide

7. ひとくち書評
   手続き型指向からオブジェクト指向へリファクタリング
   体系的にオブジェクト指向の導入と利点を学ぶ
   

   View Slide

8. ここからは、感想も含みつつ
   個人的に学びになったことを
   書籍の抜粋とともに紹介していきます
   

   View Slide

9. 🤔
   ここからは、感想も含みつつ
   個人的に学びになったことを
   書籍の抜粋とともに紹介していきます
   

   View Slide

10. 前提事項
    ● この書籍で作成されるサンプルコードは、
    canvasタグを使用してweb画面上で描画をする処理である
    ● 描画はマウス、タッチのマルチ対応を要件としている
    ● 初めのサンプルコードは、手続き型での記述
    

    View Slide

11. 3章 処理の分離 からの抜粋
    前提事項での要件の中で 「マウス、タッチのマルチ対応」が可能 であることとあったが、
    それぞれの処理の中で重複している箇所があるかもしれない
    

    View Slide

12. 3章 処理の分離 からの抜粋
    前提事項での要件の中で 「マウス、タッチのマルチ対応」が可能 であることとあったが、
    それぞれの処理の中で重複している箇所があるかもしれない
    ので、重複している部分は統一するべき！
    

    View Slide

13. 3章 処理の分離 からの抜粋
    前提事項での要件の中で 「マウス、タッチのマルチ対応」が可能 であることとあったが、
    それぞれの処理の中で重複している箇所があるかもしれない
    ので、重複している部分は統一するべき！
    だけど…
    コード上は全く同じであっても、
    意味的に異なるものであれば、重複とみなさない方が良い場合もある
    

    View Slide

14. 3章 処理の分離 からの抜粋
    例えば…
    全く同じ記述がされている AとBの処理があったとして、後に Bだけが変更される可能性
    があるなら、これは重複とは言わない
    

    View Slide

15. 3章 処理の分離 からの抜粋
    例えば…
    全く同じ記述がされている AとBの処理があったとして、後に Bだけが変更される可能性
    があるなら、これは重複とは言わない
    🤔
    しかし、AかBどちらかを変更したとき、 必ずもう一方も同じ変
    更を加えなければいけないのは「重複」となる
    

    View Slide

16. 3章 処理の分離 からの抜粋
    誤った重複の放置や統一を起こさないために、処理の分離は コードの抽象化から始める
    こと
    処理の一つ一つを分割して、そこから共通する処理を抽出していく
    

    View Slide

17. 3章 処理の分離 からの抜粋
    誤った重複の放置や統一を起こさないために、処理の分離は コードの抽象化から始める
    こと
    処理の一つ一つを分割して、そこから共通する処理を抽出していく
    コードの抽象化とは、 （一概には言えないけど）
    具体性をなくすことによって、様々な値に対応できるようにする
    具体的な値を渡す（コードを使う）側に、判断の責任を持たせる
    🤔
    

    View Slide

18. 4章 ハンドラの共通化 からの抜粋
    イベントの判定〜それに当たる処理は switch文（イベントのtypeプロパティで判定）なども
    あるが、イベントハンドラのメソッドを作って呼び出す 方法もある
    

    View Slide

19. 4章 ハンドラの共通化 からの抜粋
    動作の処理をオブジェクトのメソッドとして定義して、
    

    View Slide

20. 4章 ハンドラの共通化 からの抜粋
    動作の処理をオブジェクトのメソッドとして定義して、
    イベントのtypeと対応させるマップを用意する
    

    View Slide

21. 4章 ハンドラの共通化 からの抜粋
    イベントハンドラをひとつにまとめる
    

    View Slide

22. 4章 ハンドラの共通化 からの抜粋
    これでイベントハンドラはひとつのメソッド でまとめられて、
    それぞれのイベント登録は同じハンドラを呼び出す記述 をすることができる
    🤔
    イベントハンドラをひとつにまとめる
    

    View Slide

23. 4章 ハンドラの共通化 からの抜粋
    それぞれのイベントハンドラはひとつのメソッドでまとめられたが、
    継承を用いて、それぞれの共通している動作をまとめる こともできる
    

    View Slide

24. 4章 ハンドラの共通化 からの抜粋
    まずイベントハンドラを 関数からクラスに書き換える
    

    View Slide

25. 4章 ハンドラの共通化 からの抜粋
    それぞれのイベントで共通する部分を抽出して、抽象クラス（継承元）とする
    抽象クラスから派生クラスを定義すると、 継承関係に矛盾が生じにくい
    

    View Slide

26. 4章 ハンドラの共通化 からの抜粋
    継承関係の矛盾とは…
    例えば、TouchHandlerをPointerHandlerから継承して作成するとする
    

    View Slide

27. 4章 ハンドラの共通化 からの抜粋
    継承関係の矛盾とは…
    例えば、TouchHandlerをPointerHandlerから継承して作成するとする
    上記だと、TouchHandlerとPointerHandlerが別物であっても、
    TouchHandlerが使えるところでは常に PointerHandlerも使えなくてはならない 、
    という矛盾が生じてしまう
    🤔
    

    View Slide

28. 5章 独立化 からの抜粋
    状態保存するオブジェクトと動作のオブジェクトがグローバルに置いてあると、ひとつの
    DOMしか操作ができない
    

    View Slide

29. 5章 独立化 からの抜粋
    状態保存するオブジェクトと動作のオブジェクトがグローバルに置いてあると、ひとつの
    DOMしか操作ができない
    しかし、状態保存のオブジェクトがグローバル変数でなくなると、イベントのメソッドから直
    接操作することができなくなってしまう
    

    View Slide

30. 5章 独立化 からの抜粋
    状態保存するオブジェクトと動作のオブジェクトがグローバルに置いてあると、ひとつの
    DOMしか操作ができない
    しかし、状態保存のオブジェクトがグローバル変数でなくなると、イベントのメソッドから直
    接操作することができなくなってしまう
    一つの手法として、オブジェクトをパラメータとして渡す 方法がある
    

    View Slide

31. 5章 独立化 からの抜粋
    状態保存の
    オブジェクトを
    パラメータとして渡す
    

    View Slide

32. 5章 独立化 からの抜粋
    状態保存の
    オブジェクトを
    パラメータとして渡す
    動作の
    オブジェクトも
    パラメータとして渡す
    

    View Slide

33. 5章 独立化 からの抜粋
    このようなオブジェクトにオブジェクトを渡すことを DI（Dependency injection）という
    

    View Slide

34. 5章 独立化 からの抜粋
    このようなオブジェクトにオブジェクトを渡すことを DI（Dependency injection）という
    DIとは、依存性の注入のことであり、使用するコンポーネントは外部ファイルや別のコン
    ポーネントを利用することで、 コンポーネント間の依存性を薄くする ことができる
    🤔
    

    View Slide

35. 5章 独立化 からの抜粋
    このようなオブジェクトにオブジェクトを渡すことを DI（Dependency injection）という
    DIとは、依存性の注入のことであり、使用するコンポーネントは外部ファイルや別のコン
    ポーネントを利用することで、 コンポーネント間の依存性を薄くする ことができる
    処理をオブジェクトとして持ち、必要に応じて処理を切り替えられるようにする設計を
    「Strategyパターン」という
    

    View Slide

36. まとめ
    Javascriptはマルチパラダイム言語であるので、オブジェクト指向の記述ひとつ取って
    も、class構文を使ったクラスベースのものや、 Object.createを使ったプロトタイプベース
    のもの（ここでは紹介しませんでしたが） など、様々な実装があります
    書籍に「プログラムは変更されるもの 」とありました
    スクラッチでの実装、リファクタリングなど場合を問わず、変更しやすい（適切な切り分
    け、継承）コーディングをしていけるように努力しようと思いました
    

    View Slide

37. ちなみに...
    Javascriptベースのライブラリである ReactやVueはコンポーネント指向
    

    View Slide

38. ちなみに...
    Javascriptベースのライブラリである ReactやVueはコンポーネント指向
    コンポーネント指向と
    オブジェクト指向の違いってなに？
    

    View Slide

39. ちなみに...
    コンポーネント指向
    「機能のまとまり」を設計し、「機能に付随するデータ」を含めたものを「コンポーネント」に
    包み込んで、そのコンポーネントの集合でソフトウェアを作成する
    オブジェクト指向
    「セットになっているデータ」と「付随する処理」を「オブジェクト」に包み込んで、再利用性
    や保守性を高めていく
    

    View Slide

40. ちなみに...
    コンポーネント指向
    「機能のまとまり」を設計し、「機能に付随するデータ」を含めたものを「コンポーネント」に
    包み込んで、そのコンポーネントの集合でオブジェクトを作成する
    オブジェクト指向
    「セットになっているデータ」と「付随する処理」を「オブジェクト」に包み込んで、再利用性
    や保守性を高めていく
    最も大切な考え方は 「データのカプセル化・抽象化」
    根本には1つのオブジェクトには 1つのまとまったデータを管理 しようという発想がある
    🤔
    

    View Slide

41. ご
    清
    聴
    あ
    り
    が
    と
    う
    #saitama.js
    ご
    ざ
    い
    ま
    し
    た
    

    View Slide