まずは、今回の講義で使う教材を準備しましょう。
以下のページに簡単な手順を書き記しましたので、参考にしてください。

ファイルが準備できたらassets/js/script.jsファイルをエディタで開きましょう。

配列の宣言（作成）

配列の宣言には2種類の方法がありますが、今は混乱のもとになるので、使いやすい方を利用していきます。
実行結果はchromeのデベロッパーツールを使いましょう。

var array = ['リンゴ', 'バナナ', 'イチゴ'];
console.log( array );

これは、『array』という変数に[‘リンゴ’, ‘バナナ’, ‘イチゴ’]を格納するという記述です。
そして、『console.log()』によってその格納した内容を展開しています。

では、この中からバナナだけを取得したい場合、どうするかというと

console.log( array[1] );

という書き方になります。
これは、配列に格納する際に自動的にキーが0から割り振られている性質を利用したものです。
リンゴが0番目、バナナが1番目といった具合です。

配列に要素を追加(push)

さきほどの配列に『メロン』を追加したい場合、どうするべきか。
ただの文字列であれば、後ろに『メロン』という文字を追加すればいいのですが、配列はそうはいきません。
そこで以下のコードを追加します。

array.push('メロン');
console.log( array );

結果は下のように表示されたでしょう。
[ “リンゴ”, “バナナ”, “イチゴ”, “メロン” ]

この『push』の特性として、配列の一番後ろに追加されるというものがあるので、覚えておきましょう。

配列のループ処理

配列がデータ構造として使われる理由として、ループ処理があります。
配列に格納されたものをループして呼び出すことにより、処理が簡略化できるというものです。

/*各個指定*/
console.log( array[0] );
console.log( array[1] );
console.log( array[2] );
console.log( array[3] );

/*ループ処理*/
array.forEach(function( value ) {
     console.log( value );
});

上の記述にある『各個指定』と『ループ処理』の結果は同じになります。
これぐらいの個数であればなんとかなりますが、これが100,200と増えた場合を考えるとぞっとします。

そういう意味では、このループ処理というのは必須の知識になります。

連想配列

この連想配列は、普通の配列と違い、「キー」と「値」のペアによるデータ構造となっています。

/*配列*/
var user_s = ['佐藤', 28, '090-1234-5678'];
console.log( user_s );
 
/*連想配列*/
var user = { name:'佐藤', age:28, tel:'090-1234-5678' };
console.log( user );

まず、注目してほしいのが配列の宣言は、連想配列の場合｛｝を使います。
そして、キーと値を:で区切っています。
例えば、「name」というキーには、「佐藤」という値が入っています。

では、その「佐藤」値を取得したい場合、どのようにすべきか。

/*配列*/
console.log( user_s[0] );
 
/*連想配列*/
console.log( user['name'] );

違いは明白ですね。
連想配列では、キーを指定することによって、値を取得しています。
キーを指定できるという事は、格納の順番が違っても呼び出せるという事です。
配列の場合、格納順が違うと呼び出す値も変わってしまいますね。

こういうところから、配列と連想配列の使い分けが重要になってきます。

連想配列の追加

では、先程定義した「user」に対して、キー「email」としてアドレスを追加しましょう。

user['email'] = 'mail@example.jp';
console.log( user );

「user」という配列に対し、新たなキーを指定して値を入れてしまうという、とても単純な書き方です。
実は、連想配列でpushは使えないので、注意しましょう。

連想配列のループ処理

連想配列には「for-in」という独自のループ処理の書き方があります。
これを使う事により、少ない記述でループ処理を行う事ができます。

for(var key in user) {
	console.log( key + '：' + user[key] );
}

キーの数だけループし、キーを取得。
『user[key]』によって値を取得となります。
シンプルでとてもわかりやすいですね。

多次元連想配列

複雑そうな名前ですが、単なる配列と連想配列の組み合わせです。

var userList = [
    { name:'佐藤', age:28, tel:'090-1111-1111' },
    { name:'鈴木', age:19, tel:'090-2222-2222' },
    { name:'三島', age:21, tel:'090-3333-3333' },
    { name:'足立', age:35, tel:'090-4444-4444' },
    { name:'荒木', age:40, tel:'090-5555-5555' },
];
console.log( userList );

先程の「user」を複数人分集めて、「userList」というグループにしました。
配列を扱いう際に一番多い形がこれだと思います。
第九回講義で行ったDB内容もこのような形で取得されます。

では、この配列を展開して名前：—、年齢：—才、電話番号：—–という形で表示してみましょう。

userList.forEach(function( value ) {
     console.log( '名前：'+value['name']+'、年齢：'+value['age']+'才、電話番号：'+value['tel']);
});

配列「userList」をforEachで展開することにより、値である連想配列「value」が取得できます。
その「value」に対してキーを指定することで値が取得されるという流れです。

JavaScriptの配列の参考記事

この他、配列の操作には様々なものがあります。
値の削除、キーや値を基準とした並べ替え、配列の結合など。

本講義では配列というものを理解するため、細かい操作は学習しませんでしたが、さらに深い知識を得るには以下の記事が参考になります。

【JavaScript入門】配列の使い方と操作まとめ（初期化・追加・結合・検索・削除） | 侍エンジニア塾ブログ（Samurai Blog）
JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。 – Qiita

今回の講義では、配列とはなにかとその操作方法を紹介しました。
実は、この配列というデータ構造はすべてのプログラミング言語で使われます。
そして、書き方はかなり似通っています。
言語によっては同じ書き方で配列を宣言できるので、一度覚えてしまえば応用が利きます。

しかし重要である一方、プログラミングしていくうえで大多数が躓いてしまう分野なので、理解できるまで何度も繰り返し学習する必要があります。
わからない箇所があったら、理解できるまで何度でも復習、質問してください。

今回学習した『JavaScript』を一度基礎から自主学習してみてください。
今回行った内容が深く理解できることでしょう。