配列

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

マンガで分かる JavaScriptプログラミング講座 第2版



第1部 JavaScriptプログラミングの基本
第8話:配列

目次



マンガ














マンガ台詞

【1Page】
先生:前回はループ処理 を教えた
    今回は そのループ処理を 200%活用する 方法を紹介する
先生:それじゃあ クラス全員の名前を 100回ずつ 表示してみろ
遊:まかせて!
        for (var i = 0; i < 100; i ++) {
            document.writeln("足立");
        }
        for (var i = 0; i < 100; i ++) {
            document.writeln("安藤");
        }
        for (var i = 0; i < 100; i ++) {
            document.writeln("内木");
        }
        :
    面倒だ!
    やってられるか!
【2Page】
先生:そうだろうな
遊:えっ?
先生:実は こういう時に 便利な方法がある それが『配列』だ
3人:配列?
先生:『配列』(Array)は 変数をまとめて 作る方法だ
        var aArray = new Array(30);
    こう書くことで 配列を作ることができる
    変数『aArray』に 30個の要素を持った 配列を入れる
    という意味だ
【3Page】
先生:この配列に 値を入れれば 短く書ける
    試しに 書いてみよう
        var nameArray = new Array(30);
        nameArray[0] = "足立";
        nameArray[1] = "安藤";
        nameArray[2] = "内木";
        :
        for (var i = 0; i < nameArray.length; i ++) {
            for (var j = 0; j < 100; j ++) {
                document.write(nameArray[i] + " ");
            }
        }
    足立 足立 足立 足立 足立 足立 足立 足立 足立 足立 足立 …… 
    安藤 安藤 安藤 安藤 安藤 安藤 安藤 安藤 安藤 安藤 安藤 …… 
    内木 内木 内木 内木 内木 内木 内木 内木 内木 内木 内木 …… 
    木村 木村 木村 木村 木村 木村 木村 木村 木村 木村 木村 …… 
    工藤 工藤 工藤 工藤 工藤 工藤 工藤 工藤 工藤 工藤 工藤 …… 
先生:それじゃあ プログラムの 説明をするぞ
    『aArray』の後の 『[数字]』は 何番目の要素かを 指定するものだ
        nameArray[0] = "足立";
        nameArray[1] = "安藤";
        nameArray[2] = "内木";
【4Page】
守:最初の要素が 『0』になっていますけど 『1』じゃないんですか?
        nameArray[0] = "足立";
先生:いいところに気付いた プログラムでは 数字は『0』から始まる
    30個の要素が入った 配列を作ると それぞれの要素を指す数字は 0から29になる
遊:変なの
先生:あと 『aArray.length』 も説明しよう
    これは配列内の 要素の数を表す
        for (var i = 0; i < nameArray.length; i ++) {
【5Page】
先生:だいぶ 短く書けるように なっただろう
遊:そうね
    でも 配列を作る のが面倒ね
    もっと楽をしたいわ
先生:その気持ちは大切だ
    簡単に書く方法も紹介しておこう
        var nameArray = new Array("足立", "安藤", "木村", …);
    もっと簡単に 書きたいならこうだ
        var nameArray = ["足立", "安藤", "木村", …];
遊:楽になったわ!
【6Page】
先生:配列の添え字 (カッコ内の値)は 数字だけでなく 文字列も使える
        var tensuuArray = new Array();
        tensuuArray["足立"] = 65;
        tensuuArray["安藤"] = 78;
        tensuuArray["内木"] = 87;
        :
    これは こうも書ける
        var tensuuArray = {"足立" : 65, "安藤" : 78, "木村" : 43, …};
    見にくければ 途中で折り返し てもよい
        var tensuuArray = {
             "足立" : 65
            ,"安藤" : 78
            ,"内木" : 87
            ,…
        };
    こういった 文字列で作る配列は 『連想配列』や 『ハッシュ』と呼ぶ
    配列の説明は だいたいこんな ところだ



説明

この章では、『配列』について学びます。

プログラムでは、前回学んだ『ループ処理』のように、何度も同じような処理を行うことが多いです。たとえば、クラスの全員の名前を出席簿順に並べた表を印刷したいとします。これは、出席番号の数値と、名前の文字列を出力することの繰り返しです。

また、出席簿の一覧を出力する処理は、お誕生日会の出席簿や、遠足の出欠表などを出力する際に、同じ表を活用できると便利です。そういった際に、その都度生徒の名前をプログラムとして書くのは面倒です。できれば1回だけ書いて、あとはそのデータを利用したいものです。

プログラムではこういった、出席簿のようにリストになったデータを、簡単に、そしてシンプルに書く方法が用意されています。それが『配列』です。

それでは以下、『配列』について解説していきます。



『配列』

『配列』の基礎知識

『配列』は、内部に変数をいくつも格納した、特殊な変数のことです。変数が『箱』だとすると、『配列』はその箱がいくつも入った『引き出し』のようなものだと考えるとよいでしょう。

 以下、『配列』を取り扱う時の基礎的な知識を紹介します。

『配列』の内部の変数のことを『要素』と呼びます。

『配列』は、『new Array(内部の変数の個数)』という命令で作ります。『配列の変数名[参照する変数の番号]』というように指定すれば、その『配列』の『要素』(配列内の変数)に、値を格納したり、取り出したりすることができます。この時、『[〜]』内に指定した数字のことを、『配列の添え字』と呼びます。

var nameArray = new Array(3);
nameArray[0] = "足立";

また、『配列変数名.length』とすることで、配列の要素数(配列内の変数の数)を知ることもできます。

nameArray.length;

『配列』の使用例

以下、簡単な例を示して説明していきます。

たとえば『var nameArray = new Array(30);』というように、30個の要素を持った配列変数『nameArray』を作成したとします。この場合には、『nameArray[0]』とすることで、0番目の変数を利用することができます(プログラムでは、数字は『1』からではなく、『0』から始まります)。この場合、『nameArray.length』の値は、内部に30個の変数が格納されているので『30』となります。

『配列』のこういった仕組みを利用すれば、『[〜]』内の数字を1ずつ変えていくことで、配列内の全ての変数を利用することができます。

for (var i = 0; i < nameArray.length; i ++) {
    document.write(nameArray[i] + " ");    // 『0』から『29』までの30個の変数が参照される
}

また、『配列の添え字』には、数字だけではなく、文字列も使えます。文字列を添え字にした配列のことを、『連想配列』や『ハッシュ』と呼びます。

tensuuArray["足立"] = 65;
tensuuArray["安藤"] = 78;
tensuuArray["内木"] = 87;

それでは以下、さらに詳しく『配列』について学んでいきます。



『配列』の様々な作り方

『配列』は、以下のようにして作れます。

var nameArray = new Array(3);
nameArray[0] = "足立";
nameArray[1] = "安藤";
nameArray[2] = "内木";

また、以下のような方法でも作ることができます。これは、先に示したプログラムと同じ『配列』が作成されます。

var nameArray = new Array("足立","安藤","内木");

var nameArray = ["足立","安藤","内木"];

それぞれ、『配列』の1番目の『要素』に『足立』が、2番目の『要素』に『安藤』が、3番目の『要素』に『内木』が入ります。

また、それ以外の方法として、『.split()』という命令を使うことでも、『配列』を作ることができます。

var name = "足立,安藤,内木";
var nameArray = name.split(",");    // 『,』で分割して配列に

初期化サイズよりも大きな値の指定

JavaScriptでは、初期化した配列の大きさよりも、大きな数字を指定した場合は、自動でそのサイズまで『配列』が大きくなります。

var nameArray = new Array(3);
alert(nameArray.length);    // 『3』と表示

nameArray[5] = "近藤";
alert(nameArray.length);    // 『6』と表示(0〜5までの『要素』があるので合計6となる)

上記の例では、『nameArray[5] = "近藤";』とすることで、『配列』の5番目の『要素』の値を設定しています。こうすることで、まだ存在しない3番目の『要素』から、5番目の『要素』までが、新規に作成されました。

『5番目の要素まである』ということは、『0〜5』までの『要素』が存在していることになります。そのため、『6』つの『要素』が配列内にあるということになります。

このような内部処理が行われた結果、2回目に表示した『nameArray.length』の値は、『6』に変化しました。



『連想配列』(ハッシュ)の作り方

『連想配列』(ハッシュ)は、以下のようにして作ります。

var tensuuHash = new Array();
tensuuHash["足立"] = 65;
tensuuHash["安藤"] = 78;
tensuuHash["内木"] = 87;

この時、『配列』の『添え字』に利用している文字列のことを、『連想配列』(ハッシュ)の『キー』と呼びます。

また、以下の方法でも作れます。これは、先に示したプログラムと同じ配列が作成されます。

var tensuuHash = {"足立" : 65 ,"安藤" : 78 ,"内木" : 87};

上記のプログラムは、『キー』が『足立』で、その値が『65』、『キー』が『安藤』で、その値が『78』、『キー』が『内木』で、その値が『87』の、『連想配列』(ハッシュ)が作成されます。



『多次元配列』の作り方

『配列』は、内部に別の『配列』を入れ子にすることができます。こういった配列のことを『多次元配列』と呼びます。

『多次元配列』は、以下のように作ります。

var nameArray = new Array(2);

nameArray[0] = new Array(3);
nameArray[0][0] = "足立";
nameArray[0][1] = "安藤";
nameArray[0][2] = "内木";

nameArray[1] = new Array(3);
nameArray[1][0] = "木村";
nameArray[1][1] = "工藤";
nameArray[1][2] = "近藤";

『nameArray[0] = new Array(3);』のようにして、『配列』の中に、『配列』を入れているわけです。

配列の入れ子が1つの『多次元配列』は、『2次元配列』と呼ばれます。

上記の『2次元配列』は、以下のように簡略化して書くことができます。

var nameArray = [["足立","安藤","内木"], ["木村","工藤","近藤"]];

『多次元配列』の値にアクセスする際は、『nameArray[1][2]』のように『[〜]』を並べて書きます。

var nameArray = [["足立","安藤","内木"], ["木村","工藤","近藤"]];
alert(nameArray[1][2]);

この場合は、『近藤』と表示されます。

nameArray[0]nameArray[1]
nameArray[ ][0]足立木村
nameArray[ ][1]安藤工藤
nameArray[ ][2]内木近藤

『配列』だけでなく、『連想配列』も多次元にすることができます。また、『配列』の中に『連想配列』を入れたり、『連想配列』の中に『配列』を入れることもできます。

var classArray = new Array(2);

classArray[0] = new Array(4);
classArray[0]["名前"] = "足立";
classArray[0]["国語"] = 65;
classArray[0]["数学"] = 72;
classArray[0]["社会"] = 43;

classArray[1] = new Array(4);
classArray[1]["名前"] = "安藤";
classArray[1]["国語"] = 87;
classArray[1]["数学"] = 77;
classArray[1]["社会"] = 76;

alert(classArray[1]["名前"] + "の国語" + classArray[1]["国語"]);

この場合は『安藤の国語87』と表示されます。



『配列』操作

『配列』の操作の中から、特によく使うものを紹介します。

以下、説明中の『a』『b』『c』は下記の配列とします。

var a = ["aa","bb"];
var b = ["EE","FF"];
var c = [1,5,7,3];
よく使う命令
意味使い方説明
.length配列の要素の個数x = a.length;変数『x』に『2』が入る
.push(array)配列を末尾に追加a.push(b);変数『a』が『"aa","bb","EE","FF"』になる
.push(値)値を末尾に追加a.push("cc");変数『a』が『"aa","bb","cc"』になる
.unshift(array)配列を先頭に挿入a.unshift(b);変数『a』が『"EE","FF","aa","bb"』になる
.unshift(値)値を先頭に挿入a.unshift("cc");変数『a』が『"cc","aa","bb"』になる
.pop()末尾の要素を削除a.pop()変数『a』が『"aa"』になる
.shift()先頭の要素を削除a.shift()変数『a』が『"bb"』になる
.concat(array)連結した配列x = a.concat(b);変数『x』に『"aa","bb","EE","FF"』が入る
.sort()小さい順に並び替えるc.sort();変数『c』が『1,3,5,7』になる
.reverse()逆向きに並び替えるc.reverse();変数『c』が『3,7,5,1』になる
.join("文字列")配列を文字列で連結x = a.join("/");変数『x』に『aa/bb』が入る
.toString()配列を文字列にするx = a.toString();変数『x』に『aa,bb』が入る

さらに詳しい演算子の説明は、以下を参考にしてください。


参考:とほほのJavaScriptリファレンス - 配列(Array)



サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード (右クリックから保存してください)

sample1.html』(クラス全員の名前を100回)を表示

sample1b.html』(短く表記)を表示

sample1c.html』(さらに短く表記)を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。

≫ 「マンガで分かる JavaScriptプログラミング講座」トップに戻る


『柳井政和』 の初心者向け講座

『柳井政和』 のサイト

マンガで分かる Java入門講座
Javaのオブジェクト指向を解説するサイトです。
Webページ100ページ以上、マンガ800ページ以上で
解説を行っています。


PuzzleAndGame.com
JavaScriptで作ったゲームが中心のサイト。
タワーディフェンス、リバーシ、パズルゲームなどを公開。
Webブラウザ、PCアプリ、Androidアプリとして動作。


クロクロ・ツールズ
全てJavaScriptで作られた、ブラウザから利用できる各種アプリケーションです。
HTML5に対応しているモダンブラウザから使えます。
ブックマークに入れるなどして、ご利用ください。


『柳井政和』 執筆の本

「裏切りのプログラム ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2016年8月27日発売、予約注文可能です)。
2016年の松本清張賞で、最終候補に残った小説です。
プログラマー鹿敷堂桂馬が、女性社長の安藤裕美とともに、
IT業界で起きた事件の解決に挑みます。
プログラマーが探偵役のエンタメ・ミステリーです。


