libro
www.tuyano.com
初心者のためのJavaScriptプログラミング入門

制御構文 (6/6)

作成:2010-04-01 11:14
更新:2010-05-11 17:04

■「関数」について

これは、厳密には「制御構文」というわけではありませんが……。しかし、「プログラムの流れを制御する」ということを考える上でとても重要なものですので、一緒に覚えておいてほしいものがあります。それは、「関数」です。

関数というのは、JavaScriptに最初から多数用意されています。呼び出すと様々な処理を行う、命令のようなものです。例えば、サンプルスクリプトで「alert」というものを使いましたね。これも関数です。関数は、
関数名 ( 引数1, 引数2, …… )
このような形になっています。引数(ひきすう)というのは、その関数を実行するのに必要な値を受け渡すためのもので、これはないものもあるし、1つだけ用意するもの、たくさん必要なものなど、関数によって違います。引数がないものも、()だけはちゃんと用意する必要があります。

先のalertなどは、1つだけ引数が必要でした。その引数を用意して呼び出すと、その値を画面に表示する働きをもつ関数だったわけです。JavaScriptには、こうした関数がたくさん用意されています。数値の計算を行うようなものや、テキストを操作するようなもの、配列を扱うもの、時間の計算をするもの等々、実に幅広いものがあります。

そして、それ以上に重要なのは、「関数は、自分で定義し、作ることができる」という点です。

例えば、長いスクリプトを作るようになると、だいたい「1つの処理を延々と書いている」というようなことはありません。スクリプトの中身はいくつかの処理に分けて考えることができるものです。例えば何かのデータを集計するようなスクリプトであれば、データを読み込んだりして収集する部分、データを集計して計算する部分、データを整えて出力する部分、といったように分けて整理できるでしょう。

こうした「ひとまとまりのスクリプト部分」を、他の部分から切り離していつでも呼び出せるようにすると、ずいぶんと便利になりますね。そこで、スクリプトの一部分を「関数」として定義できるようになっているのです。(下のリスト部分を参照)

定義した関数は、スクリプトのどこからでも呼び出して利用することができます。JavaScriptに用意されている関数と全く同じ感覚で利用することができます。

○利用例○

下のリストに掲載しているのは、myfuncという関数を呼び出すサンプルです。これは、引数として整数を渡すと、ゼロからその数までの合計を計算して返す働きがあります。関数には、ただ用意された処理を実行するだけのものと、実行した結果を呼び出し元に返すものがあります。値を返すタイプでは、「return」というものを使います。これは、この関数から抜け出る働きを持つ予約語です。このとき、returnの後に値や変数を用意しておくと、それを呼び出し元に送り返します。

ここでは、alert(myfunc(num));というようにしてmyfunc関数を呼び出していますね? myfunc(num)はnumまでの合計をreturnで返しますから、その返された値がalertの引数に設定されて表示される、というわけです。

また、今回はもう1つ、新しい関数を使っています。「prompt」というものです。これはJavaScriptに用意されているもので、画面にテキストを入力するためのダイアログを表示し、入力した値を返す働きがあります。引数に指定したテキストは、ダイアログに説明文として表示されます。

このpromptと、alertがわかれば、ユーザーから入力してもらい、結果を表示する、といった、ユーザーとの基本的なやりとりが出来るようになります。あわせて覚えておきましょう。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

・関数の定義
function 関数名 ( 引数1, 引数2, ……){
    ……実行する処理……
}


※サンプルスクリプト

<html>
	<head>
		<script type="text/javascript">
		<!--
		var num = prompt("数字を入力:");
		alert(myfunc(num));
		
		function myfunc(n){
			var total = 0;
			for(var i = 0;i <= n;i++)
				total +=  i;
			return total;
		}
		//-->
		</script>
	</head>
	<body>
		<H1>TEST.</H1>
	</body>
</html>

※関連コンテンツ

「初心者のためのJavaScriptプログラミング入門」に戻る