1.はじめに
JavaScriptでは、複数のデータをまとめて扱いたいときに「配列（array）」という仕組みを使います。
たとえば：
- 数字のリスト（例：
[100, 90, 80]） - フルーツの名前一覧（例：
["りんご", "みかん", "バナナ"]） - TODOリストの項目
配列を使えば、似た種類のデータをまとめて1つの変数で扱えるようになります。
これにより、コードがシンプルになったり、繰り返し処理がやりやすくなったりといったメリットがあります。
JavaScriptを使ってWebアプリやちょっとした動きを作るとき、配列は必ずと言っていいほど登場します。
今回は、初心者向けに配列の作り方・使い方・よく使うメソッドを一通り解説していきます。
実際の使い方の例も交えて、わかりやすく紹介していきます！
2.配列の作り方
JavaScriptで配列を作る方法はいくつかありますが、初心者向けにはまず「配列リテラル」を覚えるのがおすすめです。
配列リテラル（もっともシンプルな書き方）
const fruits = ["りんご", "みかん", "バナナ"];
console.log(fruits);出力結果（コンソール）：
["りんご", "みかん", "バナナ"][]で囲んで、カンマ,区切りで複数の値を並べるだけ。- 1つずつ変数を作らなくても、ひとまとめにできます。
new Array を使う方法
const scores = new Array(100, 80, 90);
console.log(scores);出力結果（コンソール）：
[100, 80, 90]new Array()はJavaScriptの「配列コンストラクタ」という書き方です。- ただし、実務では
[]を使う方が読みやすく主流 なので、初心者はまずリテラルを使えばOKです！
配列に入れられるもの
const items = [42, "ノート", true];
console.log(items);出力結果（コンソール）：
[42, "ノート", true]数字、文字列、true/false など いろいろな型を一緒に入れることも可能です。
ここまでで「配列を作る」ことができるようになりました。
次は「中身をどう取り出すのか？」を見ていきましょう！
3.要素の取り出し方（インデックス）
配列に入れた値は、「インデックス（番号）」を使って1つずつ取り出すことができます。
インデックスは 0からスタート する点に注意してください。
配列から1つ取り出す
const fruits = ["りんご", "みかん", "バナナ"];
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);出力結果:
りんご
みかん
バナナfruits[0]で最初の要素（りんご）を取得fruits[1]は2番目、fruits[2]は3番目
インデックスは変数としても使える
const fruits = ["りんご", "みかん", "バナナ"];
let i = 1;
console.log(fruits[i]);出力結果:
みかん存在しない番号を指定すると？
const fruits = ["りんご", "みかん", "バナナ"];
console.log(fruits[10]);出力結果:
undefined- 配列に存在しないインデックスを指定すると、エラーにはならず
undefinedになります。
配列のインデックスを使えば、特定の要素を取り出して表示したり、処理したりすることができます。
次は「配列に値を追加・削除する方法」を学んでいきましょう！
4.要素の追加と削除（push・pop・splice）
配列は、あとから要素を追加したり、削除したりすることができます。
そのときによく使われるのが、push()、pop()、splice() というメソッドです。
push()：配列の最後に値を追加
const fruits = ["りんご", "みかん"];
fruits.push("バナナ");
console.log(fruits);出力結果:
["りんご", "みかん", "バナナ"]
push()は「末尾に追加」するメソッド- 複数追加も可能：
fruits.push("ぶどう", "もも");
pop()：配列の最後から1つ削除
const fruits = ["りんご", "みかん", "バナナ"];
fruits.pop(); // 最後の要素を削除
console.log(fruits); // 残った配列を表示 出力結果:
["りんご", "みかん"]- 配列の一番うしろにある要素（ここでは「バナナ」）が削除されて、残りの配列だけが表示されます。
splice()：途中の要素を削除・追加
const fruits = ["りんご", "みかん", "バナナ", "ぶどう"];
fruits.splice(1, 2); // 1番目から2つ削除
console.log(fruits);出力結果:
出力結果:
["りんご", "ぶどう"]- 第1引数：開始位置のインデックス
- 第2引数：削除する個数
- 第3引数以降：削除部分に追加する値（省略可）
これらのメソッドを使えば、必要に応じて柔軟に配列の中身を操作できます。
次は、配列をループして1つずつ処理する方法「for文」「forEach」に進みましょう！
5.配列のループ処理（for・forEach）
配列の中身を1つずつ順番に処理したいときは、繰り返し（ループ）を使います。
JavaScriptでは for 文や forEach() メソッドでループ処理ができます。
for文を使ったループ（基本の形）
const fruits = ["りんご", "みかん", "バナナ"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}出力結果:
りんご
みかん
バナナfruits.lengthで配列の長さを取得fruits[i]で1つずつ取り出して表示
for 文のしくみについてもっとくわしく知りたい方は、こちらの記事もどうぞ：
🔗 JavaScriptのfor文の使い方と繰り返し処理の基本を解説！
forEach()を使えばもっとシンプルに書ける
const fruits = ["りんご", "みかん", "バナナ"];
fruits.forEach(function(item) {
console.log(item);
});出力結果:
りんご
みかん
バナナforEach()は、配列の要素を1つずつ順番に取り出して処理してくれるメソッドfunction(item)のitemに、配列の値が順番に入ってくる
インデックスも使いたいときは？
fruits.forEach(function(item, index) {
console.log(index + "番目：" + item);
});出力結果:
0番目：りんご
1番目：みかん
2番目：バナナforEach() では、第2引数としてインデックス（番号）も取得可能です。
ループ処理を使うことで、配列に入れたデータをまとめて処理したり、条件に応じた表示がしやすくなります。
6.まとめ
今回は、JavaScriptの配列について基本から学びました。
配列は、「複数のデータをまとめて管理できる箱」のような存在で、変数だけでは扱いきれない量のデータをスッキリ整理してくれます。
学んだポイントまとめ
[]を使って配列を作れる（リテラル）fruits[0]のように、インデックスで取り出すpush()やpop()で追加・削除ができるforやforEach()を使えば順番に処理できる
コメント