JavaScriptにおける関数は、オブジェクトの一種です。つまり「単なる値」として扱うことができます。このため、リテラル表現が用意されており、リテラル表記された関数を変数に格納することもできます。関数の引数に関数を渡すことや返り値として関数を返すことも可能です。この性質を利用して「コールバックパターン」や「クロージャの生成」などを実現できます。

HTML5でも重要なコールバック関数

 ある関数(もしくはメソッド)が関数cを受け取り、その実行過程で関数cを実行するようなパターンをコールバックパターンといいます。この時の関数cをコールバック関数といいます。後で呼び出してもらうための関数=コールバック関数を用意しておき、その関数を渡した相手の関数/メソッドから折り返し呼び出してもらうという動作が、「後で電話を掛け直してもらうこと」に似ていることから、コールバックと呼ばれるのです。

 コールバック関数は、HTML5のAPIでもよく利用されています。リスト8は、Geolocation APIで現在の位置情報を取得する例です。navigation.geolocation.getCurrentPositionメソッドは、現在位置の取得に成功したタイミングで、引数として渡された関数を呼び出し、位置情報を処理します。ここでは、関数リテラルをそのまま引数として渡しています。

リスト8●Geolocation APIで位置情報を取得する例
[画像のクリックで拡大表示]

 関数リテラルの代わりにfunction文を使って、名前を持つコールバック関数を定義することもできます(リスト9)。もっとも、再利用しない使い捨てのコールバック関数をわざわざ命名するのは無駄です。名前を付ければ、それだけ名前衝突の危険も高まります。

リスト9●リスト8をfunction文を使うように書き換えたもの
[画像のクリックで拡大表示]

 ほかによくあるコールバックの例としては「イベントリスナー」があります。イベントリスナーでは、あらかじめ登録しておいたコールバック関数が、イベントが発生したタイミングで呼び出されます。

この先は会員の登録が必要です。有料会員(月額プラン)は登録月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら