プログラマーへの道 #22 今までの動画の知識でメモ帳アプリを作る #3（プログラミング入門）のメモ

# 参考にした動画
https://youtu.be/ZsSmRU-T0Hg

・Dateオブジェクトのメソッド　[Date | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)
・getElementsByTagName()　[getElementsByTagName() | MDN](https://developer.mozilla.org/ja/docs/Web/API/Element/getElementsByTagName)
・Array.from()　[Array.from() | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
・filter()　[filter() | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)

# 写経したコード
```html
<html>
	<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">-</th>
						<th scope="col">タイトル</th>
						<th scope="col">作成日</th>
						<th scope="col">更新日</th>
						<th scope="col">編集</th>
					</tr>
				</thead>
				<tbody id="id-memo-list">
					<tr>
						<td><input type="checkbox"></td>
						<td>Mark</td>
						<td>Otto</td>
						<td>@mdo</td>
						<td><button>編集</button></td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
	<script>
		// メモのタイトルと本文の値(文字列)を取得する。
		const titleElement = document.getElementById("id-title")
		const bodyElement = document.getElementById("id-body")

		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 = "なし"

			// 新しいtrタグ（メモ）を作成する。
			const tr = document.createElement("tr")
			tr.innerHTML = '<td><input type="checkbox"></td>' + title + '<td>' + createdAt + '</td>' + updatedAt + '<td></td><td><button>編集</button></td>'
			const memoList = document.getElementById("id-memo-list")
			memoList.appendChild(tr)
		})

		// 削除機能(まだ削除できないよね？動画では検証見てないから不安メモ残しておく)
		const deleteButton = document.getElementById("id-delete-button")
		deleteButton.addEventListener("click",(event)=>{
			const tbody = document.getElementById("id-memo-list")
			const trs = tbody.getElementsByTagName("tr")
			Array.from(trs).filter((tr)=>{
				const tds = tr.getElementsByTagName("td")
				Array.from(trs).filter((td)=>{
					const input = tr.getElementsByTagName("input")
					if(input == null){
						return false;
					}
					if(input.checked == true){
					}
					return false
				})
			})
		})
	</script>
</html>
```

# Dateオブジェクトのメソッド
<b>getFullYear()</b>　　[getFullYear() | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear)
<b>getMonth() + 1</b>　 [getMonth() | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getMonth)(MDNには＋1って書いてない)
・getMonth()に+1をする理由は、getMonth()の戻り値は0から始まるから。
・+1をしないと0から11までの範囲でしか月を表せないので+1をする。
<b>getDate()</b>　　　　[getDate() | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getDate)

# getElementsByTagName()
・getElementsByTagName()は引数にタグ名を指定したら一致する要素を取得する。
・要素のリストの形式で返される。

# Array.from()とfilter()　
<b>Array.from()</b>
・Array.from()は要素から新しい配列を作成することができる。
<b>filter()</b>
・filter()は引数に一致した要素を取り出す。
<b>Array.from()とfilter()</b>
Array.from()で配列を作成し、filter()の引数に一致した要素を取り出すことができる。