こんにちは、プログラマー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) => {
document.getElementById("exampleModalLabel").innerText = "登録"
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つがあります。
- メモを編集する際に利用するモーダルとは別で登録用のモーダルを用意する。
- メモを編集する際に利用するモーダルを登録でも利用する。
それぞれ説明します。
1. メモを編集する際に利用するモーダルとは別で登録用のモーダルを用意する。
1番は登録用のモーダルを新規実装することになるので、考え方としてはシンプルなものになります。
具体的にはモーダル用のHTMLをそれぞれ用意するというものです。
しかし、編集用のモーダルと登録用のモーダルが2つ存在することになるので、モーダルのデザインを変更する際に2つのHTMLを修正する必要があります。
プログラミングでは共通化できるものは共通化するという "DRY(Don't Repeat Yourself)" という考え方があるので、
同じようなHTMLを2つ用意するのは避けた方がよいという考え方ができます。
Don't repeat yourself - Wikipedia
実際に動画中でもHTMLを2つ用意しようと思いましたが、上記の理由に加えてHTMLの id の値の重複を解消するのが面倒で手を止めました。
id の値に統一感がなくなり、管理できなさそうだと感じたからです。
2. メモを編集する際に利用するモーダルを登録でも利用する。
2番はメモを編集する際に利用するモーダルを登録でも利用するというものです。
これは1番で問題に感じていた以下の2点を解消することができます。
- HTMLを2つ用意する。
- id の重複を解消する。
一見良さそうです。
実際に私も最初に選択したのは2番の方針でした。
しかし、実際に実装しようとすると "登録と編集の細かい違い" によって実装難易度が予想以上に高いことに気づきました。
例えば以下の違いがあります。
- モーダルの上部に表示されるテキストが異なる。登録時は "登録" になるが、編集時は "編集" になるので、モーダルを表示する際に文字を切り替えなければいけない。
- モーダルの下部に表示されるボタン（現在は更新ボタン）のテキストが異なる。登録時は "登録" になるが、編集時は "編集" になるので、モーダルを表示する際に文字を切り替えなければいけない。
- モーダルの更新ボタンを押したときの挙動が異なる。登録時はメモの一覧にメモを追加するが、編集時はメモ一覧の値を書き換える。
- モーダルを表示する際の挙動が異なる。登録時はタイトルと本文が空でよいが、編集時は編集対象のタイトルと本文をセットする必要がある。
この細かい違いに対応するためにif文が増えてしまうと、プログラム自体が複雑になってしまいます。
動画の視聴者だけでなく、実装者である私が理解するのが難しいプログラムになってしまうようでは意味がありません。
動画中で1番と2番の実装方針を決めきることができないと感じたので、
今回は動画を切りました（時間も10分を超えていたのでちょうどよかったというもあります）。
このブログを書いている時点では、一旦1番でシンプルに実装してみて、問題があるようであれば、2番で実装しようかなと思っています。
