配列とは？
配列とは、簡単に言うと「値を格納する箱」です。
以下のコードを見てください。
const array = [10, 20, 30, 40, 50]上記のコードでは、arrayと言う名前の箱に数字を5つ格納しています。
一般的に、同じ箱に入れる物は何らかの共通している部分があります。
例えば、おもちゃを入れる箱には、アニメのフィギュアだったりラジコンなどが入っています。
JavaScriptでも配列には共通点がある値を格納するのが一般的です。
このことを踏まえて次のコードを見てください。
const toys = ['figure', 'ball', 'mini car']上記のコードでは、toysと言う名前の配列変数に3つのおもちゃの名前の値を格納しています。
ちなみに、配列には値が格納されていなくても問題ありません。
現実でも同じで、おもちゃを入れる箱を事前に買っておいたりすることがあると思います。
それと同じで、JavaScriptでも基本的には、箱（変数）を用意してから、値を格納していきます。
空（から）の配列を作成するコードを見てみましょう。
const toys = []配列作成時のポイント
ポイントは以下の2つです。
- 変数名はできるだけ分かりやすい名前にする
- 配列に格納する値は、何らかの共通点があるものにする
ポイント①は、他の開発者が見たときに容易に何に使うものなのか予想できる
変数名にすることが望ましいです。
慣れるまでは難しいと思いますが、先輩のコードやネット上のコードをたくさん見て、
徐々に良くしていけば、良いと思います。
ポイント②は、かなり重要で、共通点がないものを配列に入れている場合、
自分でも忘れてしまい、逆に扱いづらくなります。
コツとしては、配列の変数名をデータ同士の共通点にすることです。
配列の作り方
配列の作り方は、基本的に2パターンです。
1つ目は、以下のように配列の変数を用意した後に、値を格納するパターンです。
let array = []
array = ['A', 'B', 'C']2つ目は、以下のように配列の変数宣言時に値を格納するパターンです。
基本的には、2つ目の方法で作成する方が分かりやすいと思います。
const array = ['A', 'B', 'C']ちなみにJavaScriptは、Javaのように型厳密な言語ではないので、
どんな値も格納することができます。（文字列や数字など。。。）
ただ、コード上はエラーが出ないからと言って、無茶苦茶やってると、いつか大変になります。
const array = ['A', 2, 'C']
console.log(array)
// 結果：Array ["A", 2, "C"]上記のような、数字と文字列が一緒に格納されているデータの作り方は控えましょう。
配列操作をするためのメソッド
JavaScriptには、配列のデータを加工するために便利なメソッドが、
たくさんあるので紹介します。
要素数を調べる ｜ length
配列の要素数（長さ）を調べるためには「length」を使用します。
使い方は、配列変数の後ろに「.length」を追加します。
const array = [10, 20, 30, 40, 50]
console.log(array.length)
// 結果：5lengthは、for文で繰り返し処理をする際によく使われます。
そのほかにも、if文の判定に使われたりもします。
他の言語でもよく出てくるので、覚えておくと良いと思います。
要素の追加 ｜ push
配列に要素を追加するためには、「push」メソッドを使用します。
引数には追加したい要素を書きます。複数個の値を追加することも可能です。
配列の中にオブジェクトや配列を格納することも可能です。
const array = [10, 20, 30, 40, 50]
array.push(60)
console.log(array)
// 結果：[ 10, 20, 30, 40, 50, 60 ]要素の削除 ｜ pop
配列の要素を削除するためには、「pop」メソッドを使用します。
popメソッドは配列の最後に格納されている要素を削除します。
const array = [10, 20, 30, 40, 50]
array.pop()
console.log(array)
// 結果：[ 10, 20, 30, 40 ]先頭の要素を削除したい場合は、「shift」メソッドを使用します。
const array = [10, 20, 30, 40, 50]
array.shift()
console.log(array)
// 結果：[ 20, 30, 40, 50 ]より実践的なサンプルコードの解説は、こちらの記事でも紹介しているので、
気になったかたは、ご覧ください。
配列の分割 ｜ slice
「slice」メソッドを使用すると配列を自由に分割することが可能です。
利用頻度は少なめですが、便利なメソッドですので覚えておいた方がいいです。
const array = [10, 20, 30, 40, 50]
const array1 = array.slice(0, 3)
const array2 = array.slice(3, 5)
console.log(array1) // 結果：[ 10, 20, 30 ]
console.log(array2) // 結果：[ 40, 50 ]要素の追加＆除去 ｜ splice
「splice」メソッドは、かなり便利なので使えるようになると、
実装できるプログラムの幅が広がります。
const numbers = [1, 3, 4, 5]
numbers.splice(1, 0, 2)
console.log(numbers)
// 結果：[1, 2, 3, 4, 5]
const numbers1 = [1, 3, 4, 5]
numbers1.splice(1, 2)
console.log(numbers1)
// 結果：[1, 5]
const tomAndJerry = ['トム', 'ジェリー']
tomAndJerry.splice(1, 0, '&')
console.log(tomAndJerry)
// 結果：["トム", "&", "ジェリー"]「splice」メソッドは、引数の数によって、処理内容が微妙に異なります。
基本的には引数は３つあり、（開始位置, 削除数, 追加する要素）になります。
要素の存在確認 ｜ includes
「includes」メソッドを使用すると、
配列の中にに指定した値が含まれているか確認することができます。
const array = [10, 20, 30, 40, 50]
console.log(array.includes(20))
// 結果：trueただし、以下のようにデータ型が一致していない場合はfalseになるので、注意しましょう。
const array = [10, 20, 30, 40, 50]
console.log(array.includes('20'))
// 結果：false使用タイミングとしては、if文の判定に使うことが多いです。
「この配列の中にこれが含まれているとき」という条件を作ることができます。
値の結合 ｜ join
「join」メソッドは、かなり便利で、意外と使用頻度も高いです。
配列内に格納されている値同士を結合してくれます。
しかも結合する文字は、開発者側で自由に決めることができます。
joinメソッドは、他の言語でも出てくるので、覚えておくと良いと思います。
const array = ['A', 'B', 'C']
const joinString = array.join('-')
console.log(joinString)
// 結果："A-B-C"まとめ
JavaScriptの配列を操作するためのメソッドをいくつか紹介しました。
他にもまだまだありますが、記事が長くなってしまうので、今回はこれくらいで。
ここまで読んでいただき、ありがとうございます。
コメント