2021-10-27

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

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

今回の動画で実装したソースコード
関数を利用したリファクタリング
リファクタリング中の修正ミスについて

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

以下が今回実装したソースコードです。

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

  <title>メモ帳アプリ</title>
</head>

<body style="padding: 32px; background-color: rgb(248, 249, 250); color: rgb(33, 37, 41);">
  <div>
    <h2>メモ帳アプリ</h3>
      <p>自分のメモを管理できるアプリです。</p>
  </div>
  <div style="padding-bottom: 24px;">
    <button id="id-add-button" class="btn btn-primary">メモを登録する</button>
  </div>
  <div>
    <div style="padding-bottom: 24px;">
      <button id="id-delete-button" class="btn btn-secondary">削除する</button>
    </div>
    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col"><input type="checkbox" id="id-delete-all-memos"></th>
          <th scope="col">タイトル</th>
          <th scope="col">作成日</th>
          <th scope="col">更新日</th>
          <th scope="col">編集</th>
        </tr>
      </thead>
      <tbody id="id-memo-list">
      </tbody>
    </table>


    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">編集</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="id-validation-error-in-edit-modal" class="alert alert-danger" style="display:none;" role="alert">
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text" id="inputGroup-sizing-default">タイトル</span>
              <input type="text" id="id-modal-title" class="form-control" aria-label="Sizing example input"
                aria-describedby="inputGroup-sizing-default">
              <input type="hidden" id="id-memo-id">
            </div>
            <div class="form-floating">
              <textarea class="form-control" style="height: 150px;" placeholder="Leave a comment here"
                id="id-modal-body"></textarea>
              <label for="id-modal-body">本文</label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" id="id-update-button" class="btn btn-primary">更新</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="id-add-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="id-add-modal-label">登録</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="id-validation-error-in-add-modal" class="alert alert-danger" style="display:none;" role="alert">
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text" id="inputGroup-sizing-default">タイトル</span>
              <input type="text" id="id-add-modal-title" class="form-control" aria-label="Sizing example input"
                aria-describedby="inputGroup-sizing-default">
            </div>
            <div class="form-floating">
              <textarea class="form-control" style="height: 150px;" placeholder="Leave a comment here"
                id="id-add-modal-body"></textarea>
              <label for="id-add-modal-body">本文</label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" id="id-add-modal-button" class="btn btn-primary">登録</button>
          </div>
        </div>
      </div>
    </div>

  </div>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
    crossorigin="anonymous"></script>
</body>

<script>
  const myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
  const addModal = new bootstrap.Modal(document.getElementById('id-add-modal'))
  const titleInAddModal = document.getElementById("id-add-modal-title")
  const bodyInAddModal = document.getElementById("id-add-modal-body")
  const memoList = document.getElementById("id-memo-list")

  function getIdTitleInMemoList(memoId) {
    return document.getElementById("id-title-in-list-" + memoId)
  }

  const addButtonInModal = document.getElementById("id-add-modal-button")
  addButtonInModal.addEventListener("click", (event) => {
    const title = titleInAddModal.value
    const body = bodyInAddModal.value

    const errorMessage = document.getElementById("id-validation-error-in-add-modal")
    errorMessage.innerHTML = ""
    if (title.length < 1 || title.length > 30) {
      errorMessage.innerHTML = "タイトルの文字数は1文字以上30文字以下にしてください。<br>"
    }

    if (body.length < 1 || body.length > 100) {
      errorMessage.innerHTML = errorMessage.innerHTML + "本文の文字数は1文字以上100文字以下にしてください。<br>"
    }

    if (memoList.children.length > 0) {
      Array.from(memoList.children).forEach((tr) => {
        const t = getIdTitleInMemoList(tr.id).innerText
        if (title == t) {
          errorMessage.innerHTML = errorMessage.innerHTML + "すでに登録済みのタイトルです。<br>"
        }
      })
    }

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

    const now = new Date()

    //あとでライブラリで実装する
    var min = now.getMinutes()
    if (min < 10) {
      min = "0" + min
    }

    const createdAt = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + " " + now.getHours() + ":" + min + ":" + now.getSeconds()
    const updatedAt = "なし"
    const memoId = now.getTime()

    const tr = document.createElement("tr")
    tr.setAttribute("id", memoId)

    const editButtonId = "id-edit-button-" + memoId
    const idTitleInList = "id-title-in-list-" + memoId
    const updatedAtId = "id-updated-at-" + memoId

    tr.innerHTML = '<td><input class="class-checkbox" data-memo-id="' + memoId + '" type="checkbox"></td><td id="' + idTitleInList + '">' + title + '</td><td>' + createdAt + '</td><td id="' + updatedAtId + '">' + updatedAt + '</td><td><button type="button" data-memo-id="' + memoId + '" id="' + editButtonId + '" class="btn btn-primary">編集</button></td>'
    memoList.appendChild(tr)

    const inputForBody = document.createElement("input")
    inputForBody.setAttribute("id", "id-body-in-list-" + memoId)
    inputForBody.setAttribute("type", "hidden")
    inputForBody.value = body
    tr.appendChild(inputForBody)

    const editButton = document.getElementById(editButtonId)
    editButton.addEventListener("click", (event) => {
      const errorMessage = document.getElementById("id-validation-error-in-edit-modal")
      errorMessage.style.display = "none"
      errorMessage.innerHTML = ""

      const memoId = event.currentTarget.dataset.memoId
      document.getElementById("id-memo-id").value = memoId

      const tmp = document.getElementById("id-title-in-list-" + memoId)
      const title = tmp.innerText
      //const title = document.getElementById("id-title-in-list-" + memoId).innerText
      const titleElement = document.getElementById("id-modal-title")
      titleElement.value = title

      const body = document.getElementById("id-body-in-list-" + memoId).value
      const bodyElement = document.getElementById("id-modal-body")
      bodyElement.value = body

      document.getElementById("exampleModalLabel").innerText = "編集"
      myModal.show()
    })
    addModal.hide()
  })

  const addButton = document.getElementById("id-add-button")
  addButton.addEventListener("click", (event) => {
    titleInAddModal.value = ""
    bodyInAddModal.value = ""
    addModal.show()

    const errorMessage = document.getElementById("id-validation-error-in-add-modal")
    errorMessage.style.display = "none"
    errorMessage.innerHTML = ""
  })

  const deleteButton = document.getElementById("id-delete-button")
  deleteButton.addEventListener("click", (event) => {
    const checkboxes = document.getElementsByClassName("class-checkbox")
    Array.from(checkboxes).forEach((checkbox) => {
      if (checkbox.checked == false) {
        return false
      }

      const memoId = checkbox.dataset.memoId
      document.getElementById(memoId).remove()
    })
  })

  const deleteAllMemos = document.getElementById("id-delete-all-memos")
  deleteAllMemos.addEventListener("change", (event) => {
    const checkboxes = document.getElementsByClassName("class-checkbox")
    if (checkboxes.length == 0) {
      return
    }

    Array.from(checkboxes).forEach((checkbox) => {
      if (deleteAllMemos.checked == true) {
        checkbox.checked = true
      } else {
        checkbox.checked = false
      }
    })
  })

  const updateButton = document.getElementById("id-update-button")
  updateButton.addEventListener("click", (event) => {
    const memoId = document.getElementById("id-memo-id").value

    const title = document.getElementById("id-modal-title").value
    const body = document.getElementById("id-modal-body").value

    const errorMessage = document.getElementById("id-validation-error-in-edit-modal")
    errorMessage.innerHTML = ""
    if (title.length < 1 || title.length > 30) {
      errorMessage.innerHTML = "タイトルの文字数は1文字以上30文字以下にしてください。<br>"
    }

    if (body.length < 1 || body.length > 100) {
      errorMessage.innerHTML = errorMessage.innerHTML + "本文の文字数は1文字以上100文字以下にしてください。<br>"
    }

    if (memoList.children.length > 0) {
      Array.from(memoList.children).forEach((tr) => {
        if (tr.id == memoId) {
          return
        }

        const t = document.getElementById("id-title-in-list-" + tr.id).innerText
        if (title == t) {
          errorMessage.innerHTML = errorMessage.innerHTML + "すでに登録済みのタイトルです。<br>"
        }
      })
    }

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


    //メモリストのタイトル
    document.getElementById("id-title-in-list-" + memoId).innerText = title

    //本文
    document.getElementById("id-body-in-list-" + memoId).value = body

    const now = new Date()
    const updatedAt = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate()
    document.getElementById("id-updated-at-" + memoId).innerText = updatedAt

    myModal.hide()
  })

