この動画を見て点だった理解が線になった！
学んだこと
・関数
– 処理の塊に名前をつけることできる。
– その処理の塊の名前を呼び出すと何度も使えるようになる。
– その処理の塊の名前を呼び出さないと使えない。
・無名関数
– 関数を無名関数に書き換えることができる。
– 無名関数は変数に代入できる。
– 関数が複数あると何の関数が何の処理をしているか探さないといけないので特定の関数だけを変更したい時
デメリット
– 処理が直接書いてあるので行が必然的に長くなるのでコード全体が読みにくくなる。
・アロー関数
– 無名関数を省略記法（シンタックスシュガー）で書けること
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>function && allow</title>
</head>
<body>
<button id="id-button">my button</button>
</body>
<script>
// // 関数
// btn = document.getElementById("id-button")
// btn.addEventListener("click",clickedButton)
// function clickedButton() {
// alert("clickedButtonという名前の関数が動いたよ")
// }
// // 無名関数
// // 関数を定義しなくてもaddEventListenerの引数に直接無名関数を書ける
// btn = document.getElementById("id-button")
// btn.addEventListener("click",function(){
// alert("無名関数が動いたよ")
// })
// // 無名関数 + 変数
// clickedButtonHensu = function(){
// alert("clickedButtonHensuという変数に無名関数を代入して動いたよ")
// }
// btn = document.getElementById("id-button")
// btn.addEventListener("click", clickedButtonHensu)
// ↓はリロードするとアラートが出る。
// clickedButtonHensu ()
// // アロー関数
// clickedButtonHensu = () => {
// alert("アロー関数が動いてるよ")
// }
// function clickedButton(hensu) {
// alert("clicked button")
// hensu()
// }
// clickedButton(clickedButtonHensu)
// // アロー関数2(シンタックスシュガー)
clickedButtonHensu = () => alert("アロー関数の{}がないバージョンが動いてるよ")
btn = document.getElementById("id-button")
btn.addEventListener("click", clickedButtonHensu)
</script>
</html>