では、ブラウザ上で ボタン押下やイベント処理を使って無名関数とアロー関数を体感できる演習サンプル を作ります。
下のコードを HTML ファイルとして保存してブラウザで開くと、ボタンを押すとそれぞれの挙動が確認できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>無名関数とアロー関数の比較演習</title>
</head>
<body>
<h2>無名関数 vs アロー関数</h2>
<button id="btn1">無名関数でクリック</button>
<button id="btn2">アロー関数でクリック</button>
<div id="output"></div>
<script>
// 出力用関数
function log(msg){
const out = document.getElementById("output");
const p = document.createElement("p");
p.textContent = msg;
out.appendChild(p);
}
// --- 無名関数の場合 ---
let counter1 = {
name: "無名関数",
value: 0,
handleClick: function() {
setTimeout(function(){
this.value++; // this は setTimeout 内で window を参照
log(this.name + " value=" + this.value); // undefined value=NaN
}, 100);
}
};
document.getElementById("btn1").addEventListener("click", function(){ counter1.handleClick(); });
// --- アロー関数の場合 ---
let counter2 = {
name: "アロー関数",
value: 0,
handleClick: function() {
setTimeout(() => { // アロー関数は外側 this を使用
this.value++;
log(this.name + " value=" + this.value);
}, 100);
}
};
document.getElementById("btn2").addEventListener("click", function(){ counter2.handleClick(); });
// --- 配列操作のデモ ---
const nums = [1,2,3,4,5];
log("配列 nums = " + nums.join(", "));
// 無名関数で 2倍
const doubled1 = nums.map(function(x){ return x*2; });
log("無名関数で2倍: " + doubled1.join(", "));
// アロー関数で 2倍
const doubled2 = nums.map(x => x*2);
log("アロー関数で2倍: " + doubled2.join(", "));
</script>
</body>
</html>
✅ この演習でわかること
- 無名関数の this の挙動
- ボタン1を押すと
undefined value=NaNと出る setTimeout内の this がグローバルになるため
- ボタン1を押すと
- アロー関数の this の挙動
- ボタン2を押すと
アロー関数 value=1と正しく増える - 外側の this をそのまま参照できる
- ボタン2を押すと
- 配列操作での書き換え
- 無名関数とアロー関数で map した結果を比較
💡 練習アレンジ案
- 配列の filter や reduce を同じく無名関数／アロー関数で書き換えて出力してみる
- ボタンごとに counter を増減させて、this の違いを体感
- setInterval を使って自動カウントで this の挙動を確認
See the Pen Comparative Exercise: Anonymous Functions vs. Arrow Functions by MONO365 -Color your days- (@monoqlo365) on CodePen.
