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

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

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

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

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

モダールに関する処理をイベントリスナーで実施する

前回のブログでも言及しましたが、今回のリファクタリングでイベントリスナーでモーダルの操作をするようにしました。
https://github.com/tio-iis/memo-server/blob/18a6cde10aaca89fa2d53dc5fb4137efab4f82fb/index.html#L424-L435

それに伴ってMemosクラスのupdateMemo()の戻り値をエラー文字列に変更しています。 イベントリスナーでは更新内容に問題があるかどうかを判定して、 問題がある場合はそのエラー内容をモーダルに表示しています。

更新ボタンのイベントリスナーの実装にコメントを付けたものが以下です。 更新ボタンを押したときに何をやっているのかがざっくりと分かるようになっていますね。

updateButton.addEventListener("click", (event) => {
    //モーダルに入力された内容を取得する。
    const memoId = memoIdInEditModal.value
    const title = titleInEditModal.value
    const body = bodyInEditModal.value

    //メモを更新する。
    const errStr = memos.updateMemo(memoId, title, body)

    //更新内容にエラーがある場合はモーダルにエラーメッセージを表示して処理を終わる。
    if (errStr.length > 0) {
      validationErrorInEditModal.innerHTML = errStr
      validationErrorInEditModal.style.display = ""
      return
    }

    //更新内容に問題がない場合はモーダルを閉じて処理を終わる。
    editModal.hide()
})

もし、以下のようにメモの更新しか情報がない場合は、全体像を把握することができなくなってしまいます。

updateButton.addEventListener("click", (event) => {
    //モーダルに入力された内容を取得する。
    const memoId = memoIdInEditModal.value
    const title = titleInEditModal.value
    const body = bodyInEditModal.value

    //メモを更新する。
    memos.updateMemo(memoId, title, body)
})