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

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

ROM1000
August 30, 2022

夏の読書感想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

ROM1000

August 30, 2022
Tweet

More Decks by ROM1000

Other Decks in Programming

Transcript




  1. の 読



    L
    T
    #saitama.js
    Ja
    va
    Sc
    ri
    pt
















    R
    O
    M

    20
    22

    08

    30

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide









  41. #saitama.js






    View full-size slide