JavaScriptでの配列の意味と使い方を解説します。
配列は、JavaScript特有の概念ではなく、プログラミング言語全般に共通する基本知識です。
このページでは、プログラミング初心者向けでも理解できるよう「配列とな何か」という基本的な知識から、JavaScriptでの実践的な利用方法まで解説します。
JavaScript学習中の方であれば、絶対に知っておきたい超・重要知識ですので、是非最後までご覧ください。
配列とは？
配列とは、ザックリ言うと「データのまとまり」です。
これまで、データを扱う箱と言えば「変数」でした。変数には、特定の値を代入して、その値を参照したり、上書きしたりして利用することができます。
おさらいになりますが、この「変数」には値を１つしか代入できません。１つの変数に、同時に「１」と「２」を代入することはできません。
ただし、たまにこの変数の特性には不便な点が存在します。同じような値であれば１つの箱に入れておきたい。似たようなデータを１つにまとめて管理したい。このようなニーズにこたえることができません。
このようなニーズにこたえることができるようにしたのが配列です。
配列は、複数の値を代入することが可能な変数だと理解してしまってOKです。
配列を活用することで、複数のデータをあたかも１つの変数のように管理することが可能になるのです。
JavaScriptでは、それぞれのデータを数字で管理していきます。左から順番に０,１,２,３・・・というように識別子をつけて管理します。
配列に格納した１つ１つの値のことを「要素」、それぞれの要素の位置のことを「要素番号 / インデックス（index）」呼びます。
インデックスは、左から順番に0から始まる連番で管理します。
※よく開始が「１」と勘違いしてしまうことがあるため、注意して理解しましょう。
このように管理することで、「配列Aの2番目」というように特定の値を１つに絞ることができるようになります。
JavaScript：配列の基本
ここからは、JavaScriptで配列を宣言し、参照したり値を代入する方法を解説していきます。
基本的には、変数と同じような考え方なので難しくはありません。１つ１つ、丁寧に理解していきましょう。
配列の宣言
配列を宣言する方法には、2種類存在します。
1つは、「Array（配列コンストラクタ）」を使って宣言する方法、もう１つは配列リテラル「[ ]」を使う方法です。
- Arrayを利用
- [ ]を利用 ←こちらの方が主流
Array（配列コンストラクタ）を利用する方法
//配列コンストラクタを用いて配列を宣言
var hairetsu = new Array('北海道', '青森県', '秋田健','岩手県');上記サンプルコードを実行した結果がこちら。
See the Pen 配列① by ビズドットオンライン (@BizOnline) on CodePen.
ご覧のように、配列を宣言することができました。
同様に、配列リテラル（[ ]）を利用する方法も見てみましょう。
[ ]（配列リテラル）を利用する方法
//配列リテラルを用いて配列を宣言 var hairetsu = ['北海道', '青森県', '秋田健','岩手県'];
上記サンプルコードを実行した結果がこちら。
See the Pen 配列② by ビズドットオンライン (@BizOnline) on CodePen.
先ほどと同様、配列を狙い通り宣言することができました。
配列 "hairetsu" の中に、複数の値を格納することができていることが分かります。
配列の基本的な理解はこれでOK。
ちなみに、配列を宣言する場合はarrayを利用する方法ではなく、[]を利用するこちらの方が頻度が高い印象です。
２つは微妙に異なる性質を持つため、厳密にはきちんとした使い分けが必要なのですが、まだ理解したてのうちは、[]（配列リテラル）を利用した配列宣言がお勧めです。
配列の要素を取得
それでは、配列に格納した値を取得する方法を学習していきましょう。
配列を指定する方法も非常に簡単です。
See the Pen 要素の取得１ by ビズドットオンライン (@BizOnline) on CodePen.
hairetsu[1]
構文は非常に簡易的で、「配列名[要素番号]」と記述するだけです。
これで、どの配列の何番目の要素かを指定することができますので、要素の置き換えも可能です。
//配列リテラルを用いて配列を宣言 var hairetsu = ['北海道', '青森県', '秋田県','岩手県']; //hairetsuの２番目の要素を福島県に置き替え hairetsu[0] = `福島県` ;
要素番号（インデックス）は、０番から始まるという点に注意しましょう。
配列に要素を追加：push
配列を宣言した後のタイミングで、要素を追加したい場合はpushメソッドを利用します。
//pushメソッドを利用して、宮城県を追加 hairetsu.push(`宮城県`);
「配列名.push(追加したい値)」と記述するだけです。
このように記述することで、一番最後の要素として新たな要素が配列に追加されます。
See the Pen 要素の追加 by ビズドットオンライン (@BizOnline) on CodePen.
もちろん、pushメソッドを用いない場合でも、要素番号を直接指定することで要素を追加することも可能です。
ただし、この要素番号を直接指定する方法は、番号を指定する際にミスが起きやすいです。
また、要素の上書きなのか？それとも、追加なのか？コードからでは一見どちらの操作であるかがわかりづらくなってしまいます。
そのため、「要素を追加する」という目的の場合は必ずpushを利用するようにしましょう。
配列から要素を削除：pop
pushメソッドと合わせて覚えておきたいのが、popメソッド。
popメソッドは、配列の最後の要素を削除することができます。
See the Pen 要素の削除pop by ビズドットオンライン (@BizOnline) on CodePen.
pushメソッド
⇒配列の最後に要素を追加
popメソッド
⇒配列の最後の要素を削除
push/popという用語は、プログラミングを学ぶ上で共通知識です。
他でも応用が利きます。この機会に合わせて覚えておきましょう。
配列の先頭の要素を操作：shift / unshift
push/popは、配列の最後の要素を操作するメソッドでした。
逆に、配列の先頭の要素を操作するには「shift / unshift」メソッドを用います。
See the Pen 要素の先頭shift/unshift by ビズドットオンライン (@BizOnline) on CodePen.
shiftメソッド
⇒配列の先頭の要素を削除
unshiftメソッド
⇒配列の先頭に要素を追加
これで、配列に関する基本的な内容は完璧です。
JavaScriptを体系的に学びたい方は
プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。
そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。
各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。
