他の言語経験者も安心！JavaScriptの配列操作、基本の「き」【図解付き】
こんにちは！最近、JavaScriptの勉強を始めた、とまです。
Pythonを少しかじっていたこともあり、「JavaScriptも余裕でしょ！」…なんて思っていた時期もありました。
しかし！配列の操作で、ちょっと混乱…。
「あれ、Pythonのリストと似てるけど、微妙に違う…？」「他の言語とごっちゃになりそう…！」
ということで、今回は、JavaScriptの配列の基本操作を、自分の学習メモを兼ねて、徹底的にまとめてみました！
この記事を読めば、
- JavaScriptの配列の基本が分かる！
- 配列の作成、要素の追加・削除などが自由自在にできるようになる！
- 他の言語との違いも意識できるようになる！（かも）
JavaScript初心者の方、他の言語経験者でJavaScriptの配列操作を学びたい方、ぜひ一緒に、配列マスターを目指しましょう！
配列とは？
配列とは、複数の値をまとめて管理するためのデータ構造です。「リスト」と呼ばれることもあります。
例えば、果物の名前をまとめて管理したい場合、
const fruits = ["りんご", "みかん", "ぶどう"];
このように、`[]` の中に、`,` で区切って値を並べることで、配列を作成できます。
配列の中のそれぞれの値を「要素」、要素の順番を「インデックス」と呼びます。インデックスは、`0` から始まることに注意しましょう。
配列の作成
配列を作成するには、以下の2つの方法があります。
- 配列リテラル (`[]`) を使う方法（おすすめ）
const myArray = ["要素1", "要素2", "要素3"]; - `Array()` コンストラクタを使う方法
const myArray = new Array("要素1", "要素2", "要素3");
どちらの方法でも同じ配列を作成できますが、配列リテラル (`[]`) を使う方が、シンプルで分かりやすいのでおすすめです。
配列の要素へのアクセス
配列の要素にアクセスするには、インデックスを使います。
const fruits = ["りんご", "みかん", "ぶどう"];
console.log(fruits[0]); // 出力: りんご
console.log(fruits[1]); // 出力: みかん
console.log(fruits[2]); // 出力: ぶどう
存在しないインデックスを指定すると、`undefined` が返されます。
console.log(fruits[3]); // 出力: undefined
配列の要素数を取得
配列の要素数を取得するには、`length` プロパティを使います。
const fruits = ["りんご", "みかん", "ぶどう"];
console.log(fruits.length); // 出力: 3
配列への要素の追加
配列の末尾に要素を追加するには、`push()` メソッドを使います。
const fruits = ["りんご", "みかん", "ぶどう"];
fruits.push("いちご");
console.log(fruits); // 出力: ["りんご", "みかん", "ぶどう", "いちご"]
`push()` メソッドは、複数の要素を同時
const fruits = ["りんご", "みかん", "ぶどう"];
fruits.push("いちご", "メロン");
console.log(fruits); // 出力: ["りんご", "みかん", "ぶどう", "いちご", "メロン"]
配列からの要素の削除
配列の末尾の要素を削除するには、`pop()` メソッドを使います。
const fruits = ["りんご", "みかん", "ぶどう"];
const lastFruit = fruits.pop();
console.log(fruits); // 出力: ["りんご", "みかん"]
console.log(lastFruit); // 出力: ぶどう
`pop()` メソッドは、削除した要素を返します。そのため、上記の例では、変数 `lastFruit` に “ぶどう” が格納されます。
配列の要素の削除（応用編：`splice()`）
配列の途中の要素を削除したり、複数の要素をまとめて削除したりするには、`splice()` メソッドを使います。
const numbers = [1, 2, 3, 4, 5];
numbers.splice(2, 2); // インデックス2から2つの要素を削除
console.log(numbers); // 出力: [1, 2, 5]
`splice()` メソッドの第1引数は、削除を開始するインデックス、第2引数は、削除する要素の数を指定します。
`splice()` メソッドは削除だけでなく、要素の追加や置換もできます。
（が、今回は割愛！
詳しくは、MDN Web Docsなどのリファレンスを参照してください。）
まとめ：JavaScriptの配列、意外と奥が深い！
今回は、JavaScriptの配列の基本操作について、自分の学習メモを兼ねてまとめてみました。
配列の作成、要素へのアクセス、要素の追加・削除…と、一見シンプルに見えて、実は奥が深い！
他の言語と似ているようで、微妙に違う部分もあって、油断できませんね。
でも、今回の学習で、配列の基本はバッチリ！…なはず！
今後は、Webアプリケーション開発で、JavaScriptの配列を使いこなせるように、さらに勉強を進めていきたいと思います。
基本構文を覚えたらTypeScriptをやるぞー
