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

スポンサーリンク


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

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

今回扱うのはJavaScriptの書き方です。
プログラミング言語にも様々なものがあり、実はJavaScriptは他のプログラミング言語にはない、独特で特殊な部分が多くあります。

こういうことを言うと初めての方は不安になるでしょうが、実はわたしは最初に学ぶプログラミング言語はJavaScriptではない方がいいと内心思っています。

それくらい、JavaScriptには特徴があります。ですから、ここに書いてあることが全部、他のコンピュータ言語でも通用するとは思わない方が無難です。

関数

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

var slideshow=function(){
	var photos=[ '写真1の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の中に、3つの写真のURLが入っています。
こういうデータを配列といいます。

[写真のURL1,写真のURL2,写真のURL3]

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

配列[ で始まり ] で終わる。
中に入るデータは , で区切る。

例:[1,2,3]

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

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

データをまとめる

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

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

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

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

倉庫が3つある。
それぞれの倉庫を「URL専用倉庫」「横幅専用倉庫」「高さ専用倉庫」に分ける。
3つの画像のURL、横幅、高さを、それぞれの専用倉庫に分けて入れる。

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

倉庫が3つある。それぞれの倉庫を「画像A専用倉庫」「画像B専用倉庫」「画像C専用倉庫」に分ける。3つの画像のデータを、それぞれの専用倉庫に入れる。

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

オブジェクト

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

「おい、画像Aの2番目をくれ!」
「あいよ。はい2番目。」
「サンキュー。おい、この数字やけにでかいな。これ本当に高さか?」
「あ?なに言ってんだよ。2番目は横幅だろ!」

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

「おい、画像Aの高さをくれ!」
「あいよ。はい高さ。」
「サンキュー。」

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

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


関連コンテンツ

スポンサーリンク

「配列 – 猫のスライドショーを作る その2」への1件のフィードバック

  1. こんばんは。
    ちゃぬめといいます。
    先日ご訪問いただいたみたいで。

    Tomさんのブログ、とても勉強になります。
    実は、フラ○カさんの件で迷っていたところでして・・。
    その件についてもよく分かりました。

    時々覗かせて頂き、勉強させて頂きます。
    ちなみに、もしよろしければ
    僕のブログのページについて問題点などを
    ご指摘頂ければ嬉しいのですが・・・。

ちゃぬめ へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください