JavaScript | 関数リテラル（無名関数）

1. まず、関数リテラルって何？

関数リテラル（function リテラル）は「関数を作って変数に代入する書き方」です。普通の関数宣言と違って関数名を持たない（＝無名）ことが多く、変数名を通して呼び出します。

基本形：

let f = function(引数1, 引数2) {
  // 処理
  return 戻り値;
};

let f = function(引数1, 引数2) {
  // 処理
  return 戻り値;
};

ポイント：

• f がその関数を呼ぶための“名前代わり”になる
• 関数は「値」として扱える（変数に入れたり、別の関数へ渡したりできる）
• 「呼ぶ前に定義」しておく必要がある（＝関数宣言のホイスティングとは違う）

2. シンプルな例（1行ずつ説明）

let sayHello = function(name) {
  console.log("こんにちは、" + name + "さん！");
};

sayHello("太郎"); // → コンソールに "こんにちは、太郎さん！"

let sayHello = function(name) {
  console.log("こんにちは、" + name + "さん！");
};

sayHello("太郎"); // → コンソールに "こんにちは、太郎さん！"

解説：

1. let sayHello = で変数 sayHello を作る。
2. function(name) {...} が関数本体（無名関数）。
3. sayHello("太郎") で実行（呼び出し）。変数名で呼ぶイメージ。

3. 戻り値がある例（計算して返す）

let add = function(a, b) {
  return a + b;
};

let result = add(3, 4); // result は 7
console.log(result);    // → 7

let add = function(a, b) {
  return a + b;
};

let result = add(3, 4); // result は 7
console.log(result);    // → 7

解説：return で値を返し、それを別の変数で受け取れる。

4. コールバック（関数を引数に渡す） — 実用頻度高め！

関数を別の関数に渡して、その場で実行させることができます。これが コールバック。

function operate(a, b, func) {
  // func は「関数」
  return func(a, b);
}

// 無名関数を直接渡す
let avg = operate(10, 4, function(x, y) {
  return (x + y) / 2;
});

console.log(avg); // → 7

function operate(a, b, func) {
  // func は「関数」
  return func(a, b);
}

// 無名関数を直接渡す
let avg = operate(10, 4, function(x, y) {
  return (x + y) / 2;
});

console.log(avg); // → 7

解説：

• operate は「2つの数と関数を受け取って、その関数で処理する」ユーティリティ。
• 実行時に無名関数（function(x,y){...}）をそのまま渡している。

5. イベント処理の例（ブラウザでよく使うパターン）

HTML のボタンにクリック時の無名関数を渡すと、その場で処理できます。

<button id="myBtn">クリックしてね</button>
<script>
  document.getElementById("myBtn").addEventListener("click", function() {
    alert("ボタンがクリックされました！");
  });
</script>

<button id="myBtn">クリックしてね</button>
<script>
  document.getElementById("myBtn").addEventListener("click", function() {
    alert("ボタンがクリックされました！");
  });
</script>

解説：addEventListener に無名関数を渡すと、クリックされたときにだけ実行される関数になる。

6. 「定義→呼び出し」の順番に注意（ホイスティングの違い）

関数宣言（function foo(){}）はホイスティングで呼び出し前でも動くことがあるが、関数リテラルは変数に代入されるので呼び出す前に必ず定義しておく必要があります。

NG（エラーになります）：

greet(); // Uncaught TypeError: greet is not a function

let greet = function() {
  console.log("やあ");
};

greet(); // Uncaught TypeError: greet is not a function

let greet = function() {
  console.log("やあ");
};

正しくは、変数 greet を定義してから呼ぶこと。

7. 名前付き関数式（無名にしないパターン）

関数リテラルでも関数に名前を付けられます（デバッグでの表示や再帰で使うことがある）。

let f = function inner(n) {
  if (n <= 1) return 1;
  return n * inner(n - 1); // 再帰で inner を呼べる
};

console.log(f(5)); // → 120

let f = function inner(n) {
  if (n <= 1) return 1;
  return n * inner(n - 1); // 再帰で inner を呼べる
};

console.log(f(5)); // → 120

注意：関数名 inner は外側のスコープには見えない（f を使って呼ぶ）。

8. アロー関数（簡潔な代替）について（参考）

ES6以降はアロー関数 => でも同じように関数を変数に代入できます。書き方が短くて人気。

無名関数：

let add = function(a, b) { return a + b; };

let add = function(a, b) { return a + b; };

アロー関数：

let add = (a, b) => a + b;

let add = (a, b) => a + b;

細かい挙動の違い（this の扱いなど）があるので、覚えると便利ですが、まずは「代入できる関数」という考え方を押さえましょう。

9. 練習問題（レベル別） — 手を動かして覚えよう

以下はブラウザのConsoleやNodeで試してください。解答の下にステップ解説を付けます。

レベル1（初心者）

1. greet という変数に、引数 name を受け取って こんにちは、<name>！ と console.log する関数を代入して実行せよ。
   期待出力：こんにちは、花子！

解答

let greet = function(name) {
  console.log("こんにちは、" + name + "！");
};

greet("花子");

let greet = function(name) {
  console.log("こんにちは、" + name + "！");
};

greet("花子");

解説：変数 greet に関数を代入して、greet("花子") で呼ぶ。

レベル2（中級）

2. operate 関数（2つの数と関数を受け取る）を作り、無名関数を渡して 3 と 5 の最大値を求めるコードを作れ。期待出力：5

解答

function operate(a, b, func) {
  return func(a, b);
}

let max = operate(3, 5, function(x, y) {
  return x > y ? x : y;
});

console.log(max); // → 5

function operate(a, b, func) {
  return func(a, b);
}

let max = operate(3, 5, function(x, y) {
  return x > y ? x : y;
});

console.log(max); // → 5

解説：operate に無名関数を渡してその結果を受け取る。

レベル3（応用）

3. リスト [2, 5, 10] を受け取って、各要素を 3 倍にした配列を返す mapTriple 関数を作る。ただし、処理部分は「関数を引数で受け取る設計」にする（つまり、トランスフォーマー関数を引数で渡す）。

解答

function mapWith(arr, transform) {
  let res = [];
  for (let i = 0; i < arr.length; i++) {
    res.push(transform(arr[i]));
  }
  return res;
}

let numbers = [2, 5, 10];
let tripled = mapWith(numbers, function(n) {
  return n * 3;
});

console.log(tripled); // → [6, 15, 30]

function mapWith(arr, transform) {
  let res = [];
  for (let i = 0; i < arr.length; i++) {
    res.push(transform(arr[i]));
  }
  return res;
}

let numbers = [2, 5, 10];
let tripled = mapWith(numbers, function(n) {
  return n * 3;
});

console.log(tripled); // → [6, 15, 30]

解説：mapWith は配列と「変換関数」を受け取り、各要素に変換関数を適用して新しい配列を返す。

10. よくあるつまづき・Q&A

11. まとめ（初心者が覚えるべき要点）

• 関数リテラルは「関数を変数に代入」する書き方。
• そのまま引数に渡したり、イベントに指定したりできる（コールバックに最適）。
• 呼び出す前に必ず定義すること（ホイスティングに注意）。
• アロー関数でより短く書けるが this の違いに注意。
• 小さい問題を作って、コピペで実行して試すのが一番早く身に付く。