JavaScriptの関数
JavaScriptの関数とは、ある機能を実現するための処理に名前（関数名）を付けて定義した処理のかたまりで、定義した関数は必要になったときに呼び出して使用することができます。
一般的には、定義した関数を使用することを「関数を呼び出す」といい、その関数を呼び出す側を「呼び出し元」といいます。
関数の呼び出しイメージ
関数を定義する書式
function 関数名() {
実行する処理;
}
function【ﾌｧﾝｸｼｮﾝ】文を使用して関数を定義します。
定義後は関数を表すfunction【ﾌｧﾝｸｼｮﾝ】オブジェクトが返されます。
定義した関数を「呼び出す」書式
関数名();
コード例
function output(){
document.write("出力用関数です。</br>")
}
for(var i = 0; i < 5; i++){
output();
}
コードの解説
1~3行目【function output(){
document.write(“出力用関数です。</br>”)
}】
function【ﾌｧﾝｸｼｮﾝ】文を使用して、関数「output」を定義します。
実行する処理としてdocument【ﾄﾞｷｭﾒﾝﾄ】オブジェクトのwrite【ﾗｲﾄ】メソッドを使用して文字列と改行を出力します。
4~6行目【for(var i = 0; i < 5; i++){
output();
}】
for【ﾌｫｰ】文を使用して関数を呼び出します。
5回文字列が出力されます。この処理の部分が「呼び出し元」になります。
引数がある関数定義の書式
function 関数名(引数1,引数2,・・・・){
実行する処理
}
関数に値を渡して利用することができます。関数に渡す値のことを「引数」といいます。
引数がある関数の呼び出しの書式
関数名(引数1,引数2,・・・・・・・・・)
コード例
function output(count){
document.write(count+"回目の関数呼び出しです。</br>")
}
for(var i = 0; i < 5; i++){
output(i+1);
}
コードの解説
1~3行目【function output(count){
document.write(count+”回目の関数呼び出しです。</br>”)
}】
関数「output」を定義します。「count」という名前の引数を設定して次のfor文の処理で引数「count」に値を設定します。
4~6行目【for(var i = 0; i < 5; i++){
output(i+1);
}】
for文で5回処理を繰り返します。変数「i」は繰り返しの中で0~4に変化するので呼び出し関数の「output」の引数内の変数「i」に1を加算して引数「count」の値が1~5に変化するように引数に値を設定します。
実行結果
戻り値がある関数宣言の書式
function 関数名(){
実行する処理;
return 戻り値;
}
関数は、処理をした結果を「呼び出し元」に返すことができます。呼び出し元に返す値は「戻り値」といい「戻り値」を「呼び出し元」に返す場合は、return【ﾘﾀｰﾝ】キーワードを使用します。
戻り値がある関数の呼び出しの書式
var 変数名 = 関数名();
「呼び出し元」で関数の「戻り値」をうけとるには上記の書式で「変数」に「戻り値」を代入します。
コード例
function output(){
return "戻り値です。";
}
for(var i = 0; i < 5; i++){
var result = output();
document.write(result+"</br>");
}
コードの解説
1~3行目【function output(){
return “戻り値です。”;
}】
関数「output」を宣言して、return【ﾘﾀｰﾝ】キーワードに戻り値として文字列を設定します。
4~7行目【for(var i = 0; i < 5; i++){
var result = output();
document.write(result+”</br>”);
}】
for文で5回の繰り返し処理を定義します。
varキーワードを使用して変数「result」を宣言し、代入演算子「=」を使用して関数「output」の戻り値を代入します。
documentオブジェクトのwriteメソッドを使用して変数「result」に格納されている値と改行を出力します。
実行結果
引数と戻り値がある関数の定義の書式
function 関数名( 引数1,引数2,・・・・){
実行する処理;
return 戻り値;
}
引数と戻り値がある関数の呼び出しの書式
var 変数名 = 関数名(引数1,引数2,・・・・);
コード例
function triangle(width,height){
return width*height/2;
}
var triangle2D = [[5,5],[10,10],[20,10]];
for(var i = 0; i < 3; i++){
var width = triangle2D[i][0];
var height = triangle2D[i][1];
var result = triangle(width,height);
document.write(i+1+"つ目の三角形の面積は"+result+"です。</br>");
}
コードの説明
1~3行目【function triangle(width,height){
return width*height/2;
}】
function【ﾌｧﾝｸｼｮﾝ】文を使用して関数「triangle」オブジェクトを作成します。
引数に三角形の底辺の長さを代入する変数「width」と三角形の高さの長さを代入する変数「height」を設定します。
戻り値として、return【ﾚﾀｰﾝ】キーワードに三角形の面積を求める計算式を設定します。
4行目【var triangle2D = [[5,5],[10,10],[20,10]];】
varキーワードを使用して、2次元配列変数の「truangle2D」を宣言し、3つの三角形の「底辺の値,高さの値」を2次元配列に代入します。
5~8行目【for(var i = 0; i < 3; i++){
var width = triangle2D[i][0];
var height = triangle2D[i][1];
var result = triangle(width,height);】
for文を使用して 2次元配列の「行の添え字」にする変数「i」を宣言して繰り返し処理の中で0~2の値を代入します。
varキーワドを使用して三角形の底辺の長さを代入する変数「width」を宣言して2次元配列「triangle2D」のi行の1列目を参照して変数「width」に代入します。
つぎに、三角形の高さの長さを代入する変数「height」を宣言して2次元配列「triangle2D」のi行の2列目を参照して変数「height」に代入します。
varキワードを使用して変数「result」を宣言して、関数「triangle」を呼び出し、関数の実行結果（三角形の面積）を変数「result」に代入します。
9行目【document.write(i+1+”つ目の三角形の面積は”+result+”です。</br>”】
documentオブジェクトのwriteメソッドを使用して0から始まる変数「i」に1を加算して1から始まりにして回数を表示し、面積の値が格納されている変数「result」の値を表示します。
実行結果
以上で、JavaScriptの関数についての解説を終了します。ありがとうございました。