【JavaScript入門】無名関数

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

無名関数

　無名関数（匿名関数）とは、名前を持たない関数のことです。通常、関数は「function 関数名(引数) { ... }」のように名前がついていますが、無名関数では「function(引数) { ... }」のように書き、関数名を付与しません。そのため、この関数を直接呼び出すには、変数に代入したり、他の関数の引数（コールバック関数）に渡したり、オブジェクトのプロパティに格納したりして利用します。

１．基本的な構文

function(引数) {
  // 処理
  return 戻り値;
}

　このように、function キーワードの直後に名前がなく、引数リストと本体を記述します。関数名がないので、単独では呼び出せません。

２．無名関数の主な使い方

2.1. 変数へ代入

変数に無名関数を格納し、その変数名を通じて関数を呼び出します。

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

console.log(myFunc(2, 3)); // => 5

この場合、関数名の代わりに変数名 myFunc を用いて呼び出します。

2.2. オブジェクトのメソッドにする

オブジェクトのプロパティとして関数を無名関数で定義すれば、それは「メソッド」と呼ばれます。

let obj = {
  greet: function(name) {
    return name + 'さん、いらっしゃいませ！';
  }
};

console.log(obj.greet('桜井')); // => "桜井さん、いらっしゃいませ！"

2.3 コールバック関数

　他の関数の引数として無名関数を渡すことがよくあります。これは「コールバック関数」と呼ばれ、非同期処理やイベントハンドラなどで頻繁に登場します。

function process(callback) {
  console.log('処理開始');
  callback();
  console.log('処理終了');
}

process(function() {
  console.log('コールバック関数が呼ばれました');
});

実行すると、callback() の箇所で無名関数が呼び出され、そこに書いたコードが実行されます。

2.4 即時実行関数 (IIFE)

　定義してすぐに呼び出したいときは、無名関数を丸括弧で囲み、さらに「( )」を末尾につけて実行します。

(function(message) {
  console.log('メッセージ:', message);
})('こんにちは');

無名関数を定義した直後に (引数) をつけることで、その場で一度だけ実行される関数を作れます。

３．サンプルHTMLコード

　次の例を「myAnonymousFunctions.html」というファイル名で保存し、ブラウザで開いて開発者ツール（コンソール）の出力を確認してください。

【myAnonymousFunctions.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>myAnonymousFunctions.html</title>
</head>
<body>
  <h1>無名関数（匿名関数）のサンプル</h1>
  <p>ブラウザの開発者ツール(コンソール)で結果を確認してください。</p>

  <script>
    // 1. 変数に代入して使う
    let add = function(x, y) {
      return x + y;
    };
    console.log('変数に代入した無名関数:', add(5, 7));

    // 2. オブジェクトのメソッドとして無名関数を定義
    let menu = {
      message: '今日のおすすめは',
      showRecommend: function(food) {
        return this.message + food + 'です。';
      }
    };
    console.log('メソッド:', menu.showRecommend('ハンバーグ'));

    // 3. コールバック関数
    function doSomething(callback) {
      console.log('処理1');
      callback();
      console.log('処理2');
    }
    doSomething(function() {
      console.log('コールバックの無名関数が呼ばれました');
    });

    // 4. 即時実行関数 (IIFE)
    (function(name) {
      console.log('即時実行:', name, 'のプログラムを実行中...');
    })('花子');
  </script>
</body>
</html>

実行結果

デバッグコンソールの出力

変数に代入した無名関数: 12
メソッド: 今日のおすすめはハンバーグです。
処理1
コールバックの無名関数が呼ばれました
処理2
即時実行: 花子 のプログラムを実行中...

まとめ

無名関数（匿名関数）は function キーワードの後に名前がない関数。
単体では呼び出せないため、変数代入・オブジェクトのプロパティ・コールバック引数などで利用される。
即時実行関数（IIFE）は、定義後すぐに呼び出す構文が可能。
無名関数は小規模な関数や一度しか使わない関数を定義するときに便利で、変数スコープや柔軟な処理の分割に活用される。

　無名関数は、イベント処理や非同期コールバック、メソッド定義など JavaScript のさまざまな場面で用いられます。特に後ほど学ぶアロー関数（=>）でも無名関数に近い形で関数を定義できますので、一度慣れておくとスムーズに活かせるでしょう。