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

では、JavaScriptの「関数リテラル（無名関数）」について、初心者向けにかみ砕いて説明していきますね。例題も交えて「なるほど！」と思えるように整理します。

そもそも「関数リテラル」って何？

• 関数リテラルとは「名前をつけずに、その場で関数を作る書き方」です。
• 作った関数は 変数に代入して使う のが基本。

👉 つまり「関数を値として扱える」イメージです。

書き方の基本

let 変数名 = function(引数1, 引数2, ...){
  // 実行したい処理
  return 戻り値;
};

let 変数名 = function(引数1, 引数2, ...){
  // 実行したい処理
  return 戻り値;
};

• function のあとに名前は書かない（＝無名関数）
• 代入した変数名を使って呼び出す

例題1：シンプルな関数リテラル

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

sayHello(); // → こんにちは！

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

sayHello(); // → こんにちは！

• sayHello という変数に「無名関数」を代入
• 呼び出すときは sayHello() と書く

例題2：引数と戻り値あり

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

console.log(add(3, 5)); // → 8

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

console.log(add(3, 5)); // → 8

• add に「足し算する関数」を代入
• add(3, 5) と呼び出すと計算結果が返る

例題3：関数を引数に渡す

関数リテラルの真骨頂は「関数をそのまま渡せる」こと。

function calcAndShow(x, y, func){
  console.log("結果:", func(x, y));
}

// 無名関数を直接渡す
calcAndShow(10, 4, function(a, b){
  return a - b;
}); // → 結果: 6

function calcAndShow(x, y, func){
  console.log("結果:", func(x, y));
}

// 無名関数を直接渡す
calcAndShow(10, 4, function(a, b){
  return a - b;
}); // → 結果: 6

• calcAndShow は「2つの数と処理方法（関数）」を受け取る
• その場で「引き算する関数」を作って渡している

注意点

• 関数リテラルは代入後にしか使えない

hello(); // ← エラー！
let hello = function(){ console.log("Hi"); };

hello(); // ← エラー！
let hello = function(){ console.log("Hi"); };

→ 関数宣言（function hello(){}）と違って「巻き上げ（hoisting）」されない。

まとめ

• 関数リテラル = 名前なし関数を変数に代入する書き方
• 一度きりの処理や、関数を引数に渡すときに便利
• 宣言より後でしか呼び出せない点に注意
• 後に学ぶ「アロー関数」につながる基礎

👉 ここまで理解できると、次のステップとして アロー関数（(a, b) => a + b のような書き方）に進むとスムーズです。