配列 – 猫のスライドショーを作る その２

「猫のスライドショーを作る」２回目。

今回は前回のソースコードの中で使われている「関数」と「配列」というものを説明します。

関数

前回使った、ボタンをクリックする(onclick)と動き出すスクリプトは下のものです。

var slideshow=function(){
	var photos=[ '写真１のURL, '写真2のURL', '写真3のURL' ];
	var cnt=photos.length;
	var n=0;
	var elem=document.getElementById('slideshow');

	if(elem){
		var sub=function(){
			elem.innerHTML='<img src=\''+photos[n]+'\'/>';
			n=++n%cnt?n:0;
		}
	
		elem.innerHTML='<img src=\''+photos[n++]+'\'/>';
		setInterval(sub,5000);
	}
}

この赤い{と}に囲まれた部分をfunctionといい、日本語では関数と呼びます。
関数という名前ですが、数学で言う関数とは違います。ここでは数学の関数のことは考えないでください。

それ自体でひとつのプログラムのように振舞えるものを関数と呼びます。
つまり{と}の中で、ひとつの動作が完結します。

この関数を組み合わせることで、複雑なプログラムも作られていきます。

言い換えると、プログラムにおける一種のパーツのようなものです。パーツを取り替えることで様々に動作を変更することができます。

var slideshow=function(){
		中略
}

これは、関数をslideshowという入れ物に入れるという意味ですが、
関数に「slideshow」という名前をつけるという風に捉えてもらって差し支えありません。

関数の定義方法は他にもありますが、混乱するので今回はこのひとつしか説明しません。

関数のslideshowの中にもうひとつ関数がありますが、JavaScriptではご覧のように関数の中に別の関数を作ることが可能です。今回は、中の関数にsubという名前をつけています。

配列

青い文字のvar photosの中に、３つの写真のURLが入っています。
こういうデータを配列といいます。

配列の書き方も関数と同じように、いろいろありますが、混乱するので、今はひとつだけ説明します。

またデータが文章（文字）の場合は、シングルクオート ‘ かダブルクオート “ で括らなくてはいけません。

括る時はシングルクオートではじまったらシングルクオートで終わり、
ダブルクオートではじまったらダブルクオートで終わります。

データをまとめる

画像の大きさをそろえるために、URLと一緒に画像のサイズをセットしておくことにします。
それぞれの画像ごとに、URL、横幅、高さの３つを登録します。

３つのデータをまとめる方法をどうするか？

• 方法１．配列を３つ作って、それぞれの配列でURL、横幅、高さをセットする。
• 方法２．各画像ごとに「URL、横幅、高さ」をまとめたデータを作る。
  そのまとまりを配列にする。

方法１のやり方は次のイメージに似ています。

この場合、画像Ａのデータが必要なら、各倉庫を回って、画像Ａのデータを集めることになります。
では、方法２のやり方ではどうでしょう？

この場合は、画像Ａのデータが必要なら、画像Ａ専用倉庫に行けば、１カ所で全て揃います。
どちらのやり方でもスクリプトは実現できますが、今回は管理が簡単な方法２で行きます。

オブジェクト

各画像ごとに「URL、横幅、高さ」をまとめるわけですが、どうやってまとめましょう？
これも配列にすることが出来ます。[‘URL’,横幅,高さ]
これでもいいんですが、混乱の元です。

これはあくまで、イメージですがプログラムを書く時は本当にこんな混乱が発生します。
それが、こうなればトラブルは減ります。

配列の場合はデータを「何番目」という数字で管理しますが、
名前で物を管理できる物があります。それをオブジェクトと呼びます。

オブジェクトの詳細を説明する前に、次回は「配列の記法」を詳しく説明します。