</script>

</html>

関数を利用したリファクタリング

動画中ではリファクタリングに関数を利用しました。関数は重複した処理をまとめることもできますし、"getIdTitleInMemoList" のように何をしているのか分かりやすい名前を付けることもできます。とても便利な機能ですね。今まであまり使ってきませんでしたが、今後の動画では関数をたくさん使うので、今のうちに復習しておきましょう。

function getIdTitleInMemoList(memoId) {
  return document.getElementById("id-title-in-list-" + memoId)
}

リファクタリング中の修正ミスについて

今回の動画ではリファクタリングミスによってメモ帳アプリが動かなくなってしまいました。これは "id-title-in-list-" という文字列を検索して、何も考えずに関数に置き換えたからです。ちゃんとリファクタリング候補の実装を理解してからリファクタリングしないとダメですね・・・。

2021-10-25

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

プログラマーへの道

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

今回の動画で実装したソースコード
innerText と value
動作確認は重要

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

以下が今回実装したソースコードです。

▶クリックで表示

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

  <title>メモ帳アプリ</title>
</head>

<body style="padding: 32px; background-color: rgb(248, 249, 250); color: rgb(33, 37, 41);">
  <div>
    <h2>メモ帳アプリ</h3>
      <p>自分のメモを管理できるアプリです。</p>
  </div>
  <div style="padding-bottom: 24px;">
    <button id="id-add-button" class="btn btn-primary">メモを登録する</button>
  </div>
  <div>
    <div style="padding-bottom: 24px;">
      <button id="id-delete-button" class="btn btn-secondary">削除する</button>
    </div>
    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col"><input type="checkbox" id="id-delete-all-memos"></th>
          <th scope="col">タイトル</th>
          <th scope="col">作成日</th>
          <th scope="col">更新日</th>
          <th scope="col">編集</th>
        </tr>
      </thead>
      <tbody id="id-memo-list">
      </tbody>
    </table>


    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">編集</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="id-validation-error-in-edit-modal" class="alert alert-danger" style="display:none;" role="alert">
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text" id="inputGroup-sizing-default">タイトル</span>
              <input type="text" id="id-modal-title" class="form-control" aria-label="Sizing example input"
                aria-describedby="inputGroup-sizing-default">
              <input type="hidden" id="id-memo-id">
            </div>
            <div class="form-floating">
              <textarea class="form-control" style="height: 150px;" placeholder="Leave a comment here"
                id="id-modal-body"></textarea>
              <label for="id-modal-body">本文</label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" id="id-update-button" class="btn btn-primary">更新</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="id-add-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="id-add-modal-label">登録</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="id-validation-error-in-add-modal" class="alert alert-danger" style="display:none;" role="alert">
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text" id="inputGroup-sizing-default">タイトル</span>
              <input type="text" id="id-add-modal-title" class="form-control" aria-label="Sizing example input"
                aria-describedby="inputGroup-sizing-default">
            </div>
            <div class="form-floating">
              <textarea class="form-control" style="height: 150px;" placeholder="Leave a comment here"
                id="id-add-modal-body"></textarea>
              <label for="id-add-modal-body">本文</label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" id="id-add-modal-button" class="btn btn-primary">登録</button>
          </div>
        </div>
      </div>
    </div>

  </div>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
    crossorigin="anonymous"></script>
</body>

<script>
  const myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
  const addModal = new bootstrap.Modal(document.getElementById('id-add-modal'))
  const titleInAddModal = document.getElementById("id-add-modal-title")
  const bodyInAddModal = document.getElementById("id-add-modal-body")

  const addButtonInModal = document.getElementById("id-add-modal-button")
  addButtonInModal.addEventListener("click", (event) => {
    const title = titleInAddModal.value
    const body = bodyInAddModal.value

    const errorMessage = document.getElementById("id-validation-error-in-add-modal")
    errorMessage.innerHTML = ""
    if (title.length < 1 || title.length > 30) {
      errorMessage.innerHTML = "タイトルの文字数は1文字以上30文字以下にしてください。<br>"
    }

    if (body.length < 1 || body.length > 100) {
      errorMessage.innerHTML = errorMessage.innerHTML + "本文の文字数は1文字以上100文字以下にしてください。<br>"
    }

    const tmp = document.getElementById("id-memo-list")
    if (tmp.children.length > 0) {
      Array.from(tmp.children).forEach((tr) => {
        const t = document.getElementById("id-title-in-list-" + tr.id).innerText
        if (title == t) {
          errorMessage.innerHTML = errorMessage.innerHTML + "すでに登録済みのタイトルです。<br>"
        }
      })
    }

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

    const now = new Date()

    //あとでライブラリで実装する
    var min = now.getMinutes()
    if (min < 10) {
      min = "0" + min
    }

    const createdAt = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + " " + now.getHours() + ":" + min + ":" + now.getSeconds()
    const updatedAt = "なし"
    const memoId = now.getTime()

    const tr = document.createElement("tr")
    tr.setAttribute("id", memoId)

    const editButtonId = "id-edit-button-" + memoId
    const idTitleInList = "id-title-in-list-" + memoId
    const updatedAtId = "id-updated-at-" + memoId

    tr.innerHTML = '<td><input class="class-checkbox" data-memo-id="' + memoId + '" type="checkbox"></td><td id="' + idTitleInList + '">' + title + '</td><td>' + createdAt + '</td><td id="' + updatedAtId + '">' + updatedAt + '</td><td><button type="button" data-memo-id="' + memoId + '" id="' + editButtonId + '" class="btn btn-primary">編集</button></td>'
    const memoList = document.getElementById("id-memo-list")
    memoList.appendChild(tr)

    const inputForBody = document.createElement("input")
    inputForBody.setAttribute("id", "id-body-in-list-" + memoId)
    inputForBody.setAttribute("type", "hidden")
    inputForBody.value = body
    tr.appendChild(inputForBody)

    const editButton = document.getElementById(editButtonId)
    editButton.addEventListener("click", (event) => {
      const errorMessage = document.getElementById("id-validation-error-in-edit-modal")
      errorMessage.style.display = "none"
      errorMessage.innerHTML = ""

      const memoId = event.currentTarget.dataset.memoId
      document.getElementById("id-memo-id").value = memoId

      const title = document.getElementById("id-title-in-list-" + memoId).innerText
      const titleElement = document.getElementById("id-modal-title")
      titleElement.value = title

      const body = document.getElementById("id-body-in-list-" + memoId).value
      const bodyElement = document.getElementById("id-modal-body")
      bodyElement.value = body

      document.getElementById("exampleModalLabel").innerText = "編集"
      myModal.show()
    })
    addModal.hide()
  })

  const addButton = document.getElementById("id-add-button")
  addButton.addEventListener("click", (event) => {
    titleInAddModal.value = ""
    bodyInAddModal.value = ""
    addModal.show()

    const errorMessage = document.getElementById("id-validation-error-in-add-modal")
    errorMessage.style.display = "none"
    errorMessage.innerHTML = ""
  })

  const deleteButton = document.getElementById("id-delete-button")
  deleteButton.addEventListener("click", (event) => {
    const checkboxes = document.getElementsByClassName("class-checkbox")
    Array.from(checkboxes).forEach((checkbox) => {
      if (checkbox.checked == false) {
        return false
      }

      const memoId = checkbox.dataset.memoId
      document.getElementById(memoId).remove()
    })
  })

  const deleteAllMemos = document.getElementById("id-delete-all-memos")
  deleteAllMemos.addEventListener("change", (event) => {
    const checkboxes = document.getElementsByClassName("class-checkbox")
    if (checkboxes.length == 0) {
      return
    }

    Array.from(checkboxes).forEach((checkbox) => {
      if (deleteAllMemos.checked == true) {
        checkbox.checked = true
      } else {
        checkbox.checked = false
      }
    })
  })

  const updateButton = document.getElementById("id-update-button")
  updateButton.addEventListener("click", (event) => {
    const memoId = document.getElementById("id-memo-id").value

    const title = document.getElementById("id-modal-title").value
    const body = document.getElementById("id-modal-body").value

    const errorMessage = document.getElementById("id-validation-error-in-edit-modal")
    errorMessage.innerHTML = ""
    if (title.length < 1 || title.length > 30) {
      errorMessage.innerHTML = "タイトルの文字数は1文字以上30文字以下にしてください。<br>"
    }

    if (body.length < 1 || body.length > 100) {
      errorMessage.innerHTML = errorMessage.innerHTML + "本文の文字数は1文字以上100文字以下にしてください。<br>"
    }

    const tmp = document.getElementById("id-memo-list")
    if (tmp.children.length > 0) {
      Array.from(tmp.children).forEach((tr) => {
        if (tr.id == memoId) {
          return
        }

        const t = document.getElementById("id-title-in-list-" + tr.id).innerText
        if (title == t) {
          errorMessage.innerHTML = errorMessage.innerHTML + "すでに登録済みのタイトルです。<br>"
        }
      })
    }

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


    //メモリストのタイトル
    document.getElementById("id-title-in-list-" + memoId).innerText = title

    //本文
    document.getElementById("id-body-in-list-" + memoId).value = body

    const now = new Date()
    const updatedAt = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate()
    document.getElementById("id-updated-at-" + memoId).innerText = updatedAt

    myModal.hide()
  })

</script>

</html>

innerText と value

今回の動画で取り上げた不具合の原因は "innerText" を利用すべきところで "value" を利用してしまったというものです。

innerText はHTMLのタグに囲まれている文字列に対するプロパティです。今回の修正対象であるタイトルはtdタグで囲まれているので、innterText を利用しないと変更できません。

HTMLElement.innerText - Web API | MDN

一方で value はinputタグのvalue属性に対するプロパティです。テキストボックスなどに値をセットする場合は value を利用します。

動作確認は重要

今回のように実装者が気づかないうちに不具合を埋め込んでしまうことは開発においてよくあることです。動作確認はとても重要なので、実装が終わったらちゃんと確認しましょう。私が言っても説得力ないかもしれないですけど・・・。

2021-10-23

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

プログラマーへの道

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

今回の動画で実装したソースコード
リファクタリングについて
プログラミングにおける重複の排除

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

以下が今回実装したソースコードです。

▶クリックで表示

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

  <title>メモ帳アプリ</title>
</head>

<body style="padding: 32px; background-color: rgb(248, 249, 250); color: rgb(33, 37, 41);">
  <div>
    <h2>メモ帳アプリ</h3>
      <p>自分のメモを管理できるアプリです。</p>
  </div>
  <div style="padding-bottom: 24px;">
    <button id="id-add-button" class="btn btn-primary">メモを登録する</button>
  </div>
  <div>
    <div style="padding-bottom: 24px;">
      <button id="id-delete-button" class="btn btn-secondary">削除する</button>
    </div>
    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col"><input type="checkbox" id="id-delete-all-memos"></th>
          <th scope="col">タイトル</th>
          <th scope="col">作成日</th>
          <th scope="col">更新日</th>
          <th scope="col">編集</th>
        </tr>
      </thead>
      <tbody id="id-memo-list">
      </tbody>
    </table>


    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">編集</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="id-validation-error-in-edit-modal" class="alert alert-danger" style="display:none;" role="alert">
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text" id="inputGroup-sizing-default">タイトル</span>
              <input type="text" id="id-modal-title" class="form-control" aria-label="Sizing example input"
                aria-describedby="inputGroup-sizing-default">
              <input type="hidden" id="id-memo-id">
            </div>
            <div class="form-floating">
              <textarea class="form-control" style="height: 150px;" placeholder="Leave a comment here"
                id="id-modal-body"></textarea>
              <label for="id-modal-body">本文</label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" id="id-update-button" class="btn btn-primary">更新</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="id-add-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="id-add-modal-label">登録</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="id-validation-error-in-add-modal" class="alert alert-danger" style="display:none;" role="alert">
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text" id="inputGroup-sizing-default">タイトル</span>
              <input type="text" id="id-add-modal-title" class="form-control" aria-label="Sizing example input"
                aria-describedby="inputGroup-sizing-default">
            </div>
            <div class="form-floating">
              <textarea class="form-control" style="height: 150px;" placeholder="Leave a comment here"
                id="id-add-modal-body"></textarea>
              <label for="id-add-modal-body">本文</label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" id="id-add-modal-button" class="btn btn-primary">登録</button>
          </div>
        </div>
      </div>
    </div>

  </div>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
    crossorigin="anonymous"></script>
</body>

<script>
  const myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
  const addModal = new bootstrap.Modal(document.getElementById('id-add-modal'))
  const titleInAddModal = document.getElementById("id-add-modal-title")
  const bodyInAddModal = document.getElementById("id-add-modal-body")

  const addButtonInModal = document.getElementById("id-add-modal-button")
  addButtonInModal.addEventListener("click", (event) => {
    const title = titleInAddModal.value
    const body = bodyInAddModal.value

    const errorMessage = document.getElementById("id-validation-error-in-add-modal")
    errorMessage.innerHTML = ""
    if (title.length < 1 || title.length > 30) {
      errorMessage.innerHTML = "タイトルの文字数は1文字以上30文字以下にしてください。<br>"
    }

    if (body.length < 1 || body.length > 100) {
      errorMessage.innerHTML = errorMessage.innerHTML + "本文の文字数は1文字以上100文字以下にしてください。<br>"
    }

    const tmp = document.getElementById("id-memo-list")
    if (tmp.children.length > 0) {
      Array.from(tmp.children).forEach((tr) => {
        const t = document.getElementById("id-title-in-list-" + tr.id).innerText
        if (title == t) {
          errorMessage.innerHTML = errorMessage.innerHTML + "すでに登録済みのタイトルです。<br>"
        }
      })
    }

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

    const now = new Date()

    //あとでライブラリで実装する
    var min = now.getMinutes()
    if (min < 10) {
      min = "0" + min
    }

    const createdAt = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + " " + now.getHours() + ":" + min + ":" + now.getSeconds()
    const updatedAt = "なし"
    const memoId = now.getTime()

    const tr = document.createElement("tr")
    tr.setAttribute("id", memoId)

    const editButtonId = "id-edit-button-" + memoId
    const idTitleInList = "id-title-in-list-" + memoId
    const updatedAtId = "id-updated-at-" + memoId

    tr.innerHTML = '<td><input class="class-checkbox" data-memo-id="' + memoId + '" type="checkbox"></td><td id="' + idTitleInList + '">' + title + '</td><td>' + createdAt + '</td><td id="' + updatedAtId + '">' + updatedAt + '</td><td><button type="button" data-memo-id="' + memoId + '" id="' + editButtonId + '" class="btn btn-primary">編集</button></td>'
    const memoList = document.getElementById("id-memo-list")
    memoList.appendChild(tr)

    const inputForBody = document.createElement("input")
    inputForBody.setAttribute("id", "id-body-in-list-" + memoId)
    inputForBody.setAttribute("type", "hidden")
    inputForBody.value = body
    tr.appendChild(inputForBody)

    const editButton = document.getElementById(editButtonId)
    editButton.addEventListener("click", (event) => {
      const errorMessage = document.getElementById("id-validation-error-in-edit-modal")
      errorMessage.style.display = "none"
      errorMessage.innerHTML = ""

      const memoId = event.currentTarget.dataset.memoId
      document.getElementById("id-memo-id").value = memoId

      const title = document.getElementById("id-title-in-list-" + memoId).innerText
      const titleElement = document.getElementById("id-modal-title")
      titleElement.value = title

      const body = document.getElementById("id-body-in-list-" + memoId).value
      const bodyElement = document.getElementById("id-modal-body")
      bodyElement.value = body

      document.getElementById("exampleModalLabel").innerText = "編集"
      myModal.show()
    })
    addModal.hide()
  })

  const addButton = document.getElementById("id-add-button")
  addButton.addEventListener("click", (event) => {
    titleInAddModal.value = ""
    bodyInAddModal.value = ""
    addModal.show()

    const errorMessage = document.getElementById("id-validation-error-in-add-modal")
    errorMessage.style.display = "none"
    errorMessage.innerHTML = ""
  })

  const deleteButton = document.getElementById("id-delete-button")
  deleteButton.addEventListener("click", (event) => {
    const checkboxes = document.getElementsByClassName("class-checkbox")
    Array.from(checkboxes).forEach((checkbox) => {
      if (checkbox.checked == false) {
        return false
      }

      const memoId = checkbox.dataset.memoId
      document.getElementById(memoId).remove()
    })
  })

  const deleteAllMemos = document.getElementById("id-delete-all-memos")
  deleteAllMemos.addEventListener("change", (event) => {
    const checkboxes = document.getElementsByClassName("class-checkbox")
    if (checkboxes.length == 0) {
      return
    }

    Array.from(checkboxes).forEach((checkbox) => {
      if (deleteAllMemos.checked == true) {
        checkbox.checked = true
      } else {
        checkbox.checked = false
      }
    })
  })

  const updateButton = document.getElementById("id-update-button")
  updateButton.addEventListener("click", (event) => {
    const memoId = document.getElementById("id-memo-id").value

    const title = document.getElementById("id-modal-title").value
    const body = document.getElementById("id-modal-body").value

    const errorMessage = document.getElementById("id-validation-error-in-edit-modal")
    errorMessage.innerHTML = ""
    if (title.length < 1 || title.length > 30) {
      errorMessage.innerHTML = "タイトルの文字数は1文字以上30文字以下にしてください。<br>"
    }

    if (body.length < 1 || body.length > 100) {
      errorMessage.innerHTML = errorMessage.innerHTML + "本文の文字数は1文字以上100文字以下にしてください。<br>"
    }

    const tmp = document.getElementById("id-memo-list")
    if (tmp.children.length > 0) {
      Array.from(tmp.children).forEach((tr) => {
        if (tr.id == memoId) {
          return
        }

        const t = document.getElementById("id-title-in-list-" + tr.id).innerText
        if (title == t) {
          errorMessage.innerHTML = errorMessage.innerHTML + "すでに登録済みのタイトルです。<br>"
        }
      })
    }

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


    //メモリストのタイトル
    document.getElementById("id-title-in-list-" + memoId).value = title

    //本文
    document.getElementById("id-body-in-list-" + memoId).value = body

    const now = new Date()
    const updatedAt = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate()
    document.getElementById("id-updated-at-" + memoId).innerText = updatedAt

    myModal.hide()
  })

