プログラミングを行う上で、比較的よく目にするのが「配列（Array）」です。

JavaScript入門者にとって、配列を理解することがステップアップの第一歩。

 

逆に言えば、JavaScriptを学ぼうとするのにArrayクラスの内容を身につけていなくては、今後の中級レベルの内容に完全対応できないということになります。

いずれコールバック関数やjQueryのメソッドチェーン作成、JSON文字列やIteratorオブジェクトの使いこなしといったJavaScript中級レベルを目指すなら、この配列についてしっかりと知識を身につけておく必要があります。

 

ここでは、JavaScriptの変数と配列の関係や、配列の基本であるArrayとは？ など、初心者向けの基本的な内容を説明していきます。

これさえ読めば、3分でJavaScriptにおける配列要素の追加・削除の処理や使い方がわかるようになります。

 

JavaScriptの変数と配列の関係

JavaScriptの配列を学ぶ上で、覚えておかなければならないのが変数についてです。

それでは、JavaScriptの変数と配列の関係はどのようなものなのでしょうか。

 

JavaScriptの変数とは？

JavaScriptの変数とは名前（変数名）の付いた箱のようなもので、その中に1つの数値や文字列などの値を入れておき、それを使い回すというものです。

 

その方法は、以下のように「var」を使って書きます。

 

 

間違えがちですが、これは「変数名と数値あるいは文字列が等しい」ということではありません。

JavaScriptの変数では、変数名に「=」以下の数値や文字列を代入するという意味になります。

 

なお、変数名には半角英数字（アンダーバー含む）を使用できますが、数字から始まる変数名を使用することはできません。

また、JavaScriptとして意味がある予約語（「if」や「null」など）も使えないので注意が必要です。

 

この変数には、数値や文字列といったデータを1つしか入れることができません。

しかし、配列を使うことで複数の数値や文字列のデータを1つのデータとして扱うことができるようになります。

 

「配列」は変数が集まった箱のようなもの

JavaScriptの変数は基本的に数値や文字列を1つしか扱えませんが、これが100個以上の値を扱いたい場合には、いちいち変数を1つずつ作らなければならないため、非常に手間がかかってしまいます。

 

そんな手間を省くために使われるのが「配列」（配列変数）なのです。

 

簡単に言えば、変数という小さな箱をたくさん入れておく大きな箱が「配列」というイメージです。

1つの配列データで、大量の数値や文字列を扱うことができるようになります。

JavaScriptでは、この配列を扱うために「Arrayオブジェクト」というものが用意されています。

 

この「Arrayオブジェクト」を使えば、配列の作成や追加、削除、初期化、検索などを簡単に行えるようになるのです。

 

配列の基本「Array」とは？

JavaScriptの変数と配列の関係について理解できたら、配列の基本である「Array」（Arrayオブジェクト）について、その初歩的な使い方を説明します。

 

配列を宣言する2種類の方法

配列を作成することを、JavaScriptの用語では「宣言する」と呼び、そのJavaScriptで配列を作成する方法は2種類あります。

 

まず1つ目の配列の宣言は、配列コントラクスタ「Arrayメソッド」を使うやり方です。

使用例は以下の通りです。

この場合、AからCの3つの文字列を配列に格納しているわけですが、「new」を使うことで「Array()」の引数に格納したい文字列を設定しています。

 

次に配列リテラル「[ ]」を使う方法です。

これも以下の例を参照してください。

配列リテラルなら「[ ]」で数値や文字列を囲うだけのため、より簡単に配列を宣言することができるのです。

 

どちらの方法を使っても同じ配列データを宣言できるのですが、大きな違いは1つの数値だけを格納しようとした場合に、配列コントラクスタを使うとエラーを起こしてしまうことです。

たとえば配列コントラクスタで「new Array(10)」と書いた場合、JavaScriptでは「10個分の配列を作成」することになります。

これが配列リテラルなら「[10]」と書くわけですが、これは「10という数値を配列に格納」するという意味になります。

配列コントラクスタでは数値1つだけの配列を宣言することはできないというJavaScriptの仕様なので、これはどうしようもありません。

 

こういった理由からJavaScriptで配列を宣言する場合は、配列リテラルを使うというのが基本となっています。

 

初期化するには？

JavaScriptで宣言したデータを初期化するためには、配列リテラルで宣言した数値や文字列を削除します。

具体的には、以下のように配列データを書きます。

 

 

配列の中に数値や文字列が何もない状態になり、これが「配列を初期化」したということになります。

前述の配列コントラクスタでも、「new Array()」と書くことで配列を初期化できます。

 

要素を取得する方法

JavaScriptで宣言された配列のそれぞれの要素を取得する方法について説明します。

 

この場合、取得したい配列変数の要素番号（インデックス）を「[]」で囲い、その要素の中身を取り出すというやり方になります。

