JavaScript 関数

スポンサーリンク
スポンサーリンク

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の関数についての解説を終了します。
ありがとうございました。

スポンサーリンク
スポンサーリンク

フォローする

スポンサーリンク
スポンサーリンク