JavaScript講座 : 関数の定義

JavaScriptでは関数の定義とオブジェクトのメソッドの定義は同じになります（メソッドの定義については別項で説明しています）。どちらもfunction()を使って機能を定義します。関数の基本的な書式は以下のようになります。

function 関数名(パラメータ){ 処理内容 }

JavaScriptでは関数名は英文字で始まるのが基本となっていますが、$や_などの記号も使うことができます。また、Firefoxなどでは日本語の関数名を指定しても動作します。
関数名は省略することもでき、その場合は匿名関数／無名関数となります。これに関しては後述します（→）。

関数のパラメータは引数とも呼ばれ、JavaScriptではカンマで区切って複数指定することができます。パラメータも省略することができます。パラメータを省略した場合でもargumentsにより任意の数、任意の位置のパラメータ値を取得することができます。このため、Java言語などとは異なり自由度の高い多態性（ポリモーフィズム）が手軽に処理できます。これに関しては別項で説明しています。

関数の処理内容は一般的なプログラムと変わりません。関数で得られた結果を呼び出された側に渡すにはreturnを使います。returnの後に渡したい値や文字列、オブジェクトなどを指定します。JavaScriptではreturnで返すものに制限はないため、C言語などのようにポインタ渡しなどで工夫しなければいけない、といったことはありません。

関数内でも変数を使用することができます。ただし、JavaScriptでは使用する変数の前にvarを付けないとグローバル変数とみなされます。つまり関数内でのみ変数を使用する場合には必ずvarを付けて宣言する必要があります。また、Firefox 2で搭載されているJavaScript 1.7のようにvarでなくletでも構いません。letの方が、より局所的に利用することができるので便利な面があります。ただ、2007年1月現在ではFirefox 2以外ではletの使用ができないので、実用的ではないでしょう。

それでは実際の関数の定義と呼び出し方法を見てみましょう。以下の関数は渡された2つの値の合計を出し、pxという文字を末尾に追加して呼び出し元に返すものです。（サンプル01を実行する）

function test(a, b){
var c = a + b;
return c+"px";
}
var str = test(2,3);
document.write(str);

この場合、testという名前の関数が定義され、パラメータとしてaとbに値が入ります。関数内ではaとbを加算し変数cに代入しています。この変数cはvar宣言されているのでローカル変数となり、この関数内でのみ参照可能となります。計算結果はreturnを使って返します。

関数を定義しただけでは実行されません。関数を実行するには関数名の後に()を付けます。()内には関数に渡すパラメータを指定します。パラメータが複数ある場合にはカンマで区切って列記します。パラメータとして渡す場合、C言語などと異なり関数側で定義された型と異なると駄目といった制限はありません。また、関数には変数でも定数でも値でもオブジェクトでも何でも渡すことができます。関数自体を渡すこともできます。
関数からの戻り値を受け取るには通常の代入を使います。代入は=記号を使い変数などに代入することができます。

JavaScriptでは関数の定義は上記で説明した基本的な文法以外にいくつかの方法があります。function()の定義の際に関数名を記述せずに=で定義内容を変数などに代入することができます。最初に定義したものと以下の関数定義は全く同じものになります。（サンプル02を実行する）

test = function (a, b){
var c = a + b;
return c+"px";
}
var str = test(2,3);
document.write(str);

また、Functionオブジェクトを作成することでも定義することができます。上記の関数定義と以下のものは、ほぼ同じになります。（サンプル03を実行する）

test = new Function ("return arguments[0]+arguments[1];");
document.write(test(2,3));

argumentsは関数に渡されるパラメータです。これに関しては別項で説明しています。

new Function()で作成した場合、以下のように変数に代入された内容を表示させるとFirefoxのように異なる結果を示すブラウザがあります。（サンプル04を実行する）

test = new Function ("return 'func. sample';");
document.write(test);

Firefoxでは以下のようにanonymous（匿名）関数と表示されます。

function anonymous() { return "func. sample"; }

Safariなどでは「function () { return "func. sample"; }」のように関数名なしで表示されます。anonymousという名前が表示されますが、実際にはanonymous()という関数名は存在しません。匿名関数／無名関数はイベントハンドラの設定や、関数名を重複させたくない場合など幅広く応用することができます。

JavaScriptでは関数内に同名の関数を定義することもできます。以下の例ではtest1関数内に、さらに同名のtest1関数を定義しています（サンプル05を実行する）

function test1(){
document.write("test1 func. ");
function test1(){
document.write("test1(2) func. ");
}
test1();
}
test1();

この場合、内部で定義された関数は外部から参照できないためローカル関数として利用することができます（ただし、かなり古いブラウザではエラーになることがあります）。上記のプログラムを実行すると以下のように表示されます。

test1 func.
test1(2) func.

関数内で一時的に使用したい関数を利用する場合に便利です。
関数を一時的に使用するだけであれば名前を指定せずに以下のように呼び出すことができます。（サンプル06を実行する）

(function (){
document.write("Function Sample ");
})();

function()の前後に()を付けて評価後に()として関数を実行させます。JavaScriptでは式を評価するeval()がありますが、上記のプログラムは以下のように記述しても同じ結果になります。（サンプル07を実行する）

eval(function (){
document.write("Function Sample (eval) ");
})();

eval()を利用すると文字列として定義された関数を以下のようにして実行することができます。（サンプル08を実行する）

funcStr = "document.write('Function Sample (eval+str)')";
test = eval("function (){"+funcStr+"}");
test();

文字列として読み込んだものを実行できるということはAjaxなど非同期通信を利用して、別のスクリプト（テキスト）ファイルを読み込んで任意のスクリプトを実行できる、ということになります。JSON形式も同様にeval()を使ってJavaScriptの配列／ハッシュとして扱えるように処理を行います。

定義された関数を変数に代入できると前に書きました。変数に代入できる、ということは配列変数に関数を定義しておき、呼び出すことができることになります。以下の例では配列変数funcArrayの2番目に定義された関数を実行するものです。（サンプル09を実行する）

配列の要素として関数を定義しておくことで添字を指定して呼び出すことができます（この手法はAdobe GoLiveなどで利用されています）。ただ、この場合では配列の何番目に、どのような内容の関数が定義されているかどうかを知っていなければなりません。これでは不便なので以下のように連想配列／ハッシュを使って定義すると、名前または配列の添字に名前を指定して呼び出すことができるようになります。（サンプル10を実行する）

JavaScriptでは配列もオブジェクトなのでfuncArray.multiのようにオブジェクトのメソッドを呼び出す形式で指定することができます。

ブラウザで使用されているJavaScriptではfunction()で関数を定義した場合にwindowオブジェクトのメソッドとして追加されます。以下のように関数を定義した場合、window.関数名とすると定義した関数が呼び出されます。（サンプル11を実行する）

function testFunc(){
document.write("関数定義サンプル");
}
window.testFunc();

本当にwindowオブジェクトに追加されているかどうかは以下のようにfor...inを使って確認することができます。（サンプル12を実行する）

function testFunc(){
document.write("関数定義サンプル");
}
var txt = "";
for(var i in window){
txt += i+" : "+window[i]+" ";
}
document.write(txt);

オブジェクトにメソッドとして追加する方法については別項で説明しています。

最終更新日：2007年1月8日

>目次に戻る