</script>

</html>

リファクタリングについて

リファクタリングについての説明は以下です。

リファクタリング (プログラミング) - Wikipedia

リファクタリングはそれ自体が開発において重要な工程です。リファクタリングを扱っている専用の書籍もあるくらいです。特に "マーチン・ファウラー" というエンジニアが書いている "リファクタリング" という書籍はとても有名で、プログラマーであれば一度は読んでおきたい書籍だと思います。

www.amazon.co.jp

プログラミングにおける重複の排除

プログラミングには "DRY" という原則があります。 DRY は "Don't repeat yourself" の略であり、重複を排除するという思想のことです。

Don't repeat yourself - Wikipedia

動画中では getElementById() の重複を排除しました。重複を許してしまうと、HTMLの id が変更されたときにすべての getElementById() に指定している id を変更しなければいけないからです。変更が漏れるとプログラマーの意図しない挙動になってしまうので、こういった人為的なミスを避けたり、修正にかかる時間を短縮するためにも重複を排除することはプログラミングにおいて一般的な手法となっています。ただ、"重複" の度合いとその時の状況によっては "一旦重複を許容する" という判断をすることもあるので、常に重複を排除することが正しいとは限らないのが難しいところです。

2021-10-21

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

プログラマーへの道

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

今回の動画で実装したソースコード
RGBについて
CSSの background-color について
CSSの color について
Bootstrap の Button について
メモ帳アプリの開発が終わりました

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

以下が今回実装したソースコードです。

▶クリックで表示

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

  <title>メモ帳アプリ</title>
</head>

<body style="padding: 32px; background-color: rgb(248, 249, 250); color: rgb(33, 37, 41);">
  <div>
    <h2>メモ帳アプリ</h3>
      <p>自分のメモを管理できるアプリです。</p>
  </div>
  <div style="padding-bottom: 24px;">
    <button id="id-add-button" class="btn btn-primary">メモを登録する</button>
  </div>
  <div>
    <div style="padding-bottom: 24px;">
      <button id="id-delete-button" class="btn btn-secondary">削除する</button>
    </div>
    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col"><input type="checkbox" id="id-delete-all-memos"></th>
          <th scope="col">タイトル</th>
          <th scope="col">作成日</th>
          <th scope="col">更新日</th>
          <th scope="col">編集</th>
        </tr>
      </thead>
      <tbody id="id-memo-list">
      </tbody>
    </table>


    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">編集</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="id-validation-error-in-edit-modal" class="alert alert-danger" style="display:none;" role="alert">
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text" id="inputGroup-sizing-default">タイトル</span>
              <input type="text" id="id-modal-title" class="form-control" aria-label="Sizing example input"
                aria-describedby="inputGroup-sizing-default">
              <input type="hidden" id="id-memo-id">
            </div>
            <div class="form-floating">
              <textarea class="form-control" style="height: 150px;" placeholder="Leave a comment here"
                id="id-modal-body"></textarea>
              <label for="id-modal-body">本文</label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" id="id-update-button" class="btn btn-primary">更新</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="id-add-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="id-add-modal-label">登録</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="id-validation-error-in-add-modal" class="alert alert-danger" style="display:none;" role="alert">
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text" id="inputGroup-sizing-default">タイトル</span>
              <input type="text" id="id-add-modal-title" class="form-control" aria-label="Sizing example input"
                aria-describedby="inputGroup-sizing-default">
            </div>
            <div class="form-floating">
              <textarea class="form-control" style="height: 150px;" placeholder="Leave a comment here"
                id="id-add-modal-body"></textarea>
              <label for="id-add-modal-body">本文</label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" id="id-add-modal-button" class="btn btn-primary">登録</button>
          </div>
        </div>
      </div>
    </div>

  </div>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
    crossorigin="anonymous"></script>
</body>

