2013/08/20

基礎から学べるJavaScript!配列と関数を使おう

配列と関数を使おう JavaScript初級編

目次

配列って?

変数を扱ってソースコードを書いている時、いくつものデータを扱う場合があると思います。

たとえば、5人の誕生日を扱いたいなんて時があったり、はたまた10人を超える人数の成績を扱いたいなんて時もあったりするかと思います。

そんな時どうしますか?
これまでに説明した内容で実践するとなると、

var s1 = 78;
var s2 = 67;
var s3 = 89;
var s4 = 77;
...

と、10人分の変数を作って扱う方法しかありません。

しかしこれではコードが複雑になってしまう恐れもありますし、利用する際に指定する変数を間違えてしまう可能性もあります。何よりもそんなにイチイチ打ち込むのは面倒くさいですよね。

そんな場合に便利な機能がJavaScriptには用意されています。それが配列です。

オブジェクトや値を複数まとめて扱うことができます

配列を使うには、次のように宣言します。

var 配列名 = [値1,値2,値3,...];

10人の成績を配列に入れるためには次のように記述します。

var score = [78,67,89,90,70,75,67....];

そしてこのように配列に入れた要素は

配列名[n]

という名前で扱えるようになります。 配列は0から始まるので、score[0]、score[1]、score[2]という名前になります。

if文

ちなみに、[]内の数字は添字といって、要素の指定をするためのものです。 また、配列の要素数は

配列名.length

で取得出来ます。 では実際に使ってみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブログ用サンプル</title>
<script type="text/javascript">
	function Sample1(){
		var score = [78,67,89];
		for (var i=0;i<score.length;i++){
			alert((i+1)+"番目の人の点数は"+score[i]+"です。");
		}
	}
Sample1();
</script>
</head>
<body>
</body>
</html>

繰り返し文を使うことでだいぶソースコードがスッキリしましたね。

このように、たくさんのデータを扱う際には配列と繰返し文を利用することによって、ソースコードも簡単に書けるようになり、見た目もスッキリし、可読性が上がります。

配列応用編 多次元配列

さらに配列の応用です。

前項で説明した配列は一次元配列でした。 つまり、番号の振ってある一列に並んだ箱にデータを格納していくイメージです。

そこにさらに行の概念を加えて、一列に並んだ箱が複数行あるようなイメージの二次元配列を扱うこともできるようになります。

if文

配列を作成する場合には、

配列名 = [[値,値,...],[ 値,値,...],[ 値,値,...],...];

とし、

最初の配列に値を代入するには、

配列名[0][0] = 値;

と記述します。

例えば、次のように記述します。

mobile = [
		["docomo","sony","xperia"],
		["softbank","apple","iPhone"],
		["au","samsung","galaxy"],
	];

ではこれを用いて実際に動くソースコードを見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ブログ用サンプル</title>
<script type="text/javascript">
function sample2(){
	var mobile = [
			["docomo","sony","xperia"],
			["softbank","apple","iPhone"],
			["au","samsung","galaxy"],
		];

	for (var i=0; i<3;i++){
		for(var j=0;j<3;j++){
			alert(mobile[i][j]);
		}
	}
}

sample2();
</script>
</head>
<body>
</body>
</html>

ソースコードをコピー&ペーストして、ブラウザで開いてみてください。

このように、配列i行j列の2次元配列では、

配列名[i][j]

と指定することで、任意の要素を扱えるようになります。

処理をまとめておく 関数

続いて関数について説明します。

JavaScriptを始めとするプログラミング言語においての関数とは、中学校や高校の数学で学んだような、y=2x+5というようなものを指すわけではありません。

同じ処理を何度も何度も書くのは手間がかかることは配列でも述べましたが、共通する処理を違う場所で書くのも面倒ですよね。一連の処理をまとめておき、呼び出しを容易にしようというものです。

たとえば、電話を掛けるときには

  • ①受話器を上げる
  • ②相手の電話番号を入力する
  • ③電話をかける
  • ④受話器を戻す

