関数の使い方

広告

まず関数の使い方について簡単に確認します。

例として2つの値を比較し、より大きいほうの値を取得するようなサンプルを作成します。 

var num1, num2, num3;

num1 = 18;
num2 = 25;
num3 = 43;

if (num1 > num2){
  alert(num1 + "と" + num2 + "では" + num1 + "が大きい");
}else{
  alert(num1 + "と" + num2 + "では" + num2 + "が大きい");
}

if (num1 > num3){
  alert(num1 + "と" + num3 + "では" + num1 + "が大きい");
}else{
  alert(num1 + "と" + num3 + "では" + num3 + "が大きい");
}

if (num2 > num3){
  alert(num2 + "と" + num3 + "では" + num2 + "が大きい");
}else{
  alert(num2 + "と" + num3 + "では" + num3 + "が大きい");
}

毎回if文を使って2つの値を比較しています。このように同じような処理が何度も同じスクリプトの中に出てくる場合、同じような処理を別に分けて記述し、必要に応じて呼び出すことが出来ます。例えば先ほどのサンプルは次のように記述することができます。 

function hikaku(n1, n2){
  if (n1 > n2){
    alert(n1 + "と" + n2 + "では" + n1 + "が大きい");
  }else{
    alert(n1 + "と" + n2 + "では" + n2 + "が大きい");
  }
}

var num1, num2, num;

num1 = 18;
num2 = 25;
num3 = 43;

hikaku(num1, num2);
hikaku(num1, num3);
hikaku(num2, num3);

プログラムの中で繰り返し利用される一連の処理をまとめておき、必要な時に呼び出して使います。まとめておけば同じ処理は一度しか記述する必要がありません。メリットとして単に記述量が減るという点だけではなくプログラムも見やすくなり、またチェックも1回で済む為にプログラムの記述ミスも減らすことができます。

関数は同じスクリプト内に複数作成することができます。また関数から関数の呼び出し元へ値を返すことも可能です。では次のページ以降で関数の使い方について詳しく見ていきます。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script1_1.js">
</script>

</body>
</html>

function hikaku(n1, n2){
  document.write("<p>");

  if (n1 > n2){
    document.write(n1 + "と" + n2 + "では" + n1 + "が大きい");
  }else{
    document.write(n1 + "と" + n2 + "では" + n2 + "が大きい");
  }

  document.write("</p>");
}

hikaku(30, 42);
hikaku(82, 16);

上記を実際にブラウザ見てみると次のように表示されます。

p1-1

( Written by Tatsuo Ikura )