<script>
  const myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
  const addModal = new bootstrap.Modal(document.getElementById('id-add-modal'))

  const addButtonInModal = document.getElementById("id-add-modal-button")
  addButtonInModal.addEventListener("click", (event) => {
    const title = document.getElementById("id-add-modal-title").value
    const body = document.getElementById("id-add-modal-body").value

    const errorMessage = document.getElementById("id-validation-error-in-add-modal")
    errorMessage.innerHTML = ""
    if (title.length < 1 || title.length > 30) {
      errorMessage.innerHTML = "タイトルの文字数は1文字以上30文字以下にしてください。<br>"
    }

    if (body.length < 1 || body.length > 100) {
      errorMessage.innerHTML = errorMessage.innerHTML + "本文の文字数は1文字以上100文字以下にしてください。<br>"
    }

    const tmp = document.getElementById("id-memo-list")
    if (tmp.children.length > 0) {
      Array.from(tmp.children).forEach((tr) => {
        const t = document.getElementById("id-title-in-list-" + tr.id).innerText
        if (title == t) {
          errorMessage.innerHTML = errorMessage.innerHTML + "すでに登録済みのタイトルです。<br>"
        }
      })
    }

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

    const now = new Date()

    //あとでライブラリで実装する
    var min = now.getMinutes()
    if (min < 10) {
      min = "0" + min
    }

    const createdAt = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + " " + now.getHours() + ":" + min + ":" + now.getSeconds()
    const updatedAt = "なし"
    const memoId = now.getTime()

    const tr = document.createElement("tr")
    tr.setAttribute("id", memoId)

    const editButtonId = "id-edit-button-" + memoId
    const idTitleInList = "id-title-in-list-" + memoId
    const updatedAtId = "id-updated-at-" + memoId

    tr.innerHTML = '<td><input class="class-checkbox" data-memo-id="' + memoId + '" type="checkbox"></td><td id="' + idTitleInList + '">' + title + '</td><td>' + createdAt + '</td><td id="' + updatedAtId + '">' + updatedAt + '</td><td><button type="button" data-memo-id="' + memoId + '" id="' + editButtonId + '" class="btn btn-primary">編集</button></td>'
    const memoList = document.getElementById("id-memo-list")
    memoList.appendChild(tr)

    const inputForBody = document.createElement("input")
    inputForBody.setAttribute("id", "id-body-in-list-" + memoId)
    inputForBody.setAttribute("type", "hidden")
    inputForBody.value = body
    tr.appendChild(inputForBody)

    const editButton = document.getElementById(editButtonId)
    editButton.addEventListener("click", (event) => {
      const errorMessage = document.getElementById("id-validation-error-in-edit-modal")
      errorMessage.style.display = "none"
      errorMessage.innerHTML = ""

      const memoId = event.currentTarget.dataset.memoId
      document.getElementById("id-memo-id").value = memoId

      const title = document.getElementById("id-title-in-list-" + memoId).innerText
      const titleElement = document.getElementById("id-modal-title")
      titleElement.value = title

      const body = document.getElementById("id-body-in-list-" + memoId).value
      const bodyElement = document.getElementById("id-modal-body")
      bodyElement.value = body

      document.getElementById("exampleModalLabel").innerText = "編集"
      myModal.show()
    })
    addModal.hide()
  })

  const addButton = document.getElementById("id-add-button")
  addButton.addEventListener("click", (event) => {
    document.getElementById("id-add-modal-title").value = ""
    document.getElementById("id-add-modal-body").value = ""
    addModal.show()

    const errorMessage = document.getElementById("id-validation-error-in-add-modal")
    errorMessage.style.display = "none"
    errorMessage.innerHTML = ""
  })

  const deleteButton = document.getElementById("id-delete-button")
  deleteButton.addEventListener("click", (event) => {
    const checkboxes = document.getElementsByClassName("class-checkbox")
    Array.from(checkboxes).forEach((checkbox) => {
      if (checkbox.checked == false) {
        return false
      }

      const memoId = checkbox.dataset.memoId
      document.getElementById(memoId).remove()
    })
  })

  const deleteAllMemos = document.getElementById("id-delete-all-memos")
  deleteAllMemos.addEventListener("change", (event) => {
    const checkboxes = document.getElementsByClassName("class-checkbox")
    if (checkboxes.length == 0) {
      return
    }

    Array.from(checkboxes).forEach((checkbox) => {
      if (deleteAllMemos.checked == true) {
        checkbox.checked = true
      } else {
        checkbox.checked = false
      }
    })
  })

  const updateButton = document.getElementById("id-update-button")
  updateButton.addEventListener("click", (event) => {
    const memoId = document.getElementById("id-memo-id").value

    const title = document.getElementById("id-modal-title").value
    const body = document.getElementById("id-modal-body").value

    const errorMessage = document.getElementById("id-validation-error-in-edit-modal")
    errorMessage.innerHTML = ""
    if (title.length < 1 || title.length > 30) {
      errorMessage.innerHTML = "タイトルの文字数は1文字以上30文字以下にしてください。<br>"
    }

    if (body.length < 1 || body.length > 100) {
      errorMessage.innerHTML = errorMessage.innerHTML + "本文の文字数は1文字以上100文字以下にしてください。<br>"
    }

    const tmp = document.getElementById("id-memo-list")
    if (tmp.children.length > 0) {
      Array.from(tmp.children).forEach((tr) => {
        if (tr.id == memoId) {
          return
        }

        const t = document.getElementById("id-title-in-list-" + tr.id).innerText
        if (title == t) {
          errorMessage.innerHTML = errorMessage.innerHTML + "すでに登録済みのタイトルです。<br>"
        }
      })
    }

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


    //メモリストのタイトル
    document.getElementById("id-title-in-list-" + memoId).value = title

    //本文
    document.getElementById("id-body-in-list-" + memoId).value = body

    const now = new Date()
    const updatedAt = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate()
    document.getElementById("id-updated-at-" + memoId).innerText = updatedAt

    myModal.hide()
  })

</script>

</html>

RGBについて

RGBは色を数値で表す方法の1つです。

RGB - Wikipedia

Red, Green, Blue の順に数値を指定することで任意の色を表現することができます。よく使われる仕組みなので覚えておくとよいと思います。

CSSの background-color について

CSSの background-color は画面の背景色を指定するCSS属性です。

background-color - CSS: カスケーディングスタイルシート | MDN

CSSの color について

CSSの color は画面の文字色を指定するCSS属性です。

color - CSS: カスケーディングスタイルシート | MDN

Bootstrap の Button について

Bootstrap の Button の説明は以下です。

Buttons · Bootstrap v5.1

今回は Button の色を指定するだけでしたが、その他にもオプションがあるので確認するとデザインの幅が広がると思います。

メモ帳アプリの開発が終わりました

今回の動画でメモ帳アプリの開発が終わりました。今後はメモ帳アプリを使ってJavaScript の機能や周辺ツールなどを紹介していく予定です。

メモ帳アプリの開発を完了させるまでに作った動画は41本で、41本の動画の合計再生時間は大体13時間ほどです。 "HTMLやJavaScriptを知らない状態から13時間でメモ帳アプリを作れるようになる" と考えると「意外とプログラミングって簡単だな」と感じるかもしれませんね。

2021-10-19

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

プログラマーへの道

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

今回の動画で実装したソースコード
Bootstrap の Examples について
CSSの Padding について

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

以下が今回実装したソースコードです。

▶クリックで表示

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

  <title>メモ帳アプリ</title>
</head>

<body style="padding: 32px;">
  <div>
    <h2>メモ帳アプリ</h3>
      <p>自分のメモを管理できるアプリです。</p>
  </div>
  <div style="padding-bottom: 24px;">
    <button id="id-add-button">メモを登録する</button>
  </div>
  <div>
    <div style="padding-bottom: 24px;">
      <button id="id-delete-button">削除する</button>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th scope="col"><input type="checkbox" id="id-delete-all-memos"></th>
          <th scope="col">タイトル</th>
          <th scope="col">作成日</th>
          <th scope="col">更新日</th>
          <th scope="col">編集</th>
        </tr>
      </thead>
      <tbody id="id-memo-list">
      </tbody>
    </table>


    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">編集</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="id-validation-error-in-edit-modal" class="alert alert-danger" style="display:none;" role="alert">
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text" id="inputGroup-sizing-default">タイトル</span>
              <input type="text" id="id-modal-title" class="form-control" aria-label="Sizing example input"
                aria-describedby="inputGroup-sizing-default">
              <input type="hidden" id="id-memo-id">
            </div>
            <div class="form-floating">
              <textarea class="form-control" style="height: 150px;" placeholder="Leave a comment here"
                id="id-modal-body"></textarea>
              <label for="id-modal-body">本文</label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" id="id-update-button" class="btn btn-primary">更新</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="id-add-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="id-add-modal-label">登録</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="id-validation-error-in-add-modal" class="alert alert-danger" style="display:none;" role="alert">
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text" id="inputGroup-sizing-default">タイトル</span>
              <input type="text" id="id-add-modal-title" class="form-control" aria-label="Sizing example input"
                aria-describedby="inputGroup-sizing-default">
            </div>
            <div class="form-floating">
              <textarea class="form-control" style="height: 150px;" placeholder="Leave a comment here"
                id="id-add-modal-body"></textarea>
              <label for="id-add-modal-body">本文</label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" id="id-add-modal-button" class="btn btn-primary">登録</button>
          </div>
        </div>
      </div>
    </div>

  </div>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
    crossorigin="anonymous"></script>
</body>