というように一連の作業は決まっています。

プログラムでも、複雑なプログラムを書くようになってくると、同じ処理を何度も行う必要が出てきます。 その都度同じ処理を書いていたのでは面倒ですし、もし書いたソースコードにバグが存在していたとしたら、修正範囲が広がってしまい、保守性の低下につながります。

そこで、関数を利用します。一連の処理を関数としてまとめておき、必要とあらばその都度呼び出せばいいのです。

関数を定義するには、

function 関数名(){
処理文;
...
}

と記述し、まとめておきたい一連の処理を{}の中に記述しておきます。呼び出す場合には

関数名();

と記述するだけです。

では実際に使ってみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ブログ用サンプル</title>
<script type="text/javascript">
function Sample3(){
	var x = 1;
	var y = 2;
	var z = x + y;
	alert("関数が実行され、足し算が行われました。\n計算結果は"+z+"です");
}

Sample3();
Sample3();

</script>
</head>
<body>
</body>
</html>

上記のソースコードをコピー&ペーストしてブラウザで開いてみてください。 ダイアログボックスが二度出てくると思います。

関数内部にダイアログボックスを表示させる処理が書かれているので、Sample1という関数が二度呼びだされているということになります。

関数を実行する際には

  • ①関数の呼び出し
  • ②関数内の処理
  • ③呼び出し元へ戻る

という動きになります。

関数を使う上で便利な機能は他にもあり、データの受け渡しを行うことが出来ます。

この受け渡しするデータのことを引数戻り値と言います。

function name(引数){
処理...
return 戻り値;
}

と、記述します。 たとえば、足し算をする関数に2つの数値を渡して結果を得たいとします。

function math(x,y){
	var z = x+y;
	return z;
}

と関数を定義し、呼び出す際には

var a = math(3,4);

と記述することで、関数に引数を渡して、計算結果を変数aに代入することができます。

つまり、呼び出し元から見た場合

  • 渡すデータ = 引数
  • 貰うデータ = 戻り値

であり、関数から見た場合には

  • 貰うデータ = 引数
  • 渡すデータ = 戻り値

となります。混同しないように注意してください。

では上記を踏まえて実際に動くサンプルを見てみましょう

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ブログ用サンプル</title>
<script type="text/javascript">
function Sample2(a,b){
	var x = a;
	var y = b;
	var z = x + y;
	alert("関数が実行され、足し算が行われました。\n計算結果は"+z+"です");
	return z;
}

var a = Sample2(3,4);
alert("戻り値は"+a+"です");
</script>
</head>
<body>
</body>
</html>

引数に3と4を指定して関数を呼び出して、戻り値を取得していることがわかると思います。 引数や戻り値には変数を使うこともできるので、処理の幅が広がります。

ちなみに、関数は引数や戻り値を指定しなくても利用することが出来ます。

関数では注意 ローカル変数とグローバル変数

関数内部で宣言した変数はローカル変数と言い、関数外で宣言した変数はグローバル変数と言います。

ローカル変数は関数内でしか利用できませんが、グローバル変数はソース内のどこからでも利用できます。

このように、変数を利用できる範囲のことをスコープと呼びます。

上のサンプルコードを例に取ると、変数x、y、zはローカル変数となり、変数aはグローバル変数となります。そのため、変数x、y、zは関数Sample2内でしか使用できませんが、変数aはソースコード内のどこからでも使用することが出来ます。

関数内で変数を利用する際にはスコープを意識して利用しないと、予期せぬタイミングでグローバル変数を書き換えてしまい、他の処理に影響を及ぼすといったことになりかねません。

まとめ

配列を利用することで、多くのデータを扱うことが出来るようになります。また、関数を利用してソースコードを記述することによって、処理の幅が広がります。

過去に示してきたサンプルでも、一連の処理を関数としてまとめておき、呼び出して利用していましたので、見なおしてみるとわかりやすいと思います。

関数を意識してプログラムを書くようにすると、見やすくかつ分かりやすいソースコードになるでしょう。