プログラマー VTuber 衣亥栖ティオのちょっとした話

Youtubeに投稿したプログラミング学習動画の補足説明をするためのブログです。

プログラマーへの道 #102 の補足説明

こんにちは、プログラマーVTuberの衣亥栖ティオです。
今回は以下の動画の補足説明をします。 動画内で実装したソースコードも載せています。


今回の動画で実装したソースコード

今回の実装は以下です。
https://github.com/tio-iis/memo-server/pull/28/files

現時点でのソースコード全体は以下です。
https://github.com/tio-iis/memo-server/tree/891e68a02dd8c3b5c125f1451cfc88130d719d2c

メソッドの挙動を予想できるかどうかについて

今回の動画では「モーダルを閉じる実装をMemosクラスのupdateMemo()に置くかどうか」について言及しました。 最終的には以下のようにupdateMemo()から削除しています。
https://github.com/tio-iis/memo-server/pull/28/files#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051L218-L221

なぜ削除する方針にしたかというと、以下の更新ボタンのイベントリスナーを見たときにモーダルを閉じるということがわかるようにしたかったからです。
https://github.com/tio-iis/memo-server/blob/891e68a02dd8c3b5c125f1451cfc88130d719d2c/index.html#L460-L469

メモ帳アプリのJavaScript実装に機能を追加したり、不具合を修正する際にどこからコードを読むのかというと、 一番可能性として高いのが「更新ボタンを押した時」や「登録ボタンを押した時」のようなユーザー操作の起点となるイベントリスナー部分の実装だと思います。 そのため、イベントリスナーの実装では「なんとなくやっていることの全体像がわかる」程度の実装を残しておく方がユーザー操作の全体像を把握しやすいかなと思いました。 次回はこの方針を踏まえてリファクタリングを進めようと思います。