<script>
  const myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
  const addModal = new bootstrap.Modal(document.getElementById('id-add-modal'))

  const addButtonInModal = document.getElementById("id-add-modal-button")
  addButtonInModal.addEventListener("click", (event) => {
    const title = document.getElementById("id-add-modal-title").value
    const body = document.getElementById("id-add-modal-body").value

    const errorMessage = document.getElementById("id-validation-error-in-add-modal")
    errorMessage.innerHTML = ""
    if (title.length < 1 || title.length > 30) {
      errorMessage.innerHTML = "タイトルの文字数は1文字以上30文字以下にしてください。<br>"
    }

    if (body.length < 1 || body.length > 100) {
      errorMessage.innerHTML = errorMessage.innerHTML + "本文の文字数は1文字以上100文字以下にしてください。<br>"
    }

    const tmp = document.getElementById("id-memo-list")
    if (tmp.children.length > 0) {
      Array.from(tmp.children).forEach((tr) => {
        const t = document.getElementById("id-title-in-list-" + tr.id).innerText
        if (title == t) {
          errorMessage.innerHTML = errorMessage.innerHTML + "すでに登録済みのタイトルです。<br>"
        }
      })
    }

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

    const now = new Date()

    //あとでライブラリで実装する
    var min = now.getMinutes()
    if (min < 10) {
      min = "0" + min
    }

    const createdAt = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + " " + now.getHours() + ":" + min + ":" + now.getSeconds()
    const updatedAt = "なし"
    const memoId = now.getTime()

    const tr = document.createElement("tr")
    tr.setAttribute("id", memoId)

    const editButtonId = "id-edit-button-" + memoId
    const idTitleInList = "id-title-in-list-" + memoId
    const updatedAtId = "id-updated-at-" + memoId

    tr.innerHTML = '<td><input class="class-checkbox" data-memo-id="' + memoId + '" type="checkbox"></td><td id="' + idTitleInList + '">' + title + '</td><td>' + createdAt + '</td><td id="' + updatedAtId + '">' + updatedAt + '</td><td><button type="button" data-memo-id="' + memoId + '" id="' + editButtonId + '" class="btn btn-primary">編集</button></td>'
    const memoList = document.getElementById("id-memo-list")
    memoList.appendChild(tr)

    const inputForBody = document.createElement("input")
    inputForBody.setAttribute("id", "id-body-in-list-" + memoId)
    inputForBody.setAttribute("type", "hidden")
    inputForBody.value = body
    tr.appendChild(inputForBody)

    const editButton = document.getElementById(editButtonId)
    editButton.addEventListener("click", (event) => {
      const errorMessage = document.getElementById("id-validation-error-in-edit-modal")
      errorMessage.style.display = "none"
      errorMessage.innerHTML = ""

      const memoId = event.currentTarget.dataset.memoId
      document.getElementById("id-memo-id").value = memoId

      const title = document.getElementById("id-title-in-list-" + memoId).innerText
      const titleElement = document.getElementById("id-modal-title")
      titleElement.value = title

      const body = document.getElementById("id-body-in-list-" + memoId).value
      const bodyElement = document.getElementById("id-modal-body")
      bodyElement.value = body

      document.getElementById("exampleModalLabel").innerText = "編集"
      myModal.show()
    })
    addModal.hide()
  })

  const addButton = document.getElementById("id-add-button")
  addButton.addEventListener("click", (event) => {
    document.getElementById("id-add-modal-title").value = ""
    document.getElementById("id-add-modal-body").value = ""
    addModal.show()

    const errorMessage = document.getElementById("id-validation-error-in-add-modal")
    errorMessage.style.display = "none"
    errorMessage.innerHTML = ""
  })

  const deleteButton = document.getElementById("id-delete-button")
  deleteButton.addEventListener("click", (event) => {
    const checkboxes = document.getElementsByClassName("class-checkbox")
    Array.from(checkboxes).forEach((checkbox) => {
      if (checkbox.checked == false) {
        return false
      }

      const memoId = checkbox.dataset.memoId
      document.getElementById(memoId).remove()
    })
  })

  const deleteAllMemos = document.getElementById("id-delete-all-memos")
  deleteAllMemos.addEventListener("change", (event) => {
    const checkboxes = document.getElementsByClassName("class-checkbox")
    if (checkboxes.length == 0) {
      return
    }

    Array.from(checkboxes).forEach((checkbox) => {
      if (deleteAllMemos.checked == true) {
        checkbox.checked = true
      } else {
        checkbox.checked = false
      }
    })
  })

  const updateButton = document.getElementById("id-update-button")
  updateButton.addEventListener("click", (event) => {
    const memoId = document.getElementById("id-memo-id").value

    const title = document.getElementById("id-modal-title").value
    const body = document.getElementById("id-modal-body").value

    const errorMessage = document.getElementById("id-validation-error-in-edit-modal")
    errorMessage.innerHTML = ""
    if (title.length < 1 || title.length > 30) {
      errorMessage.innerHTML = "タイトルの文字数は1文字以上30文字以下にしてください。<br>"
    }

    if (body.length < 1 || body.length > 100) {
      errorMessage.innerHTML = errorMessage.innerHTML + "本文の文字数は1文字以上100文字以下にしてください。<br>"
    }

    const tmp = document.getElementById("id-memo-list")
    if (tmp.children.length > 0) {
      Array.from(tmp.children).forEach((tr) => {
        if (tr.id == memoId) {
          return
        }

        const t = document.getElementById("id-title-in-list-" + tr.id).innerText
        if (title == t) {
          errorMessage.innerHTML = errorMessage.innerHTML + "すでに登録済みのタイトルです。<br>"
        }
      })
    }

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


    //メモリストのタイトル
    document.getElementById("id-title-in-list-" + memoId).value = title

    //本文
    document.getElementById("id-body-in-list-" + memoId).value = body

    const now = new Date()
    const updatedAt = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate()
    document.getElementById("id-updated-at-" + memoId).innerText = updatedAt

    myModal.hide()
  })

</script>

</html>

Bootstrap の Examples について

動画中では Bootstrap の Examples を確認してデザインを整えました。

Examples · Bootstrap v5.1

Examples は Bootstrap でどのようなデザインができるのかを確認するための実装例ではありますが、私のようにデザインのスキルに乏しい場合は、デザインそのものを参考にするためにも利用できます。どういうデザインにすればいいのか悩む場合は Examples を確認してみるといいと思います。

CSSの Padding について

動画中では Padding を利用して左端に寄っていたHTMLの要素をいい感じに配置しました。 Padding は余白を作るためのCSS属性です。

padding - CSS: カスケーディングスタイルシート | MDN

"padding-top", "padding-bottom" のように余白を作る方向（上下左右）を指定することができますが、全方向に同じ余白を作る場合は "padding" だけを指定します。

2021-10-17

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

プログラマーへの道

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

今回の動画で実装したソースコード
JavaScriptで時間を扱う

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

以下が今回実装したソースコードです。

▶クリックで表示

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

  <title>メモ帳アプリ</title>
</head>

<body>
  <div>
    <h3>メモの登録</h3>
    <button id="id-add-button">メモを登録する</button>
  </div>
  <div>
    <h3>メモの一覧</h3>
    <button id="id-delete-button">削除する</button>
    <table class="table">
      <thead>
        <tr>
          <th scope="col"><input type="checkbox" id="id-delete-all-memos"></th>
          <th scope="col">タイトル</th>
          <th scope="col">作成日</th>
          <th scope="col">更新日</th>
          <th scope="col">編集</th>
        </tr>
      </thead>
      <tbody id="id-memo-list">
      </tbody>
    </table>


    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">編集</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="id-validation-error-in-edit-modal" class="alert alert-danger" style="display:none;" role="alert">
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text" id="inputGroup-sizing-default">タイトル</span>
              <input type="text" id="id-modal-title" class="form-control" aria-label="Sizing example input"
                aria-describedby="inputGroup-sizing-default">
              <input type="hidden" id="id-memo-id">
            </div>
            <div class="form-floating">
              <textarea class="form-control" style="height: 150px;" placeholder="Leave a comment here"
                id="id-modal-body"></textarea>
              <label for="id-modal-body">本文</label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" id="id-update-button" class="btn btn-primary">更新</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="id-add-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="id-add-modal-label">登録</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="id-validation-error-in-add-modal" class="alert alert-danger" style="display:none;" role="alert">
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text" id="inputGroup-sizing-default">タイトル</span>
              <input type="text" id="id-add-modal-title" class="form-control" aria-label="Sizing example input"
                aria-describedby="inputGroup-sizing-default">
            </div>
            <div class="form-floating">
              <textarea class="form-control" style="height: 150px;" placeholder="Leave a comment here"
                id="id-add-modal-body"></textarea>
              <label for="id-add-modal-body">本文</label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" id="id-add-modal-button" class="btn btn-primary">登録</button>
          </div>
        </div>
      </div>
    </div>

  </div>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
    crossorigin="anonymous"></script>
</body>

