プログラマーへの道 #29 の補足説明 - プログラマー VTuber 衣亥栖ティオのちょっとした話

こんにちは、プログラマー 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>
    title<input type="text" id="id-title"><br>
    body<textarea id="id-body"></textarea><br>
    <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 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>


  <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 titleElement = document.getElementById("id-title")
  const bodyElement = document.getElementById("id-body")
  const myModal = new bootstrap.Modal(document.getElementById('exampleModal'))

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

    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 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

      myModal.show()
    })
  })

  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 modalTitleElement = document.getElementById("id-modal-title")

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

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

    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>

コードのコピペについて

現在実装中のメモ帳アプリでは同じようなコードをコピペして複数箇所で利用しています。例えば以下のような現在時刻を取得する処理です。現在このコードは2箇所に存在します。

const now = new Date()
const updatedAt = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate()

同じようなコードが複数箇所に存在すると、そのコードを修正する際に複数箇所を修正しなければいけません。例えば日付のフォーマットを変更する場合、2箇所のコードを修正する必要があります。そのため、同じようなコードは関数でまとめるのがセオリーです。

function getCurrentDate() {
    const now = new Date()
    return now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate()
}

これによって日付のフォーマットを変更する際に getCurrentDate() という関数を修正するだけで済みます。

動画では "とりあえず動くものを作る" という方針なので、今まで通りコピペで実装を進めていきますが、メモ帳アプリが完成したタイミングで↑のようなプログラムの修正を加えていく予定です。

モーダルを閉じる方法

hide() を利用することでモーダルを閉じることができます。

Modal · Bootstrap v5.1

モーダルを操作するオブジェクトの定義方法について

動画でモーダルを閉じる際に上手く行かなかった点について補足します。動画では以下のようなコードを書きましたが、うまくいきませんでした。

const updateButton = document.getElementById("id-update-button")
updateButton.addEventListener("click", (event) => {
    
    //省略

    //これは上手く動かなかった。
    const myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
    myModal.hide()
})

しかし、myModal という変数をグローバル変数にするとうまくいきました。

<script>
  const titleElement = document.getElementById("id-title")
  const bodyElement = document.getElementById("id-body")

  //以下のように定義した myModal はどこからでも参照できるので、グローバル変数となる。
  const myModal = new bootstrap.Modal(document.getElementById('exampleModal'))

なぜ最初の方法がうまく動かなかったのかというと、 new bootstrap.Modal() によって生成されるモーダルのオブジェクトはモーダルの状態を管理しているからです。モーダルには閉じている状態と開いている状態があります。そのため、同じモーダルのオブジェクトに対して show(), hide() を実行しないと上手く動かなくなってしまいます。

以下の更新ボタンで作ったモーダルオブジェクトと

const updateButton = document.getElementById("id-update-button")
updateButton.addEventListener("click", (event) => {
    
    //省略

    const myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
    myModal.hide()
})

以下の編集ボタンで作ったモーダルオブジェクトは異なるオブジェクトとなります。

const editButton = document.getElementById(editButtonId)
editButton.addEventListener("click", (event) => {
    //省略

    const myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
    myModal.show()
})

そのため、更新ボタンを押した際に myModal.hide() を実行していますが、それは開いたモーダルとは別のオブジェクトに対して閉じる操作をしたことになるので、開いたモーダルは反応しませんでした。