配列　[JavaScript] #初心者

配列とは・・・

はい‐れつ【配列／排列】
読み方：はいれつ

１［名］(スル)順序を決めて並べること。また、その並び。「五十音順に—する」

２（「配列」と書く）コンピューターのプログラミング言語における、データ形式の一つ。同じ型のデータの集合を意味し、個々のデータは変数の添え字で区別する。

データ構造。データの集まりのこと。

一つの値を単体で書くのではなく、
複数のデータの集まりを関連付けて一つのまとまりとして使いたい場合に使う。

例：

嵐のメンバー５人を一つのまとまりとして定義したいが・・・

const = Jun Matsumoto
const = Kazunari Ninomiya
const = Masaki Aiba
const = Satoshi Ohno
const = Sho Sakurai

これだと、１つの変数にそれぞれ５人の名前を定義しているだけなので５つの変数がそれぞれ関連付いていない・・

どうすれば１つにまとめられるのか？

この場合、１つにまとめられる手段として
配列を使用できる。

配列を使用することで、５人全員をコレクションとしてまとめておくことができる。

そういった、単体としてではなく、データを１つにまとめて管理しておきたい場合に配列を利用する。

配列とは？

・値のコレクション（集まり）である。
・その集まりに順序があること。

作成方法：

[ ] 角括弧を使って値の集まりを囲うことで使用することができる。

let days = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];


days

出力結果


["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]

上記の例では、daysという配列の中に、
７つの曜日を１つのコレクションとして格納している。

また、JavaScriptの配列の中にはstringやnumberなど型の違う種類を同時に入れることも可能。

例：

let hoge = [true, undefined, 13, 1.23, NaN, null, "string"];

hoge

出力結果

[true, undefined, 13, 1.23, NaN, null, "string"]

プログラミング言語によっては、型が同じものでなければ１つの配列の中に同時に入れられないものも多いが、
JavaScriptは、別の型同士でも１つのコレクションに格納できる。

複数の個別の値をコレクションとして一つのデータにまとめておくことができる。

配列の中のデータにアクセスする。

配列の作り方はわかったけど、
どうすれば中のデータにアクセスするの？

配列にデータを挿入すると、その配列のデータにはインデックスが割り当てられる。
また、各要素には０から始まるインデックスが割り当てられる。

先ほどの例daysに各曜日が入っている配列で対応するインデックスを確認してみる。

let days = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];

days[0]

days[6]

days[7]

出力結果

"Monday"
 
"Sunday"

undefined

・配列のインデックスは０から始まる点に注意。
・配列のデータがないところにアクセスするとundefined
が返ってくる。

配列を更新する

色の配列を作ってみました！
しかし、間違えてredとyellowのスペルを間違えて配列を作ってしまった・・・

let colors = ["rad","orange","blue","yallow"];

この場合どうやって修正すれば良いのでしょう？

配列を更新する方法で修正してみる！

間違えてしまったrad、yallowに対して更新をかけて修正してみます！

更新

color[0] = "red";

color[3] = "yellow";

インデックス０番目の値をredに更新。
インデックス３番目の値をyellowに更新。

colors

出力結果：

 ["red","orange","blue","yellow"];

出力結果が修正されたのを確認することができる。

配列のメソッドpushとpop、shiftとunshiftについて

配列を作る方法やデータへのアクセス、更新を理解したところで、
次に、配列に要素を追加したり、取り除く方法についてみていきます。

・push - 末尾に追加
・pop - 末尾から取り除く
・shift - 先頭を取り除く
・unshift - 先頭に追加

pushメソッド(末尾に追加する)

例：

映画館の待ち行列の際、
待っているお客さんを配列で作成し、そこに新しいお客さんを追加してみる。

映画館の待ち行列 movieLineという変数の配列

let movieLine = ["suzuka","tanaka","yamada"]

新たなお客さん、satoさんを
待ち行列の最後に並んでくれるように追加してみる。

配列、movieLineに対して、pushメソッドを使用。
()丸括弧内に新たに追加したい値を入力する。

movieLine.push("sato");

出力結果：

pushメソッドの挙動として、
実行した後に、新しい配列の長さを返す。

movieLine

["suzuka","tanaka","yamada","sato"]

注意：
stringのメソッドと違い、元々の配列の値が変化する。

push メソッドの使用方法：

・変更を加えたい配列の変数に対して使用する。
・変数の後ろに . (ドット)をつけて使用する。
・. (ドット)の後ろに使用したいメソッドの名前pushを宣言する。
・pushの後ろに()丸括弧で囲い、中に追加したい値を入力する。

popメソッド(末尾から取り除く)

映画の待ち行列の中、
satoさんが別の用事を思い出し、列から外れることになりました。