<script>
  const myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
  const addModal = new bootstrap.Modal(document.getElementById('id-add-modal'))

  const addButtonInModal = document.getElementById("id-add-modal-button")
  addButtonInModal.addEventListener("click", (event) => {
    const title = document.getElementById("id-add-modal-title").value
    const body = document.getElementById("id-add-modal-body").value

    const errorMessage = document.getElementById("id-validation-error-in-add-modal")
    errorMessage.innerHTML = ""
    if (title.length < 1 || title.length > 30) {
      errorMessage.innerHTML = "タイトルの文字数は1文字以上30文字以下にしてください。<br>"
    }

    if (body.length < 1 || body.length > 100) {
      errorMessage.innerHTML = errorMessage.innerHTML + "本文の文字数は1文字以上100文字以下にしてください。<br>"
    }

    const tmp = document.getElementById("id-memo-list")
    if (tmp.children.length > 0) {
      Array.from(tmp.children).forEach((tr) => {
        const t = document.getElementById("id-title-in-list-" + tr.id).innerText
        if (title == t) {
          errorMessage.innerHTML = errorMessage.innerHTML + "すでに登録済みのタイトルです。<br>"
        }
      })
    }

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

    const now = new Date()

    //あとでライブラリで実装する
    var min = now.getMinutes()
    if (min < 10) {
      min = "0" + min
    }

    const createdAt = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + " " + now.getHours() + ":" + min + ":" + now.getSeconds()
    const updatedAt = "なし"
    const memoId = now.getTime()

    const tr = document.createElement("tr")
    tr.setAttribute("id", memoId)

    const editButtonId = "id-edit-button-" + memoId
    const idTitleInList = "id-title-in-list-" + memoId
    const updatedAtId = "id-updated-at-" + memoId

    tr.innerHTML = '<td><input class="class-checkbox" data-memo-id="' + memoId + '" type="checkbox"></td><td id="' + idTitleInList + '">' + title + '</td><td>' + createdAt + '</td><td id="' + updatedAtId + '">' + updatedAt + '</td><td><button type="button" data-memo-id="' + memoId + '" id="' + editButtonId + '" class="btn btn-primary">編集</button></td>'
    const memoList = document.getElementById("id-memo-list")
    memoList.appendChild(tr)

    const inputForBody = document.createElement("input")
    inputForBody.setAttribute("id", "id-body-in-list-" + memoId)
    inputForBody.setAttribute("type", "hidden")
    inputForBody.value = body
    tr.appendChild(inputForBody)

    const editButton = document.getElementById(editButtonId)
    editButton.addEventListener("click", (event) => {
      const errorMessage = document.getElementById("id-validation-error-in-edit-modal")
      errorMessage.style.display = "none"
      errorMessage.innerHTML = ""

      const memoId = event.currentTarget.dataset.memoId
      document.getElementById("id-memo-id").value = memoId

      const title = document.getElementById("id-title-in-list-" + memoId).innerText
      const titleElement = document.getElementById("id-modal-title")
      titleElement.value = title

      const body = document.getElementById("id-body-in-list-" + memoId).value
      const bodyElement = document.getElementById("id-modal-body")
      bodyElement.value = body

      document.getElementById("exampleModalLabel").innerText = "編集"
      myModal.show()
    })
    addModal.hide()
  })

  const addButton = document.getElementById("id-add-button")
  addButton.addEventListener("click", (event) => {
    document.getElementById("id-add-modal-title").value = ""
    document.getElementById("id-add-modal-body").value = ""
    addModal.show()

    const errorMessage = document.getElementById("id-validation-error-in-add-modal")
    errorMessage.style.display = "none"
    errorMessage.innerHTML = ""
  })

  const deleteButton = document.getElementById("id-delete-button")
  deleteButton.addEventListener("click", (event) => {
    const checkboxes = document.getElementsByClassName("class-checkbox")
    Array.from(checkboxes).forEach((checkbox) => {
      if (checkbox.checked == false) {
        return false
      }

      const memoId = checkbox.dataset.memoId
      document.getElementById(memoId).remove()
    })
  })

  const deleteAllMemos = document.getElementById("id-delete-all-memos")
  deleteAllMemos.addEventListener("change", (event) => {
    const checkboxes = document.getElementsByClassName("class-checkbox")
    if (checkboxes.length == 0) {
      return
    }

    Array.from(checkboxes).forEach((checkbox) => {
      if (deleteAllMemos.checked == true) {
        checkbox.checked = true
      } else {
        checkbox.checked = false
      }
    })
  })

  const updateButton = document.getElementById("id-update-button")
  updateButton.addEventListener("click", (event) => {
    const memoId = document.getElementById("id-memo-id").value

    const title = document.getElementById("id-modal-title").value
    const body = document.getElementById("id-modal-body").value

    const errorMessage = document.getElementById("id-validation-error-in-edit-modal")
    errorMessage.innerHTML = ""
    if (title.length < 1 || title.length > 30) {
      errorMessage.innerHTML = "タイトルの文字数は1文字以上30文字以下にしてください。<br>"
    }

    if (body.length < 1 || body.length > 100) {
      errorMessage.innerHTML = errorMessage.innerHTML + "本文の文字数は1文字以上100文字以下にしてください。<br>"
    }

    const tmp = document.getElementById("id-memo-list")
    if (tmp.children.length > 0) {
      Array.from(tmp.children).forEach((tr) => {
        if (tr.id == memoId) {
          return
        }

        const t = document.getElementById("id-title-in-list-" + tr.id).innerText
        if (title == t) {
          errorMessage.innerHTML = errorMessage.innerHTML + "すでに登録済みのタイトルです。<br>"
        }
      })
    }

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


    //メモリストのタイトル
    document.getElementById("id-title-in-list-" + memoId).value = title

    //本文
    document.getElementById("id-body-in-list-" + memoId).value = body

    const now = new Date()
    const updatedAt = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate()
    document.getElementById("id-updated-at-" + memoId).innerText = updatedAt

    myModal.hide()
  })

</script>

</html>

JavaScriptで時間を扱う

JavaScript には時間を扱うためのオブジェクトとして Date が存在します。

Date - JavaScript | MDN

以下のあるようなメソッドを利用することで時刻を取得したりすることができます。

Date.prototype.getDate() - JavaScript | MDN

しかし、Date は特定のフォーマットで時刻を取得することができません。例えば、動画中でもあったように分は "05" のような表現はできず、"5" になってしまいます。動画中でやったように自分でフォーマットを整えることもできますが、少し面倒に感じてしまいます。

通常は以下にあるような "ライブラリ" という仕組みを利用するのですが、ライブラリを説明すると動画が長くなってしまうので、動画中では一旦実装を諦めました。

The best JavaScript date libraries in 2021 - Skypack Blog

動画中でも言及していますが、一通り実装が完了したあとにライブラリを導入して日付周りの実装を終わらせようと思っています。

2021-10-15

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

プログラマーへの道

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

今回の動画で実装したソースコード
編集用のモーダルと登録用のモーダルを分離したことについて
登録済みのタイトルを登録できない仕様について

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

以下が今回実装したソースコードです。

▶クリックで表示

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

  <title>メモ帳アプリ</title>
</head>

<body>
  <div>
    <h3>メモの登録</h3>
    <button id="id-add-button">メモを登録する</button>
  </div>
  <div>
    <h3>メモの一覧</h3>
    <button id="id-delete-button">削除する</button>
    <table class="table">
      <thead>
        <tr>
          <th scope="col"><input type="checkbox" id="id-delete-all-memos"></th>
          <th scope="col">タイトル</th>
          <th scope="col">作成日</th>
          <th scope="col">更新日</th>
          <th scope="col">編集</th>
        </tr>
      </thead>
      <tbody id="id-memo-list">
      </tbody>
    </table>


    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">編集</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="id-validation-error-in-edit-modal" class="alert alert-danger" style="display:none;" role="alert">
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text" id="inputGroup-sizing-default">タイトル</span>
              <input type="text" id="id-modal-title" class="form-control" aria-label="Sizing example input"
                aria-describedby="inputGroup-sizing-default">
              <input type="hidden" id="id-memo-id">
            </div>
            <div class="form-floating">
              <textarea class="form-control" style="height: 150px;" placeholder="Leave a comment here"
                id="id-modal-body"></textarea>
              <label for="id-modal-body">本文</label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" id="id-update-button" class="btn btn-primary">更新</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="id-add-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="id-add-modal-label">登録</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="id-validation-error-in-add-modal" class="alert alert-danger" style="display:none;" role="alert">
            </div>
            <div class="input-group mb-3">
              <span class="input-group-text" id="inputGroup-sizing-default">タイトル</span>
              <input type="text" id="id-add-modal-title" class="form-control" aria-label="Sizing example input"
                aria-describedby="inputGroup-sizing-default">
            </div>
            <div class="form-floating">
              <textarea class="form-control" style="height: 150px;" placeholder="Leave a comment here"
                id="id-add-modal-body"></textarea>
              <label for="id-add-modal-body">本文</label>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" id="id-add-modal-button" class="btn btn-primary">登録</button>
          </div>
        </div>
      </div>
    </div>

  </div>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
    crossorigin="anonymous"></script>
