See the Pen Function literal (anonymous function) sample by MONO365 -Color your days- (@monoqlo365) on CodePen.
では、初心者向けに 「ボタンを押すと関数リテラル（無名関数）が動くHTMLサンプル」 を作ります。
ステップごとに理解できるよう、コメントも付けました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>関数リテラル 実践サンプル</title>
</head>
<body>
<h1>関数リテラル（無名関数）サンプル</h1>
<!-- ボタン1: 挨拶 -->
<button id="btnGreet">挨拶する</button>
<br><br>
<!-- ボタン2: 足し算 -->
<button id="btnAdd">3 + 5 を計算</button>
<br><br>
<!-- ボタン3: 配列を3倍 -->
<button id="btnTriple">配列 [2,5,10] を3倍</button>
<br><br>
<div id="output" style="margin-top:20px; border:1px solid #ccc; padding:10px;">
ここに結果が表示されます
</div>
<script>
// 出力用ヘルパー
function showResult(msg) {
const outputDiv = document.getElementById("output");
outputDiv.innerHTML = msg;
}
// ボタン1: 挨拶
document.getElementById("btnGreet").addEventListener("click", function() {
// 無名関数を直接 addEventListener に渡すパターン
let greet = function(name) {
return "こんにちは、" + name + "さん！";
};
showResult(greet("太郎"));
});
// ボタン2: 足し算
document.getElementById("btnAdd").addEventListener("click", function() {
let add = function(a, b) {
return a + b;
};
showResult("3 + 5 = " + add(3, 5));
});
// ボタン3: 配列を3倍
document.getElementById("btnTriple").addEventListener("click", function() {
let numbers = [2,5,10];
let triple = function(n) { return n * 3; }; // 無名関数を変数に代入
let newArr = numbers.map(triple); // map で適用
showResult("3倍した配列: [" + newArr.join(", ") + "]");
});
</script>
</body>
</html>
✅ 解説
- ボタンを押すと動く →
addEventListener("click", function() {...})
ここで無名関数を直接渡してイベント処理を記述。 - 変数に関数リテラルを代入
let greet = function(name) { ... };ボタンを押すたびにこの関数を呼び出す。 - 配列操作や計算も同じ
無名関数をmapや変数に入れて使える。 - 結果は div に表示
showResult()を使って動的に表示。
このHTMLをブラウザで開き、ボタンを押すとそれぞれの無名関数が動作するので、関数リテラルの挙動を体感できます。
