jQueryの関数
jQueryを使用するとWebページ上でさまざまな機能や効果を演出できます。そこで関数に使用するのがfunctionです。この理解は重要です。
関数とは
関数とはなんらかの一連の処理を行う複数のプログラム集合群です。例えば引数で渡した数値を合算してその結果を返すなどが該当します。
関数は同一コード内はもちろん、他のコードからも呼び出すことができるので何度も利用する処理などは関数としてまとめておくと何度も記述する手間を省くことができたり、その処理の内容を変更する際に一箇所だけ変更するだけですむので作業量が軽減されます。
それでは関数を使用する・しないでコードを見比べてみましょう。
■関数を使用しない場合
$(function(){
$('#typo').on('mouseover', function(){
// 処理A
// 処理B
// 処理C
});
$('header').on('mouseover', function(){
// 処理A
// 処理B
// 処理C
});
$('footer').on('mouseover', function(){
// 処理A
// 処理B
// 処理C
});
});
■関数を使用した場合
$(function(){
$('#typo').on('mouseover', 関数名);
$('header').on('mouseover', 関数名);
$('#footer').on('mouseover', 関数名);
function 関数名(){
// 処理A
// 処理B
// 処理C
}
});
jQueryではさまざな利用ができる関数が数多く用意されています。一方でオリジナル関数を作成することもできます。一連の処理を関数にまとめることが可能です。
関数の作り方
関数の構文は以下の通りとなります。
■関数の作り方構文
function 関数 (引数1, 引数2…){
実行する処理(引数1と2は関数内で変数のように使用できる)
return 値;
}
上記のコードは以下のことを行っています。
- はじめにfunctionを記述する
- functionの後に任意の関数名を指定する
- 関数名の後に()を記述し、場合によっては「,」カンマ区切りで引数を指定する
- 引数を複数指定することも、省略することもできる
- ()の後に{}を記述し、その中に実行する処理を記述する
- {}内では、引数を変数と同様に使用できる
- 値を返す場合はreturn分を記述する
- return文は省略できる
上記を踏まえ、オリジナル関数を作成してみましょう。以下の関数では2つの引数(num1とnum2)を受け取り、関数内で2つの引数を足し算し、その値を呼び出し元に戻しています。呼び出し元に戻される値のことを返り値もしくは戻り値といいます。
■関数の作成例
function add(num1, num2){
return num1 + num2;
}
関数の呼び出し方
関数は以下の構文で呼び出すことができます。
■関数の呼び出し方
関数名(引数1,引数2…);
関数の後に()を記述し、その中に引数（関数内の処理で使用するデータ）を指定します。引数が指定されていない場合は呼び出し時も省略します。
以下の例では関数addを呼び出して2つの引数を足し算してその値を呼び出し元に返しています。
■関数の作成例
var added1 = add(1, 2);
var added2 = add(6, 7);
var added3 = added1 + added2;
function add(num1, num2){
return num1 + num2;
}
以下の構文では関数名を省略した構文となっております。このような関数のことを無名関数といいます。
■無名関数の作り方
function(引数1, 引数2…){
実行する処理（引数1と引数2は関数内で変数のように使用できる）
return 値;
}
じつはjQueryのメソッドの引数には、よく無名関数が使われています。以下コードのように何度も登場しているタイミングをコントロールするコードの例です。このコードでは、on()メソッドの引数に無名関数が指定しています。
■無名関数の使用例
$(function(){
$('#typo').on('mouseover', function(){
$('#typo').css('color', '#ebc000');
});
});
このように、引数として一連の処理を直接渡す場合に無名関数を利用します。
無名関数を変数に格納する方法
無名関数を以下構文のように変数に格納すると、その変数名を用いて関数を呼び出しことが可能です。以下の場合、「変数名」を「関数名」と呼ぶことも可能です。
■無名関数を変数に格納する例
var 変数名 = function(引数1, 引数2…){
実行する処理（引数1と引数2は関数内で変数のように使用できる）
return 値;
}
■無名関数の使用例
var add = function(num1, num2){
return num1 + num2;
}
var added11 = add(1,2); //変数addedには「3」が格納される
上記構文のように、無名関数に関数名を割り当てると、通常の関数のように別の箇所から関数を呼び出すことが可能になります。ただし、通常の関数と名前付き無名関数には関数を実行できるタイミングに違いがあります。
通常の関数は、作成箇所に関わらず、その関数を使用できるスコープ内であれば、どこからでも呼び出すことができます。一方、変数に格納した無名関数は、以下のように関数の作成箇所よりも下部でないと呼び出すことができません。
■通常の関数
a(); //実行できる
function a(){
//処理A
}
a(); //実行できる
■変数に格納した無名関数
b(); //実行できない
var b = function(){
//処理B
};
b(); //実行できる
