【初心者でも分かる】JavaScriptの配列と連想配列の違いとは?



【初心者でも分かる】JavaScriptの配列と連想配列の違いとは?

JavaScriptを学んでいくうえで、どうしても避けることができないのが「配列と連想配列」です。先に言っておきますが、配列と連想配列は別モノですよ。確かに名前は似ていますが、全く別のものであることをまずは押さえましょう。

そして、名前が似ていることに加え聞きなれない難しい言葉。初心者にとってはどうもわかりづらい内容です。今回はそんな配列と連想配列について、具体例を交えつつ詳しく解説していきます。

目次
  1. JavaScriptの配列と連想配列の違いとは?
  2. JavaScriptの配列とは?
  3. 配列の定義は「Arrayもしくは[]」
  4. 配列を作成してみる
  5. JavaScriptの連想配列とは?
  6. 連想配列の定義は「{ }もしくは Object 」
  7. 連想配列を作成してみる
  8. まとめ

JavaScriptの配列と連想配列の違いとは?

image ざっくりと特徴を先に述べてしまうと、以下の通りです。

【配列】 * メリット:複数の値が持てる
* デメリット:何の値かがわかりにくい

【連想配列】 * メリット:1つの値に1つのキーワードでわかりやすい
* デメリット:複数の値が持てない

ここではとりあえず「配列と連想配列はメリットとデメリットが反対のものだ」くらいの理解ができれば大丈夫です。

後述する実際のコードを見るとよりわかりやすいかと思います。

JavaScriptの配列とは?

image それでは、ここからはまずJavaScriptの「配列」について説明していきます。

配列の定義は「Arrayもしくは[]」

配列を使用する際は配列の宣言をする必要があります。宣言するときは「Arrayもしくは[]」を使用します。ちなみに、JavaScriptは自由度の高いプログラミング言語です。なので、配列ひとつにしても様々な書き方があります。

これがJavaScriptの魅力でもあるのですが、初心者には難しく感じるのもまた事実です。

これからコードを具体的に記入しながら説明をしていきますが、どれも「hoge という配列を Array もしくは[]で宣言して、0には foo という値を入れ、1には bar という値を入れ、2には piyo という値を入れる」ということをしています。

言葉だけでは非常に難しく思えてしまうかもしれませんが、そのことを念頭におきながら読んでいただけると理解がスムーズかと思われます。それでは説明にいってみましょう。

配列を作成してみる

ここからは、実際に配列を作っていきます。

まずは配列を宣言

配列の宣言の仕方にはさまざまありますが、ここでは大まかに「[ ]と new Array の2つがある」ということを覚えておくとよいでしょう。

ただし、new Array に関しては記述が長くなることや、挙動がややこしいなどのデメリットがあるため、基本的には[ ](配列リテラル)で書いていくことをオススメします。

配列の宣言については、以下のコードのうちどちらかで行いますね。

var hoge = [ ];

// または

var hoge = new Array( );

// で配列を宣言する

配列に値を追加していく

配列を宣言したところで、次は値を追加していきましょう。

具体的には以下のようなコードになります。

// 宣言はどちらか(前者が望ましい)
var hoge = [ ]; または var hoge = new Array( );

//配列に値を追加する
hoge [ 0 ] = ‘ foo ‘;
hoge [ 1 ] = ‘ bar ‘;
hoge [ 2 ] = ‘ piyo ‘;

配列に限らず、ループなどについても言えることですが、数字は「0から」はじまります。普段の数字は1から数えるので、やや違和感を覚えるかもしれません。

ぼくは「10代は10から、20代は20からなのだから、0代は0から」という風に理解しています。

コードをより簡潔に書くには

ここまでは、宣言と値を別々に記入していましたが、まとめて書くことでコードをより簡潔にすることができます。

実際のコードは以下の通りです。

// [ ]でまとめて宣言するとこうなる
var hoge = [ ‘foo’ , ‘bar’ , ‘piyo’ ];

// new Arrayでまとめて宣言するとこうなる
var hoge = new Array ( ‘foo’ , ‘bar’ , ‘piyo’ );

実際に値を呼び出してみる

ここまでの項で書いてきた配列から、値を呼び出すときは以下のようにコードを書きます。

hoge [ 0 ]
// foo と表示されます

hoge [ 1 ]
// bar と表示されます

hoge [ 2 ]
// piyo と表示されます

ここまでいろいろなコードを書いていますが、要するに「hoge という配列を Array もしくは[]で宣言して、0には foo という値を入れ、1には bar という値を入れ、2には piyo という値を入れる」ということをしています。

JavaScriptの連想配列とは?

image 配列については理解できましたでしょうか?

ここからは連想配列の説明にうつっていきます。

連想配列の定義は「{ }もしくは Object 」

配列を宣言するときは「[]もしくは Array 」を使用すると説明しましたが、連想配列を宣言するときには「{ }もしくは Object 」を用います。

コードは以下のような形です。

var hoge = {};

// または

var hoge = new Object( );

// で配列を宣言する

これに関しても、できるだけ短いものを選ぶほうがラクですので、前者の「{}」を使っていきましょう。

連想配列を作成してみる

それでは、ここからは実際に連想配列を作成していきます。

まずは連想配列を宣言

連想配列の宣言の仕方にはさまざまありますが、ここでは大まかに「{ }と Object の2つがある」ということを覚えておくとよいでしょう。

ただし、new Object に関しては記述が長くなるので、基本的には{ }で書いていくのがオススメ。

連想配列の宣言については、以下のコードのうちどちらかで行います。

var hoge = { };

// または

var hoge = new Object( );

// で連想配列を宣言する

連想配列に値を追加していく

連想配列を宣言したところで、次は値を追加していきましょう。

具体的には以下のようなコードになります。

// 宣言はどちらか(前者が望ましい)
var hoge = { }; または var hoge = new Object( );

// 連想配列に値を追加する
hoge [ ‘ フー ' ] = ‘ foo ‘;
hoge [ ‘ バー ' ] = ‘ bar ‘;
hoge [ ‘ ピヨ ' ] = ‘ piyo ‘;

コードをより簡潔に書くには

ここまでは宣言と値を別々に記入していましたが、まとめて書くことでコードをより簡潔にすることができます。

実際のコードは以下の通り。

// { }でまとめて宣言するとこうなる
var hoge = { ‘ フー ' : ‘foo’ , ‘ バー ‘ : ‘bar’ , ‘ ピヨ ‘ : ‘piyo’ };

実際に値を呼び出してみる

ここまでで書いてきた連想配列から、値を呼び出すときは以下のようにコードを書きます。

hoge [ ‘ フー ‘ ]
// foo と表示されます

hoge [ ‘ バー ‘ ]
// bar と表示されます

hoge [ ‘ ピヨ ‘ ]
// piyo と表示されます

なお、キーワードが英語であれば「 hoge.foo 」と表記して値を呼び出すこともできますよ。

Webサイト担当者としてのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

image 配列と連想配列の違いは理解できましたでしょうか?言ってしまえば、連想配列は配列の一種です。だから分かりにくいのです。

なので、「添字が数字」「添字が0からはじまる」「添字の要素が増えると数字が1増える」という特徴があるものは配列で、それ以外は連想配列だと考えるとよいでしょう。

一度読んだだけで理解できるものではないので、読みながら実際にコードも書きながら覚えていきましょう!

黒田剛司
この記事を書いた人
黒田剛司
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp