読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

処理をまとめて名前で呼び出す - 関数の定義

JavaScript

関数(function)とは

  • 一連の処理をひとまとめにして、名前をつけたものを「関数」と呼びます
  • 手間のかかる処理を関数として定義しておけば、必要なときに何度も呼び出すことができます
  • 関数は「function」キーワードで定義する
  • 関数は処理の材料となる「引数」を受け取ります
  • 処理が終了すると「戻り値」と呼ばれる処理結果を「return文」で返します

function 関数名(引数1, 引数2, ....){
 //処理
 return 戻り値;
}

マンガで分かる JavaScriptプログラミング講座:関数

  1. 自作関数:自分で定義して使う
  2. 組み込み関数:プログラミング言語がすでに組み込んであるもの
引数も戻り値もない関数の書き方
  • 関数は、function文を使って定義する
  • 定義した関数を実行するときは、関数名を記述するだけ
  • 定義の際も呼び出しの際も、関数名の後ろに必ず「()」をつける


関数の定義

function 関数名 () {
  処理;
}

定義した関数の呼び出し方

関数名 ();


《引数も戻り値もない関数の利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>関数の使い方</title>
</head>
<body>
<script>
  //関数の定義
  function sayHello() {
    console.log('こんにちは');
  }
  sayHello();  //関数の呼び出し
</script>
</body>
</html>


《実行結果》


関数の定義は記述順序に関係なく優先的に行われるので、関数の呼び出しが先に記述されてもいても問題なく動作します。

<script>
  sayHello();  //関数の呼び出し
  //関数の定義
  function sayHello() {
    console.log( 'こんにちは' );
  }
</script>
引数のある関数の書き方
  • 引数とは、関数に渡す材料
  • 引数は、複数指定することが可能(カンマ区切りで記述)


関数の定義

function 関数名 (引数を入れる変数名) {
  処理;
}

定義した関数の呼び出し方

関数名 (引数として渡す値);


《引数のある関数の利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>関数の使い方:引数あり</title>
<script>
  function sayHello(name) {
    console.log( name + 'さん、こんにちは' );
  }
  sayHello( 'よしお' );
</script>
</head>
<body>
</body>
</html>


《実行結果》

戻り値のある関数の書き方
  • 戻り値は、関数の処理結果
  • return文が実行されると、関数の呼び出し元に戻ります
  • 戻り値として指定した値が返却されるので、戻り値を代入する変数を用意して起きます


関数の定義

function 関数名 () {
  処理;
  return 戻り値;
}


定義した関数の呼び出し方

戻り値を入れる変数名 = 関数名 ();


《戻り値のある関数の利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>関数の使い方:戻り値あり</title>
<script>
  function calc() {
    var num = 0;
    for(var i=1; i<=10; i++) {
      num += i;
    }
    return num;
  }
  var result = calc();
  console.log( result );
</script>
</head>
<body>
</body>
</html>


《実行結果》


この場合 calc関数は、1から10までの値を合算した結果を戻り値として返します。
return文が実行されると、変数numの中身「55」が呼び戻し元に返却されます。

  • 関数の実行前
var result = calc();
  1. var result = calc(); 関数の呼び出し
  2. 関数の実行
  3. 戻り値の返却
  • 関数の実行後
var result = 55;


関数を呼び出して戻り値をコンソールに表示するだけの場合は、

  console.log(calc());
円の面積を求める

《引数と戻り値がある関数の利用》

  • 関数の中から別の関数を呼び出す
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>関数の使い方:引数と戻り値あり</title>
<script>
  function calcCircle(radius) {
    return radius * radius * 3.14;
  }
  function callFunc() {
    var area = calcCircle( 5 );
    return area;
  }
  console.log( callFunc() );
</script>
</head>
<body>
</body>
</html>
  1. callFunc開始
  2. calcCircle開始(半径の値5を代入)
  3. calcCircle終了(半径の値5で面積を求める計算の処理を実行)
  4. callFunc終了(計算の処理が戻した値を、コンソールログに表示)


《実行結果》

関数とメソッド
  • 同じような役割ですが、メソッドの場合には特定のオブジェクトと結びついて働きます(documentオブジェクトに対して、write()メソッドを呼び出すように)
  • 関数の場合は、オブジェクトに依存せず、関数名だけで呼び出します