その場合、どうやってこの列の中から取り除けば良いでしょう？

配列の後ろの要素を取り除くにはpopを使用する！

例：

映画館の待ち行列movieLineという変数の配列

let movieLine = ["suzuka","tanaka","yamada","sato"]

配列、movieLineに対して、popメソッドを使用。

movieLine.pop( );

出力結果：

sato

popメソッドの挙動は一番最後にあった値(“sato”)を返してくれる。

movieLine

出力結果：

["suzuka","tanaka","yamada"]

先ほどまで末尾にあったsatoさんがいなくなっているのを確認できる。

popメソッドの使用方法：

・変更を加えたい配列の変数に対して使用する。
・変数の後ろに . (ドット)をつけて使用する。
・. (ドット)の後ろに使用したいメソッドの名前popを宣言する。
・popの後ろに()丸括弧を書く。

shiftメソッド(先頭を取り除く)

映画の待ち行列の中、
遂に映画館のドアが開きました！

並んでいた順番にsuzukiさんから中に入っていくとします。

その場合どうやってこの列の中からトリぞけば良いでしょう？

配列の先頭の要素を取り除くにはshiftメソッドを使用する！

例：

映画館の待ち行列 movieLineという変数の配列

let movieLine = ["suzuka","tanaka","yamada"]

配列、movieLineに対して、shiftメソッドを使用。

movieLine.shift( );

出力結果：

suzuki

shiftメソッドの挙動は一番先頭にあった値("suzuki")を返してくれる。

movieLine

出力結果

["tanaka","yamada"]

shift メソッドの使用方法：

・変更を加えたい配列の変数に対して使用する。
・変数の後ろに . (ドット)をつけて使用する。
・. (ドット)の後ろに使用したいメソッドの名前shiftを宣言する。
・shiftの後ろに()丸括弧を書く

unshiftメソッド(先頭に追加する)

映画の待ち行列の中、
遂に映画館のドアが開きsuzukiさんが中に入ったのですが、
清掃がまだ終わっておらず戻ってきました。

その場合どうやって再度この列の中に戻せば良いでしょうか？

配列の先頭に要素を追加するのはunshiftメソッドを使用する！

例：

映画館の待ち行列 movieLine という配列

let movieLine = ["tanaka","yamada"]

配列、movieLineに対して、unshiftメソッドを使用。

movieLine.shift( );

出力結果：

unshiftメソッドの挙動として、
実行した後に、新しい配列の長さを返す。

movieLine

出力結果

["suzuki","tanaka","yamada"]

unshift メソッドの使用方法：

・変更を加えたい配列の変数に対して使用する。
・変数の後ろに . (ドット)をつけて使用する。
・. (ドット)の後ろに使用したいメソッドの名前shiftを宣言する。
・unshiftの後ろに()丸括弧で囲い、()内に入力したい値をいれる。

配列のよく使うメソッドについて

concatメソッド

２つの配列を結合する際に使用する。

例：
catsという配列とdogsという配列を結合してみる。」

let cats = ["tama", "tora"];
let dogs = ["pochi","shiro"];

cats.concat(dogs);

出力結果

["tama", "tora","pochi","shiro"]

concat メソッドの使用方法：

・変更を加えたい配列の変数に対して使用する。
・変数の後ろに . (ドット)をつけて使用する。
・. (ドット)の後ろに使用したいメソッドの名前concatを宣言する。
・concatの後ろに()丸括弧で囲い、()内に結合したい配列の名前を入力する。

注意：
新しく作成した配列は全く別の配列。
結合前の配列には変更なし。

includesメソッド

配列の中に指定した値が含まれているかどうか、
trueかfalseで返すメソッド。

let cats = ["tama", "tora"];

cats.includes("tama");

出力結果

true

cats.includes("pochi");

出力結果

false

includes メソッドの使用方法：

・値が含まれているか知りたい配列の変数に対して使用する。
・変数の後ろに . (ドット)をつけて使用する。
・. (ドット)の後ろに使用したいメソッドの名前includesを宣言する。
・includesの後ろに()丸括弧で囲い、()内に確認したい値の名称を入れる。
・入力された値があればtrueを返し、なければfalseを返す。

indexOfメソッド

引数()丸括弧内で指定した内容と一致するインデックスの値を返してくれる。

let pets = ["tama", "tora","pochi","shiro"]

pets.indexOf("tama");

出力結果

pets.indexOf("shiro");

出力結果

pets.indexOf("afdskfhdf");

出力結果

-1

・配列に存在しない値を引数として渡すと-1が返ってくる。

indexOf メソッドの使用方法：

