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

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

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

ソースコードはGitHubで管理しています。 今回のソースコードは以下のリンクから確認することができます。

https://github.com/tio-iis/memo-app/blob/53cb9a2d73e0873afd0da80eefad1c850461eed6/index.html

動画内の不具合について

動画では "タイトルと本文を入力せずにメモが登録できる" という不具合がありました。 原因はタイトルと本文に対するバリデーションである validateMemo() の戻り値でした。 以下の return false, return true が存在しない場合、"モーダルにエラーを表示するが、処理が止まらずにメモを登録する" という挙動になってしまいます。

  function validateMemo(title, body, errorHTMLElement, memoId) {
    //省略

    if (errorHTMLElement.innerHTML.length > 0) {
      errorHTMLElement.style.display = ""
      return false
    }

    return true
  }

そこで、エラーの有無を true/false で戻り値として返してあげて、 validateMemo() を利用する部分で戻り値をチェックしています。 エラーが存在する場合（return false の場合）はそこで処理を止めています（return しています）。

    if (validateMemo(title, body, validationErrorInAddModal, "0") == false) {
      return
    }