たとえば以下のように書くことで要素が取得できます。

 

 

ここで気をつけたいのは、要素番号は「0」から始まるということです。

これを序列通りに要素番号を指定してしまうと、最後の要素にインデックスが割り振られていないため「undefined（未定義）」という変数の結果が表示されてしまいます。

 

要素を検索する方法

それでは、配列内にある各要素のデータを検索するには、どうすればよいでしょうか。

もっとも簡単に要素を検索するには、「indexOf()」を利用すればいいでしょう。

この「indexOf()」を使えば、カッコ内に指定した数値や文字列が配列された初期データにある場合、その格納場所を要素番号で取得することが可能です。

要素番号で格納場所を知らせてくれるため、直感的に検索することが可能で、とても便利な機能となっています。

 

配列の要素を追加・削除する方法

JavaScriptの変数を、配列で使用するための宣言方法や初期化のやり方を理解したら、次は追加や削除の方法を覚えてましょう。

 

【unshift】先頭に追加

配列の先頭に数値や文字列を追加するには「unshift」を使います。

 

 

これで「B,C」という文字列の前に「A」が追加されます。

 

【push】末尾に追加

配列の末尾に数値や文字列を追加したい場合は「push」を使います。

 

 

表示は文字列通り「A,B,C」となります。

 

【splice】指定した位置に複数を追加

配列の指定値に、複数の数値や文字列を追加するには「splice」を使います。

 

 

この場合、「splice」の後のカッコ内は「数値

または文字列を追加する場所,追加する要素数,数値または文字列×数」を記述します。

 

【shift】先頭を削除

続いて配列内にある要素を削除したい場合の記述方法です。

まず、配列の開始位置にある数値や文字列を削除したい場合は「shift」を使います。

 

 

ちなみに上記の場合、「Q」が削除されて文字列化します。

先頭の文字列を削除して、後ろの文字を詰めたくない（開けたままにしたい）場合は「shift」を使わず、「array」の後ろに「[] = viod 0」と入力してください。

この「void 0」は「underfined」が「0」（配列の先頭）に代入されるという意味になります。

 

【pop】末尾を削除

配列の末尾にある数値や文字列を削除したい場合は「pop」を使います。

 

 

配列データに「pop」を記述することで、要素の末尾だけが削除されます。

ちなみに「shift」が配列要素の先頭だけを削除するため、この「pop」とよく対になって使われることが多いです。

 

【splice】指定した位置から複数を削除

配列データの指定した位置から複数の数値や文字列を削除したい場合、追加するときと同じく「splice」を使います。

 

 

追加する場合と異なり、「splice」の後ろのカッコ内は「削除する場所,削除する数」だけを入力します。

 

【length, []】配列している要素をすべて削除

配列している要素をすべて削除したい場合は2通りで、lengthプロパティを「0」にして全要素を削除する方法と、「[]」という空の配列を再代入して初期化し、配列の全要素を削除する方法があります。

 

「length = 0」の場合

 

「[]」という空の配列を再代入する場合

 

これで配列の要素がすべて削除され、空欄になります。

注意したいのはlengthプロパティ名を必ず「0」にするということです。

 

連想配列の作成方法

JavaScriptには「連想配列」と呼ばれるデータ構造が存在します。

連想配列とは「キー情報」と「値情報」がペアになっている一般的なオブジェクト構造と同じデータ構造のことです。

それでは、実際に連想配列の作成方法について解説します。

 

連想配列を宣言する

連想配列を作成するにも、まず配列を宣言する必要があります。

これは上記で解説した配列リテラルとは異なり、「{}あるいはObject」を使用して書いていきます。

 

 

あるいは

 

 

ただ、こちらも配列のときと同様にコードが長くなってしまうのを防ぐために「{}」で書いていったほうがよいでしょう。

 

連想配列に値を追加する

連想配列を宣言したら、次に数値または文字列を追加します。

 

 

ただ、このように記載しましたが、数値や文字列をまとめて書いてコードを簡潔にすることも可能です。

 

 

値を呼び出す

連想配列の作成が完了したら、実際に数値や文字列を呼び出して出力テストを行ってください。

 

 

配列との違いは、1つの値に1つのキーワードを当てはめることでシンプルでわかりやすく整理できる点です。

逆に連想配列のデメリットは、複数の値を持つことができないということになります。

 

「配列」のメリットは作業の短縮にある

JavaScriptにおける「配列」について、その基本的な使い方やメリットなどを解説してきました。

プログラミングにおいて、配列は使用頻度が高いコードとなっており、基礎からしっかりと理解しておかないと作業が滞ってしまいます。

また配列はプログラミングする上で、作業時間を大幅に短縮してくれる便利なものです。

ぜひJavaScriptの配列について知識を得ておき、必要な場面で使いこなせるようにしておきましょう。