「JavaScript 仕事の現場でサッと使える! デザイン教科書」
プログラミング初心者向けに、様々な利用例を元に、プログラムとJavaScriptを解説する本。
プログラム自体が初めての方にも、なるべく分かりやすいように書いています。
技術評論社より発売。


「プログラマのためのコードパズル〜JavaScriptで挑むコードゴルフとアルゴリズム」
コードゴルフやアルゴリズム問題、その解説、関連知識の紹介を行った本です。
プログラマーなら、楽しめる内容になっています。
技術評論社より発売。


「マンガでわかるJavaScript」
本講座が書籍になりました。 本用に、より分かりやすく、読みやすく、再構成して書き直しました。
よければ、手にとっていただけると嬉しいです。
秀和システムより発売。


「マンガでわかるJavaプログラミング」
プロ部の面々が、今度はjavaのプログラミングに挑戦。
javaを1から学ぶ人向けの書籍です。
秀和システムより発売。 詳細情報


古い本
HTML5&JavaScript本格ゲームプログラミング 〜ライブラリ自作からはじめるブラウザゲーム開発
マンガでわかるAndroidプログラミング 第2版
Google Androidアプリ開発ガイド 第3版
プロならば知っておくべきWebコーディング&デザインの定石100

『柳井政和』 開発のWebアプリやソフトなど

PuzzleAndGame.com
全自動4コマ
全自動百科事典(オートペディア)
全自動似顔絵
新刊・新作カレンダー
EX リバーシ
全自動迷路
めもりーくりーなー
ラジオ・ブラウザ
PCソフト
マンガで分かる JavaScriptプログラミング講座
スクリーンセーバー「なう」
開発元:クロノス・クラウン




Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2017 Cronus Crown (c)1997-2017 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 - 弊社への連絡 -
までお願いします。