組み込み関数

  • JavaScriptには特殊な処理を行うために以下のような組み込み関数が用意されています

関数説明
escape()文字列のエンコードを行います
unescape()文字列のデコードを行います
eval()引数をスクリプトとして実行します
isNaN()数値の場合は false、数値でない場合は true を返します
parseFloat()文字列を浮動小数点数に変換
parseInt()文字列を整数値に変換
taint()フォームの特定の要素を送信可能に設定
untaint()フォームの特定の要素を送信不可能に設定

ボタンごとに関数を用意した場合
  • 商品Aの関数、商品Bの関数、商品Cの関数を作成
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタンごとに関数を用意</title>
</head>
<body>
<h1>税込価格を求める</h1>
<p>商品A(1000円)<button onclick="zeiA()">税込価格</button></p>
<p>商品B(2000円)<button onclick="zeiB()">税込価格</button></p>
<p>商品C(3000円)<button onclick="zeiC()">税込価格</button></p>
<script>
var zeikomi;

function zeiA(){
  zeikomi = 1000 * 1.08;
  alert('税込価格は' + zeikomi+ '円です');
}
function zeiB(){
  zeikomi = 2000 * 1.08;
  alert('税込価格は' + zeikomi+ '円です');
}
function zeiC(){
  zeikomi = 3000 * 1.08;
  alert('税込価格は' + zeikomi+ '円です');
}
</script>
</body>
</html>
関数を汎用化した場合
  • 価格は変数(price)に代入される
  • 価格を引数として関数「zei()」に渡す
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタンごとに関数を用意</title>
</head>
<body>
<h1>税込価格を求める</h1>
<p><button onclick="zei()">税込価格を求める</button></p>
<script>
var zeikomi;
var kakaku;
var tax = 1.08;

function zei(){
  kakaku = prompt('求める金額を半角数字で入力してください。', '半角数字');
  zeikomi = kakaku * tax;
  alert('税込価格は' + zeikomi+ '円です');
}
</script>
</body>
</html>
商品名、価格を引数とした場合
  • 商品名は「name」、価格は「price」に代入される
  • 商品名と価格を引数として関数「zei()」に渡す
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>商品名、価格を引数とした場合</title>
</head>
<body>
<h1>税込価格を求める</h1>
<p>商品A(1000円)<button onclick="zei('商品A', 1000)">税込価格</button></p>
<p>商品B(2000円)<button onclick="zei('商品B', 2000)">税込価格</button></p>
<p>商品C(3000円)<button onclick="zei('商品C', 3000)">税込価格</button></p>
<script>
var zeikomi;
var tax = 1.08;

function zei(name, price){
  zeikomi = price * tax;
  alert(name+'の税込価格は' + zeikomi+ '円です');
}
</script>
</body>
</html>

ユーザー定義関数

  • 自作したオリジナル関数は「ユーザー定義関数」と呼びます

function 関数名 ( 引数1, 引数2, ・・・; ) {
  実行される処理
 return 戻り値 ;
}

戻り値
  • 関数を呼び出す際は、引数により関数へ値を引き渡すことが可能です。「戻り値」はこれと逆の働きをします
  • 関数で処理した結果(値)を「関数の呼び出し元」へ返す機能


関数を呼び出す

  • 「kansu();」

文字や数値を引数にする

  • 「kansu('商品A', 1000);」
  • この場合には「戻り値」を返す場所がない

returnで戻り値を返す

  • 「戻り値」として返す値を関数内で指定しておく
  • 「x = kansu(1000);」
  • これを実行する命令が「return」です
戻り値のある関数の書き方
  • 戻り値は、関数の処理結果
  • return文が実行されると、関数の呼び出し元に戻ります
  • 戻り値として指定した値が返却されるので、戻り値を代入する変数を用意して起きます

関数の定義

function 関数名 () {
  処理;
  return 戻り値;
}

定義した関数の呼び出し方

戻り値を入れる変数名 = 関数名 ();

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ユーザー定義関数の作成</title>
<script>
var tax = 1.08;
var price;

function zei(price){
  var x = price * tax;
  return x;
}
</script>
</head>
<body>
<script>
price = prompt('価格の数字を入力してください。','半角数字で入力');
  a = zei(price);
  alert('税込価格は' + a + '円です');
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ユーザー定義関数の作成</title>
<script>
function dollToYen(doll, rate) {
	var yen;
	yen = doll * rate;
	return yen;
}
</script>
</head>
<body>
<p>
<script>
var yen1 = dollToYen(100, 90);
document.write(yen1, "円<br>");

var doll2 = 50;
var rate2 = 88;
var yen2= dollToYen(doll2, rate2);
document.write(yen2, "円<br>");
</script>
</p>
</body>
</html>
関数とメソッド
  • 同じような役割ですが、メソッドの場合には特定のオブジェクトと結びついて働きます(documentオブジェクトに対して、write()メソッドを呼び出すように)
  • 関数の場合は、オブジェクトに依存せず、関数名だけで呼び出します

組み込み関数

  • JavaScriptには特殊な処理を行うために以下のような組み込み関数が用意されています

関数説明
escape()文字列のエンコードを行います
unescape()文字列のデコードを行います
eval()引数をスクリプトとして実行します
isNaN()数値の場合は false、数値でない場合は true を返します
parseFloat()文字列を浮動小数点数に変換
parseInt()文字列を整数値に変換
taint()フォームの特定の要素を送信可能に設定
untaint()フォームの特定の要素を送信不可能に設定

関数を作る

  1. 入り口(第1引数:男性か女性、第2引数:身長)
  2. 出口(標準体重)
  3. 関数名「sWeight」
  4. 「MAN」「WOMAN」は定数
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>標準体重</title>
</head>
<body>
<script>
function sWeight(man, height) {
	var weight;
	// 計算を行う
	if (man) {
		weight = (height -80) * 0.7;
	} else {
		weight = (height -70) * 0.6;
	}
	return weight; //値を返して関数を抜ける
}

var height; //身長
var weight; //体重
var MAN =1;
var WOMAN = -1;

//身長が180cmの男性の体重を求める
weight = sWeight(1, 180);	
  document.write('<h1>身長が180cmの男性の体重は');
  document.write(weight);
  document.write('kgです</h1>');

//身長が160cmの女性の体重を求める
height = 160;
weight = sWeight(WOMAN, height);
  document.write('<h1>身長が', height, 'cmの女性の体重は');
  document.write(weight);
  document.write('kgです</h1>');
</script>
</body>
</html>


よく使う関数は、外部ファイル化して呼び出します。

変数の有効範囲を知る

  • 変数の値が利用できる範囲が決まっています、それを「変数のスコープ」と呼びます
  • 関数内で宣言した変数は、関数内部でしか使うことができません。それを「ローカル変数」と呼びます
  • 関数外で宣言した変数は、プログラム全体で使うことができます。それを「グローバル変数」と呼びます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>変数のスコープ</title>
<script>
function testFunc() {
//  var num;
    num = 5;
}
</script>
</head>
<body>
<h1>
<script>
var num = 3;
testFunc();
  document.write(num, "<br>");
</script>
</h1>
</body>
</html>

※この場合、表示されるのはローカル変数に代入された値です。(変数宣言をコメントアウトしているから)
※「testFunc()」は引数を戻さないので「return文」は不要です

  • 以下の結果は?
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>変数のスコープ</title>
<script>
function test() {
  var num1 = 4;
  num2 = 5;
}
</script>
</head>
<body>
<h1>
<script>
var num1, num2;
  num1 = 3;
  num2 = 6;
test();
  document.write('<p>', num1, '</p>');
  document.write('<p>', num2, '</p>');
</script>
</h1>
</body>
</html>

まとめ

  • 関数を定義するには、functionキーワードを使用する
  • 関数は定義しただけでは実行されない
  • 関数は引数を受け取り、戻り値を返す
  • 関数の戻り値は、return文で指定する
  • 関数を呼び出すと、実引数が仮引数に代入される
  • 呼び出しをおこなったタイミングで実行される
  • スコープとは、変数が有効になる範囲
  • 関数内で宣言した変数は「ローカル変数」といい、スコープは関数の内部に限定される
  • 関数の外で宣言した変数は「グローバル変数」といい、スコープはプログラム全体になる