【JavaScript】配列の使い方をまとめてみた【初心者向け】

こんにちは朱夏です。

今回は、JavaScriptの配列の使い方をまとめてみたいと思います。

初心者向けなので基本的な部分に重点を置いてまとめていきたいと思います。

それではいってみましょう。

 

配列とは

はじめに、基本的な部分について書いておきます。

配列とは、1つの変数の中に、複数の情報を個別に入れておくことが出来るものです。
1つの建物の中で個別の部屋に入れておくイメージですね。

例えば、変数arrayに、「みかん、りんご、バナナ」という3つの情報を配列として格納したい場合を考えてみます。

配列を格納するarrayに、0号室、1号室、2号室という番号を振った部屋を3つ用意して、それぞれの部屋に1つずつ情報を入れておくことができます。

0号室から始まっているのは、基本的な配列のナンバリングが0から始まるからです。

1つの変数に1つの情報を入れていくより効率よく情報を管理する事が出来ると思います。

 

JavaScriptでの配列の書き方

次は、具体的にどうやって書いたら良いかを書いていきます。

 

1.宣言方法

JavaScriptで配列を扱うには、変数の宣言時に配列を扱うことを宣言しておく必要があります。

書き方は2パターンあります。

 

本来は、宣言方法2の方が正式な書き方の様ですが、今ではほとんど使われていない様です。
宣言方法1の書き方であればコードも短縮できますし、性能も一緒なので、2を使う理由は無いかと思います。

 

2.配列の使い方

さて、宣言された配列ですが、個別の部屋に分けた情報1つだけを扱いたい場合はどうしたら良いのでしょうか？

答えは、「部屋番号を指定する」です。
引き出したい情報の入った部屋番号を指定して呼び出すことで、1つ1つの情報を扱うことが出来ます。

イメージと下は以下の様な感じです。

 

部屋番号は左から順番に0,1,2,…と割り振られていきます。
実際に部屋番号を指定して扱う場合は、array1[0]、array1[1]、array1[2]と書きます。
それぞれ、array1[0]には「みかん」、array1[1]には「りんご」、array1[2]には「バナナ」が入っています。

 

宣言した配列を使っていくつか表示してみました。
以下のサンプルの様な感じで使えます。。

See the Pen
ExVRvqb by 朱夏 (@syunatsu1)
on CodePen.

 

部屋番号なしの場合は、配列内の情報全てを表示します。
部屋番号を指定した場合は、指定した情報のみを表示します。

サンプル内にも書きましたが、部屋番号部分は変数で指定する事も可能です。
この、部屋番号を変数で指定して、任意の情報を取得できるというのは、配列を使うメリットの1つです。

 

3.配列の追加

ここからは応用編になります。
現在、みかん、りんご、バナナの3つの部屋で構成されている配列ですが、ここに情報を追加する方法があります。

配列を追加する場合のイメージは、部屋数を追加して、もう一度左から順番に入れなおす感じです。

追加方法は3種類あり、それぞれ「先頭に追加（unshift）」、「最後に追加（push）」、「途中に追加（splice）」になります。

サンプルを見てみましょう。
先ずは、「先頭に追加（unshift）」、「最後に追加（push）」の2つから。

See the Pen
ZEbRXQy by 朱夏 (@syunatsu1)
on CodePen.

 

先頭に追加する場合も、最後に追加する場合も、特に注意する事は無いと思います。

次に、「途中に追加（splice）」する場合のサンプルです。

See the Pen
oNjyGZJ by 朱夏 (@syunatsu1)
on CodePen.

 

こちらは、少し複雑なので書き方の説明をします。

 

挿入箇所は戦闘を0として、情報の間毎に0,1,2,…と割り振られています。
差し替え数とは、追加する配列情報と入れ替えで、削除する情報の数です。

今回のサンプルで言うと、差し込み箇所は以下の様になります。

 

挿入箇所を1とした場合、みかんとりんごの間に追加されます。

次に、差し替え数についてです。
差し替え数は０を指定すると、追加だけされます。
今回のサンプルで、差し替え数を1にした場合、挿入箇所の右側のりんごが削除されます。
差し替え数を2にした場合は、挿入箇所の右側2つであるりんごとバナナが削除されます。

spliceには、途中に追加する以外にも配列の差し替えをする機能がある事を覚えておくと便利です。

 

4.配列の削除

配列を削除する方法は、「先頭を削除（shift）」、「最後を削除（pop）」、「途中を削除（splice）」の3つに加えて、「全て削除」の4つがあります。

先ずはサンプルを見てみましょう。
追加の時と同様、「先頭を削除（shift）」と「最後を削除（pop）」からです。

See the Pen
QWjxqZg by 朱夏 (@syunatsu1)
on CodePen.

 

この2つは「先頭に追加（unshift）」、「最後に追加（push）」と対になっているので覚えやすいかと思います。

 

次に「途中を削除（splice）」です。
こちらは、「途中に追加（splice）」で使用した機能の削除部分だけを使用しています。

サンプルではこんな感じになります。

See the Pen
wvKXrRg by 朱夏 (@syunatsu1)
on CodePen.

 

最後は、配列をすべて削除する方法です。
配列を全て削除する方法は、以下の2つがあります。

 

1つ目の配列の長さを0にするというのは、変数array1で使用している部屋の個数を0にすることで、中身を削除しています。

配列を空にする方法は、変数array1に空の配列を代入する事で、今まで入っていた配列を全て空の配列で上書きしてしまう方法です。

どちらも結果は同じなので、使いやすい方を使うと良いでしょう。

 

 

5.配列の結合

２つの配列を結合させる方法です。
結合方法は以下の２つです。

1. 結合した配列を新規で作成する方法
2. 結合した配列の1つ目を上書きする方法

 

それぞれの書き方は以下の様になります。
先ずは配列を新規で作成する方法から。

See the Pen
QWjxqRq by 朱夏 (@syunatsu1)
on CodePen.

 

変数array1とarray2を結合して、array3を新規で作成しています。
結合した結果がarray3に入り、array1とarray2は保持されたままになっています。

 

 

次は、結合した配列の1つを上書きする方法です。

See the Pen
VwvdrZY by 朱夏 (@syunatsu1)
on CodePen.

 

今回の場合、array1とarray2を結合して、array1に入れています。
そのため、array1の情報は上書きされました。

結合方法については、実装したいものによってどちらの方が都合が良い関わってくると思うので、2つパターンがある事は覚えておいた方が良いと思います。

 

あとがき

というわけで、JavaScriptの配列についてまとめてみました。
配列は良く使われるので、今回紹介した基本的な部分は押さえておくと、今後の学習に役立つおと思います。

今回は以上です。
次回もよろしくお願いします。