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

by ROM1000

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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