</body>

<script>
  const myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
  const addModal = new bootstrap.Modal(document.getElementById('id-add-modal'))

  const addButtonInModal = document.getElementById("id-add-modal-button")
  addButtonInModal.addEventListener("click", (event) => {
    const title = document.getElementById("id-add-modal-title").value
    const body = document.getElementById("id-add-modal-body").value

    const errorMessage = document.getElementById("id-validation-error-in-add-modal")
    errorMessage.innerHTML = ""
    if (title.length < 1 || title.length > 30) {
      errorMessage.innerHTML = "タイトルの文字数は1文字以上30文字以下にしてください。<br>"
    }

    if (body.length < 1 || body.length > 100) {
      errorMessage.innerHTML = errorMessage.innerHTML + "本文の文字数は1文字以上100文字以下にしてください。<br>"
    }

    const tmp = document.getElementById("id-memo-list")
    if (tmp.children.length > 0) {
      Array.from(tmp.children).forEach((tr) => {
        const t = document.getElementById("id-title-in-list-" + tr.id).innerText
        if (title == t) {
          errorMessage.innerHTML = errorMessage.innerHTML + "すでに登録済みのタイトルです。<br>"
        }
      })
    }

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

    const now = new Date()
    const createdAt = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate()
    const updatedAt = "なし"
    const memoId = now.getTime()

    const tr = document.createElement("tr")
    tr.setAttribute("id", memoId)

    const editButtonId = "id-edit-button-" + memoId
    const idTitleInList = "id-title-in-list-" + memoId
    const updatedAtId = "id-updated-at-" + memoId

    tr.innerHTML = '<td><input class="class-checkbox" data-memo-id="' + memoId + '" type="checkbox"></td><td id="' + idTitleInList + '">' + title + '</td><td>' + createdAt + '</td><td id="' + updatedAtId + '">' + updatedAt + '</td><td><button type="button" data-memo-id="' + memoId + '" id="' + editButtonId + '" class="btn btn-primary">編集</button></td>'
    const memoList = document.getElementById("id-memo-list")
    memoList.appendChild(tr)

    const inputForBody = document.createElement("input")
    inputForBody.setAttribute("id", "id-body-in-list-" + memoId)
    inputForBody.setAttribute("type", "hidden")
    inputForBody.value = body
    tr.appendChild(inputForBody)

    const editButton = document.getElementById(editButtonId)
    editButton.addEventListener("click", (event) => {
      const errorMessage = document.getElementById("id-validation-error-in-edit-modal")
      errorMessage.style.display = "none"
      errorMessage.innerHTML = ""

      const memoId = event.currentTarget.dataset.memoId
      document.getElementById("id-memo-id").value = memoId

      const title = document.getElementById("id-title-in-list-" + memoId).innerText
      const titleElement = document.getElementById("id-modal-title")
      titleElement.value = title

      const body = document.getElementById("id-body-in-list-" + memoId).value
      const bodyElement = document.getElementById("id-modal-body")
      bodyElement.value = body

      document.getElementById("exampleModalLabel").innerText = "編集"
      myModal.show()
    })
    addModal.hide()
  })

  const addButton = document.getElementById("id-add-button")
  addButton.addEventListener("click", (event) => {
    document.getElementById("id-add-modal-title").value = ""
    document.getElementById("id-add-modal-body").value = ""
    addModal.show()

    const errorMessage = document.getElementById("id-validation-error-in-add-modal")
    errorMessage.style.display = "none"
    errorMessage.innerHTML = ""
  })

  const deleteButton = document.getElementById("id-delete-button")
  deleteButton.addEventListener("click", (event) => {
    const checkboxes = document.getElementsByClassName("class-checkbox")
    Array.from(checkboxes).forEach((checkbox) => {
      if (checkbox.checked == false) {
        return false
      }

      const memoId = checkbox.dataset.memoId
      document.getElementById(memoId).remove()
    })
  })

  const deleteAllMemos = document.getElementById("id-delete-all-memos")
  deleteAllMemos.addEventListener("change", (event) => {
    const checkboxes = document.getElementsByClassName("class-checkbox")
    if (checkboxes.length == 0) {
      return
    }

    Array.from(checkboxes).forEach((checkbox) => {
      if (deleteAllMemos.checked == true) {
        checkbox.checked = true
      } else {
        checkbox.checked = false
      }
    })
  })

  const updateButton = document.getElementById("id-update-button")
  updateButton.addEventListener("click", (event) => {
    const memoId = document.getElementById("id-memo-id").value

    const title = document.getElementById("id-modal-title").value
    const body = document.getElementById("id-modal-body").value

    const errorMessage = document.getElementById("id-validation-error-in-edit-modal")
    errorMessage.innerHTML = ""
    if (title.length < 1 || title.length > 30) {
      errorMessage.innerHTML = "タイトルの文字数は1文字以上30文字以下にしてください。<br>"
    }

    if (body.length < 1 || body.length > 100) {
      errorMessage.innerHTML = errorMessage.innerHTML + "本文の文字数は1文字以上100文字以下にしてください。<br>"
    }

    const tmp = document.getElementById("id-memo-list")
    if (tmp.children.length > 0) {
      Array.from(tmp.children).forEach((tr) => {
        const t = document.getElementById("id-title-in-list-" + tr.id).innerText
        if (title == t) {
          errorMessage.innerHTML = errorMessage.innerHTML + "すでに登録済みのタイトルです。<br>"
        }
      })
    }

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


    //メモリストのタイトル
    document.getElementById("id-title-in-list-" + memoId).value = title

    //本文
    document.getElementById("id-body-in-list-" + memoId).value = body

    const now = new Date()
    const updatedAt = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate()
    document.getElementById("id-updated-at-" + memoId).innerText = updatedAt

    myModal.hide()
  })

</script>

</html>

編集用のモーダルと登録用のモーダルを分離したことについて

今回の動画では編集用のモーダルに対してタイトルとボディのバリデーションを実装しています。登録用のモーダルとほぼ同じ実装なので、共通化できる部分ではありますが、一旦シンプルに動画を進めるためにコピペしています。実装が一通り終わったら共通化する予定です。

登録済みのタイトルを登録できない仕様について

今回実装しているメモアプリには "登録済みのタイトルは登録できない" という仕様があります。メモを登録するときは "登録済みのメモのタイトルをすべて取得して、それらと登録するタイトルを比較する" というシンプルなロジックで対応できましたが、メモの編集ではそうもいきません。

例えば、以下のようにタイトルが３つあり、"aaa" のメモを編集する場合は "aaaと同じタイトルにしても問題ないが、bbb, ccc と同じタイトルにするのはダメ" というロジックになります。言い換えると、編集対象のメモのタイトルのみ例外で利用できるという感じでしょうか。

1. aaa
2. bbb
3. ccc

次回はこの点を考慮してバリデーションの実装を進めたいと思います。

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

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

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

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

関数を利用したリファクタリング

リファクタリング中の修正ミスについて

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

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

innerText と value

動作確認は重要

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

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

リファクタリングについて

プログラミングにおける重複の排除

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

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

RGBについて

CSSの background-color について

CSSの color について

Bootstrap の Button について

メモ帳アプリの開発が終わりました

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

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

Bootstrap の Examples について

CSSの Padding について

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

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

JavaScriptで時間を扱う

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

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

編集用のモーダルと登録用のモーダルを分離したことについて

登録済みのタイトルを登録できない仕様について