第11回 JavaScriptで学ぶ配列の仕組み
配列とは
複数の要素（値）の集合を格納・管理するのに用いられるデータ構造が配列である。数学のベクトルおよび行列に近い概念であり、実際にベクトルおよび行列をプログラム上で表現する場合に配列が使われることが多い。同様に複数要素の集合を管理するデータ構造（コレクションあるいはコンテナ）には連結リストやハッシュテーブルなどがあるが、通常はメモリアドレス上での連続性の違いなどから配列とは区別される。1次元の配列は特に線形配列 (linear array) とも呼ばれる。
とありますが、文字を読んで理解できるものではありません。
実際に、配列を作って操作して、理解を深めましょう。
配列の使い方
ファイル準備
では、配列を操作するため、ファイルを準備しましょう。
C:\xampp\htdocs内にarray.htmlファイルを作成し、以下をコピペします。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>TEST Array</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> </head> <body> <div id="main" class="container"> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <script type="text/javascript"> </script> </body> </html>
以降、配列を操作するJavaScriptは
<script type="text/javascript"></script>
で挟まれた中に書いていきます。
配列の宣言（作成）
配列の宣言には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
まとめ
- 配列とは値を格納するのに用いられるデータ構造である
- 配列の宣言、追加にはそれに応じた書き方がある
- 配列を展開するループ処理はデータを扱う上で必須知識である
- 配列と連想配列には違いがあり、書き方から違う
- 多次元連想配列は配列と連想配列の組み合わせである
今回の講義では、配列とはなにかとその操作方法を紹介しました。
実は、この配列というデータ構造はすべてのプログラミング言語で使われます。
そして、書き方はかなり似通っています。
言語によっては同じ書き方で配列を宣言できるので、一度覚えてしまえば応用が利きます。
しかし重要である一方、プログラミングしていくうえで大多数が躓いてしまう分野なので、理解できるまで何度も繰り返し学習する必要があります。
わからない箇所があったら、理解できるまで何度でも復習、質問してください。
次回講義までの自主学習
学習サイトをピックアップしたので、以下のリンクから自分に合ったものを使って自主学習しましょう。
基礎知識
HTML & CSS | プログラミングの入門なら基礎から学べるProgate[プロゲート]
HTML/CSS入門編のレッスン一覧 | プログラミング学習サービス【paizaラーニング】
HTML入門 (全15回) – プログラミングならドットインストール
CSS入門 (全17回) – プログラミングならドットインストール
実践！ウェブサイトを作ろう (全16回) – プログラミングならドットインストール
STEP UP!!
はじめてのJavaScript (全11回) – プログラミングならドットインストール
JavaScript入門編のレッスン一覧 | プログラミング学習サービス【paizaラーニング】
JavaScript | プログラミングの入門なら基礎から学べるProgate[プロゲート]
Bootstrap 4入門 (全22回) – プログラミングならドットインストール
さらにSTEP UP!!
PHP入門編のレッスン一覧 | プログラミング学習サービス【paizaラーニング】
PHP | プログラミングの入門なら基礎から学べるProgate[プロゲート]
PHP入門 (全30回) – プログラミングならドットインストール
SQL | プログラミングの入門なら基礎から学べるProgate[プロゲート]
MySQL入門 (全36回) – プログラミングならドットインストール
理想はすべてのレッスンをやることです。
今は目で見て手で触れる時間を増やすときなので、時間が許す限りやってみましょう。
