こんにちは。櫻井です。
前回から色々苦戦しましてようやく形になりました。

See the Pen Untitled by knap_develp (@knap_develp) on CodePen.

苦戦したところ

何に苦戦したかお話しすると前回までのデータから個別に削除する関数を追加しようとしたら他の関数との関係でごちゃごちゃになってしまい整理する必要がありました。 どうやって整理するか考えた結果classを使って見ることにしました。今まで一度も使った事がなかったのでここでclassを初めて勉強しました。勉強してみたもののいまいちどう使うのが正解かわからず今回はcanvasを扱う変数をCanvasModel、canvasを表示する関数をCanvasView、canvasを操作する関数をCanvasControllerにまとめる形にしました。 このclassをどういった形にまとめるかを考える所が今回特に苦戦しました。 たまたま以前、少しLaravelを勉強した事があったのでMVCという設計モデルを思い出せたのでそれを参考に調べながらまとめました。思い出せるまでは機能ごとにまとめてはこれだと今までと変わらないっていうのを何度も繰り返していました。 MVCを意識してからはそこそこスムーズに進みましたがmousemoveなどのイベント時のthisの参照先のコントロールに苦戦しました。 最終的にbindを使う事でこれは解決できました。

長方形を個別に削除する

ここから本題です。 長方形を個別に削除するためにまず、CanvasViewに3つのメソッドを追加しました。 itemsDOMWriteとitemsDOMRefreshとdeleteです。 itemsDOMWriteは長方形が追加されたり動かされたりした時に長方形の情報をhtml上に書き起こすためのメソッドです。 itemsDOMRefreshはhtml上に書き起こされた長方形の情報を一度空にするためのメソッドです。 deleteはまず渡された引数の値を元にitemsから長方形の情報を削除します。 その後、histtoryDrawで更新された情報をcanvasに描き、itemsDOMWriteで長方形が追加されたり動かされたりした時に長方形の情報をhtml上に書き起こします。 最後に更新したitemsをhistoryItemsに入れる事で履歴を保管します。

itemsDOMWriteはまず初めにitemsDOMRefreshを使ってhtml上から長方形のデータを削除するところから始まります。削除が終わったらitemsDOMListにitemsに入っている情報をsortして入れます。ここでsortするのはmoveの後だとidの順番が変わってしまっているからです。 次にitemsDOMListを使ってfor文を回しcanvas更新時に入れるDOMを構築していきます。 cvElementにinnerHTMLを使って長方形の情報を入れ、deleteBtnElementにdelete-btnとjs-deleteというclassを追加した後、ばつ印のSVGデータを入れてdatasetでdata-idを割り振ります。 その後、cvElementにappendChildでdeleteBtnElementを追加してさらにcvListWrapperにcvElementを追加します。 cvListWrapperはdocument.querySelector(‘.cv-list_wrapper’)で長方形の情報追加するためのDOMを取得しています。 これで個別に削除するためのDOMの構築が完了しました。 次にDOMに入れた削除ボタンのためのメソッドをCanvasControllerに追加します。 deleteBtnです。 deleteBtnはまず、deleteBtnArrayに構築したDOMの削除ボタンに振った.js-deleteを全て取得し配列にします。 deleteBtnArrayをもとにfor文を回し各ボタンにclickイベントを使ってdeleteメソッド割り振ります。引数にはdata-idの数字を使用します。 最後にこれだけでは追加されたボタンに対して全く削除ボタンが機能しないのでloadのタイミングでobserverを使用しcvListWrapperの中身を監視してDOMが追加されたらdeleteBtnが動作するようにしておきます。

最後に

今回はだいぶ時間がかかってしまいました。 これを機に「リーダブルコーディング」という本を読んだり「良いコード悪いコードで学ぶ設計入門」という本を読んだりJSの書き方そのものを見直して見通しをいかに良くするかをかなり意識しました。 結果的に以前よりはかなり見通しが良くなった気はしますがまだ改善の余地がある気がしています。まだまだ学べることはたくさんあると再認識することもできて時間はかかりましたが良い期間でした。