では「イベント処理」で 関数リテラル と アロー関数 を比較してみましょう。ボタンをクリックしたときにメッセージを表示する例です。
関数リテラルで書く場合
<button id="btn1">クリックしてね</button>
<script>
let btn = document.getElementById("btn1");
btn.addEventListener("click", function(){
console.log("ボタンがクリックされました！（関数リテラル）");
});
</script>
function(){ ... }をそのまま渡している- これが「無名関数（関数リテラル）」の典型的な使い方
アロー関数で書く場合
<button id="btn2">こっちもクリック</button>
<script>
let btn2 = document.getElementById("btn2");
btn2.addEventListener("click", () => {
console.log("ボタンがクリックされました！（アロー関数）");
});
</script>
()=>{ ... }と書けるので短くスッキリ- 1行だけなら
{}も省略できる
違いが出る場面（thisの扱い）
イベント処理では this が「イベントを起こした要素」を指すことがあります。
<button id="btn3">thisの違い</button>
<script>
let btn3 = document.getElementById("btn3");
// 関数リテラル
btn3.addEventListener("click", function(){
console.log(this.id); // → "btn3"
});
// アロー関数
btn3.addEventListener("click", () => {
console.log(this.id); // → undefined（外側のthisを参照）
});
</script>
- 関数リテラル：
thisはクリックされたボタンを指す - アロー関数：
thisは外側のスコープを参照するので、ボタンを指さない
まとめ
- 関数リテラル
- イベント処理で
thisを使いたいときに便利
- イベント処理で
- アロー関数
- 短く書ける
thisを使わない処理ならこちらがスッキリ
💡 初心者へのおすすめ：
- 基本はアロー関数でOK
- ただし「イベントの中で
thisを使いたいとき」は関数リテラルを選ぶ
では「配列操作」で 関数リテラル と アロー関数 を比較してみましょう。ここはアロー関数の便利さが一番わかりやすい場面です。
例題：配列の要素を2倍にする
関数リテラルで書く場合
let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(function(num){
return num * 2;
});
console.log(doubled); // → [2, 4, 6, 8, 10]
mapに「無名関数」を渡している- ちょっと長めの書き方になる
アロー関数で書く場合
let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // → [2, 4, 6, 8, 10]
functionやreturnを省略できてスッキリ- 1行処理ならこの書き方が圧倒的に読みやすい
例題：偶数だけ取り出す
関数リテラル
let numbers = [1, 2, 3, 4, 5, 6];
let evens = numbers.filter(function(num){
return num % 2 === 0;
});
console.log(evens); // → [2, 4, 6]
アロー関数
let numbers = [1, 2, 3, 4, 5, 6];
let evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // → [2, 4, 6]
例題：配列の要素を順番に表示
関数リテラル
let fruits = ["apple", "banana", "cherry"];
fruits.forEach(function(fruit){
console.log(fruit);
});
アロー関数
let fruits = ["apple", "banana", "cherry"];
fruits.forEach(fruit => console.log(fruit));
まとめ
- 関数リテラル：昔からある書き方。
thisを使う場面やコンストラクタで必要。 - アロー関数：配列操作（map, filter, forEach など）では圧倒的に読みやすい。
💡 初心者へのおすすめ：
配列操作では アロー関数を使うのが基本。
「短く書ける・読みやすい・処理の意図がすぐわかる」ので、実務でもほとんどこちらが使われます。