無名関数とは？その利点について【JavaScript、jQuery】

無名関数ってよく聞くけど、いったいどんなものなんだろう？普通の関数にせず、あえて使う利点ってあるの？

このような疑問にお答えします。

この記事を読めば、こんなことが分かるようになります。

• そもそも関数とはどんなものかが分かる
• 無名関数とはどんなものかが分かる
• 無名関数のメリットが分かる

プログラム言語を触っていると必ずと登場する無名関数という存在。僕も昔は何のことを言っているのか分かりませんでした。今回は、JavaScript、jQueryの無名関数の基本、書き方、利点などを解説していきます。

目次

• 関数とは
• 無名関数とは
• どういう時に使うのか
  • 1、引数として使うとき
  • 2、オブジェクトに後でメソッドを定義するとき
• まとめ

関数とは

まず、普通の関数についておさらいしておきましょう。関数とは、一連の動作に名前を付けて何度でも呼び出せるようにしたものです。

例えば下記のようなものを関数と呼びます。

// callNameという名前の関数を設定
function callName( name ){
  return '私の名前は' + name + 'です。';
}
// 呼び出す
console.log( callName('太郎') ); // 私の名前は太郎です。
// 名前を変えて何度でも呼び出せる
console.log( callName('ジョセフィーヌ') ); // 私の名前はジョセフィーヌです。

一度定義（設定）しておけば、何度も「私の名前は～」と書かなくても、呼び出すだけですぐに実行できます。今回は関数の中身が1行なのであまりメリットは感じられませんが、何行にもなる関数を1行で簡単に呼び出せるのが関数の一番の利点です。

無名関数とは

さて、本題の無名関数とは何かを解説していきます。

先程書いたように、関数は一連の動作を「名前を付けて」再度呼び出す事ができる仕組みです。無名関数とはその名の通り、「名前を付けずに」関数を定義することです。

書き方はいくつかありますが、以下のようなものになります。

// jQueryでクリックしたときに行う動作を無名関数で定義
$('p').click(function(){
  // クリックした後の処理
});

// 同じように、JavaScriptのsetTimeoutなどでも使う
setTimeout(function(){
  // 1000ミリ秒後の処理
}, 1000);

click()やsetTimeout()の中に入っているfunction(){ ... }の部分を無名関数と呼びます。僕がWeb初心者だった頃は意外とこの一言が書かれておらず、いまいち要領を得ずに使っていた記憶があります。

どういう時に使うのか

無名関数は基本的に、一度しか呼び出さない（後のために名前をつける必要がない）時に使う関数です。

無名関数を使うタイミングはいくつかに限られます。基本的には名前のついた普通の関数を使い、要所要所で無名関数を使うということになると思います。

1、引数として使うとき

先程例として上げた、click()やsetTimeout()の使い方がまさにそれで、恐らく一番多い使用法です。

// click()の引数に無名関数
$('p').click(function(){
  // クリックした後の処理
});

click()やsetTimeout()の第一引数には関数を入れますが、一度しか使わない処理の場合はわざわざ名前を付けません。二度と呼ばないので名前を付ける必要がないからです。

こういう時に、名前を付ける必要がない無名関数が役に立つわけです。

ちなみに余談ですが、click()の中の処理でも、複数回使うことがある場合は普通に関数を指定します。

// 複数の場所で呼ぶ場合は、名前を付けて使い回すのが良い

let count = 0;
// 関数を定義
function countPlus(){
  $('p').text( ++count );
}
// 最初に一回呼ぶ
countPlus();
// クリックするたびに再度呼ぶ
$('p').click( countPlus );

2、オブジェクトに後でメソッドを定義するとき

オブジェクトを作った後に関数を設定する場合、使い回さない専用の処理であれば、無名関数を使ったほうが便利です。名前を付けた関数でも同じことができますが、そうするとその名前の関数を他の場所で使えなくなるので、無名関数の方が合理的です。

let obj = { name: '太郎' };
obj.callName = function(){
  return '私の名前は' + this.name + 'です。';
}
obj.callName(); // '私の名前は太郎です。

まとめ

今回紹介した無名関数の使い方は一部ですが、よく使う使い方を紹介しました。

「無名関数」というなんか小難しい名前が付いているのもあり、苦手意識を持ちやすい部分ですが、慣れてくると便利に感じれると思うので、是非使ってみてください。

今回紹介したような基礎的な部分も、プログラミングスクールで学ぶことで体系的、効率的に学ぶことができます。

特に初心者の方で、Progateやドットインストール、書籍で勉強しながらも「もう少し専門的なところまで学びたい」や「分からないところがあるが気軽に聞ける相手がいない」などの悩みを持っている方は多いです。

プログラミングスクールではそういった初心者からWebエンジニアとして羽ばたくまでをプロの講師がサポートしてくれます。無制限のレビューや相談が出来るところも多いので、一度検討してみてはいかがでしょうか。

このブログでも各プログラミングスクールを比較しながら紹介していますので、興味がある方は是非ご覧ください。