・要素のインデックスを確認する際に、配列の変数に対して使用する。
・変数の後ろに . (ドット)をつけて使用する。
・. (ドット)の後ろに使用したいメソッドの名前indexOfを宣言する。
・indexOfの後ろに()丸括弧で囲い、()内に確認したい値の名称を入れる。
・入力された値があれば配列内のインデックスを返し、なければ-1を返す。

reverseメソッド

配列の要素を反転させる。

let pets = ["tama","tora","pochi","shiro"]

pets.reverse();

出力結果

[ "shiro","tama","tora","pochi"]

reverse メソッドの使用方法：

・変数の後ろに . (ドット)をつけて使用する。
・. (ドット)の後ろに使用したいメソッドの名前reverseを宣言する。
・reverseの後ろに()丸括弧で囲う。
・元々の配列自体を変更してしまうので注意。

sliceメソッド

配列の一部分を切り取って新しい配列を作ることができる。

例：

let colors = ["red","orange","yellow","green","blue","black","white"];

インデックス５番目以降を切り取り、
新しくmonoという白黒を表す変数に入れている。

let mono = colors.slice(5);

出力結果

["black","white"]

sliceメソッド
第一引数(start)に0
第二引数(end)に3を指定し、warmColorsという新しい変数で配列を作成。

let warmColors = colors.slice(0,3);

出力結果

 ["red","orange","yellow"]

注意：
endで指定した数に対応する配列の要素は含めない。

slice メソッドの使用方法：
・配列の一部分を切り取って新しい配列を作成する際に、配列の変数に対して使用する。
・変数の後ろに . (ドット)をつけて使用する。
・. (ドット)の後ろに使用したいメソッドの名前sliceを宣言する。
・sliceの後ろに()丸括弧で囲う。
・()内第一引数に、切り取りを開始したいインデックスを指定する。
・()内第二引数に、切り取りを終了したいインデックスを指定する。
・()内の引数は２つとも省略可能。
・切り取り後に新しい配列を返す。
・-(マイナス)の値も指定可能（-(マイナス)の値の際は後ろからインデックスをとる。）
・元の配列は変更されない。

spliceメソッド

配列の既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることができる。

例：

let colors = ["red","orange","yellow","green","blue","black","white"];

例：要素の切り取り

インデックスの５番目から１個切り取りをする。

colors.splice(5,1);

出力結果

["black"]

切り取った要素(black)を含む配列が返ってくる。

また、colorsの配列の中身を確認すると、
blackの値がなくなっていることを確認できる。

colors

出力結果

["red","orange","yellow","green","blue","white"];

例：要素の挿入

配列colorsの “orange”と”yellow”の間に
orange-yellow という新しい色を追加してみる。

let colors = ["red","orange","yellow","green","blue","black","white"];

colors.splice(2,0,"orange-yellow");

出力結果：

[ ]

出力結果は削除した値なので、
削除した値がない場合、空の配列 [ ] が返ってくる。

colors

出力結果

["red","orange","orange-yellow","yellow","green","blue","black","white"];

改めてcolorsの中を確認してみると、
"orange”と”yellow”の間に
orange-yellowという新しい色が追加されていることをが確認できる。

splice メソッドの使用方法：
・配列の要素を切り取り、追加する。
・変数の後ろに . (ドット)をつけて使用する。
・. (ドット)の後ろに使用したいメソッドの名前spliceを宣言する。
・spliceの後ろに()丸括弧で囲う。
・()内第一引数に、操作を開始する配列のインデックスを指定する。(※必須)
・()内第二引数に、値を指定した場合、第一引数で指定した要素以降から指定した数要素を取り除く。（省略可）
・()第三引数に、値を書くことで、
その値が、第一引数で指定した値の後ろに追加される。
（省略可）
・切り取りを行なった値を返す。
切り取ったものがない場合空の配列を返す。

まとめ：

ストーリーを多少織り交ぜることにより、より自分的にも読んでくれる方に対してもわかりやすくまとめられたと思います。

配列はメソッドも多く、使用する箇所も多いので、何度も見返してわかりやすい内容になっていたら幸いです。

配列 [JavaScript]

目次：

配列とは？

作成方法：

配列の中のデータにアクセスする。

配列を更新する

配列のメソッドpushとpop、shiftとunshiftについて

pushメソッド(末尾に追加する)

popメソッド(末尾から取り除く)

shiftメソッド(先頭を取り除く)

unshiftメソッド(先頭に追加する)

配列のよく使うメソッドについて

concatメソッド

includesメソッド

indexOfメソッド

reverseメソッド

sliceメソッド

spliceメソッド

例：要素の切り取り

例：要素の挿入

まとめ：

配列　[JavaScript]