夏の読書感想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 日
2. 自己紹介します ROM専 https://twitter.com/rom1000_yksbpn 株式会社IBJで唯一のフロントエンド 最近古着が好きで古着ファッションで出社したりす るが、結構浮いてて悲 C 埼玉県には足を踏み入れたことがない
3. 夏といえば、夏休み！ 夏休みといえば、読書感想文！
4. 夏といえば、夏休み！ 夏休みといえば、読書感想文！ ということで、 JavaScriptの積み本からほどいた一冊がこちら
5. 素のJavascriptによる 実践オブジェクト指向 著：しらたまほ（発行：イモに聞け） 技術書典13で購入しました
6. 現在は、 技術書典マーケットとBOOTHで 購入できるようです 技術書典マーケット https://techbookfest.org/product/5173846357311488?productVa riantID=4791737553780736 BOOTH https://booth.pm/ja/items/1514854 ※URLは概要欄にも載せてあります※
7. ひとくち書評 手続き型指向からオブジェクト指向へリファクタリング 体系的にオブジェクト指向の導入と利点を学ぶ
8. ここからは、感想も含みつつ 個人的に学びになったことを 書籍の抜粋とともに紹介していきます
9. 🤔 ここからは、感想も含みつつ 個人的に学びになったことを 書籍の抜粋とともに紹介していきます
10. 前提事項 • この書籍で作成されるサンプルコードは、 canvasタグを使用してweb画面上で描画をする処理である • 描画はマウス、タッチのマルチ対応を要件としている • 初めのサンプルコードは、手続き型での記述
11. 3章 処理の分離 からの抜粋 前提事項での要件の中で 「マウス、タッチのマルチ対応」が可能 であることとあったが、 それぞれの処理の中で重複している箇所があるかもしれない
12. 3章 処理の分離 からの抜粋 前提事項での要件の中で 「マウス、タッチのマルチ対応」が可能 であることとあったが、 それぞれの処理の中で重複している箇所があるかもしれない ので、重複している部分は統一するべき！
13. 3章 処理の分離 からの抜粋 前提事項での要件の中で 「マウス、タッチのマルチ対応」が可能 であることとあったが、 それぞれの処理の中で重複している箇所があるかもしれない ので、重複している部分は統一するべき！ だけど… コード上は全く同じであっても、 意味的に異なるものであれば、重複とみなさない方が良い場合もある
14. 3章 処理の分離 からの抜粋 例えば… 全く同じ記述がされている AとBの処理があったとして、後に Bだけが変更される可能性 があるなら、これは重複とは言わない
15. 3章 処理の分離 からの抜粋 例えば… 全く同じ記述がされている AとBの処理があったとして、後に Bだけが変更される可能性 があるなら、これは重複とは言わない 🤔 しかし、AかBどちらかを変更したとき、 必ずもう一方も同じ変 更を加えなければいけないのは「重複」となる
16. 3章 処理の分離 からの抜粋 誤った重複の放置や統一を起こさないために、処理の分離は コードの抽象化から始める こと 処理の一つ一つを分割して、そこから共通する処理を抽出していく
17. 3章 処理の分離 からの抜粋 誤った重複の放置や統一を起こさないために、処理の分離は コードの抽象化から始める こと 処理の一つ一つを分割して、そこから共通する処理を抽出していく コードの抽象化とは、 （一概には言えないけど） 具体性をなくすことによって、様々な値に対応できるようにする 具体的な値を渡す（コードを使う）側に、判断の責任を持たせる 🤔
18. 4章 ハンドラの共通化 からの抜粋 イベントの判定〜それに当たる処理は switch文（イベントのtypeプロパティで判定）なども あるが、イベントハンドラのメソッドを作って呼び出す 方法もある
19. 4章 ハンドラの共通化 からの抜粋 動作の処理をオブジェクトのメソッドとして定義して、
20. 4章 ハンドラの共通化 からの抜粋 動作の処理をオブジェクトのメソッドとして定義して、 イベントのtypeと対応させるマップを用意する
21. 4章 ハンドラの共通化 からの抜粋 イベントハンドラをひとつにまとめる
22. 4章 ハンドラの共通化 からの抜粋 これでイベントハンドラはひとつのメソッド でまとめられて、 それぞれのイベント登録は同じハンドラを呼び出す記述 をすることができる 🤔 イベントハンドラをひとつにまとめる
23. 4章 ハンドラの共通化 からの抜粋 それぞれのイベントハンドラはひとつのメソッドでまとめられたが、 継承を用いて、それぞれの共通している動作をまとめる こともできる
24. 4章 ハンドラの共通化 からの抜粋 まずイベントハンドラを 関数からクラスに書き換える
25. 4章 ハンドラの共通化 からの抜粋 それぞれのイベントで共通する部分を抽出して、抽象クラス（継承元）とする 抽象クラスから派生クラスを定義すると、 継承関係に矛盾が生じにくい
26. 4章 ハンドラの共通化 からの抜粋 継承関係の矛盾とは… 例えば、TouchHandlerをPointerHandlerから継承して作成するとする
27. 4章 ハンドラの共通化 からの抜粋 継承関係の矛盾とは… 例えば、TouchHandlerをPointerHandlerから継承して作成するとする 上記だと、TouchHandlerとPointerHandlerが別物であっても、 TouchHandlerが使えるところでは常に PointerHandlerも使えなくてはならない 、 という矛盾が生じてしまう 🤔
28. 5章 独立化 からの抜粋 状態保存するオブジェクトと動作のオブジェクトがグローバルに置いてあると、ひとつの DOMしか操作ができない
29. 5章 独立化 からの抜粋 状態保存するオブジェクトと動作のオブジェクトがグローバルに置いてあると、ひとつの DOMしか操作ができない しかし、状態保存のオブジェクトがグローバル変数でなくなると、イベントのメソッドから直 接操作することができなくなってしまう
30. 5章 独立化 からの抜粋 状態保存するオブジェクトと動作のオブジェクトがグローバルに置いてあると、ひとつの DOMしか操作ができない しかし、状態保存のオブジェクトがグローバル変数でなくなると、イベントのメソッドから直 接操作することができなくなってしまう 一つの手法として、オブジェクトをパラメータとして渡す 方法がある
31. 5章 独立化 からの抜粋 状態保存の オブジェクトを パラメータとして渡す
32. 5章 独立化 からの抜粋 状態保存の オブジェクトを パラメータとして渡す 動作の オブジェクトも パラメータとして渡す
33. 5章 独立化 からの抜粋 このようなオブジェクトにオブジェクトを渡すことを DI（Dependency injection）という
34. 5章 独立化 からの抜粋 このようなオブジェクトにオブジェクトを渡すことを DI（Dependency injection）という DIとは、依存性の注入のことであり、使用するコンポーネントは外部ファイルや別のコン ポーネントを利用することで、 コンポーネント間の依存性を薄くする ことができる 🤔
35. 5章 独立化 からの抜粋 このようなオブジェクトにオブジェクトを渡すことを DI（Dependency injection）という DIとは、依存性の注入のことであり、使用するコンポーネントは外部ファイルや別のコン ポーネントを利用することで、 コンポーネント間の依存性を薄くする ことができる 処理をオブジェクトとして持ち、必要に応じて処理を切り替えられるようにする設計を 「Strategyパターン」という
36. まとめ Javascriptはマルチパラダイム言語であるので、オブジェクト指向の記述ひとつ取って も、class構文を使ったクラスベースのものや、 Object.createを使ったプロトタイプベース のもの（ここでは紹介しませんでしたが） など、様々な実装があります 書籍に「プログラムは変更されるもの 」とありました スクラッチでの実装、リファクタリングなど場合を問わず、変更しやすい（適切な切り分 け、継承）コーディングをしていけるように努力しようと思いました
37. ちなみに... Javascriptベースのライブラリである ReactやVueはコンポーネント指向
38. ちなみに... Javascriptベースのライブラリである ReactやVueはコンポーネント指向 コンポーネント指向と オブジェクト指向の違いってなに？
39. ちなみに... コンポーネント指向 「機能のまとまり」を設計し、「機能に付随するデータ」を含めたものを「コンポーネント」に 包み込んで、そのコンポーネントの集合でソフトウェアを作成する オブジェクト指向 「セットになっているデータ」と「付随する処理」を「オブジェクト」に包み込んで、再利用性 や保守性を高めていく
40. ちなみに... コンポーネント指向 「機能のまとまり」を設計し、「機能に付随するデータ」を含めたものを「コンポーネント」に 包み込んで、そのコンポーネントの集合でオブジェクトを作成する オブジェクト指向 「セットになっているデータ」と「付随する処理」を「オブジェクト」に包み込んで、再利用性 や保守性を高めていく 最も大切な考え方は 「データのカプセル化・抽象化」 根本には1つのオブジェクトには 1つのまとまったデータを管理 しようという発想がある 🤔
41. ご 清 聴 あ り が と う #saitama.js ご ざ い ま し た