JavaScript配列を完全理解できますか？10個のメソッドで実務レベルへ

「JavaScript配列って、なんだか難しそう...」

そう思っていませんか？

こんにちは、とまだです。

実は私、プログラミングを始めたばかりの頃、配列の概念が全然理解できませんでした。

「なんで0から数えるの？」「pushとpopとは？」って感じで。

でも、ある日気づいたんです。

配列って、買い物カゴと同じだって。

今回は現役のエンジニア、そして元プログラミングスクール講師としての経験から、JavaScript配列について解説します。

JavaScript配列＝買い物カゴだと考えれば簡単

簡単に言うと、JavaScript配列とはデータをまとめて管理する入れ物です。

スーパーで買い物をするとき、商品を一つずつ手に持っていたら大変ですよね。

だから買い物カゴを使います。JavaScript配列も同じです。

// 空の買い物カゴ（配列）
let shoppingCart = [];

// 商品が入った買い物カゴ
let fruits = ["りんご", "みかん", "ぶどう"];

角括弧 [] で囲むだけ。簡単でしょ？

なぜ配列が必要なのか（100個の変数を作りますか？）

もし配列を使わないとどうなるか、見てみましょう。

// 配列を使わない場合（地獄）
let fruit1 = "りんご";
let fruit2 = "みかん";
let fruit3 = "ぶどう";
let fruit4 = "いちご";
let fruit5 = "メロン";
// あと95個...

// 配列を使う場合（スッキリ）
let fruits = ["りんご", "みかん", "ぶどう", "いちご", "メロン"];

100個の商品を扱うなら、変数を100個作りますか？

無理ですよね。私なら3個目で挫折します。

配列の作り方3パターン（でも実質1つ）

JavaScript配列の作り方は3つありますが、正直1つだけ覚えればOKです。

1. リテラル記法（これだけ使えばOK）

// 空の配列
let emptyArray = [];

// 値入り配列
let numbers = [1, 2, 3, 4, 5];
let mixed = ["文字", 123, true, null];  // 型は混在OK

私はこれしか使いません。シンプルで読みやすいから。

2. Arrayコンストラクタ（ややこしい）

let array1 = new Array();
let array2 = new Array(5);  // 要素5個の空配列？
let array3 = new Array("赤", "青", "黄");

new Array(5) は要素が5個じゃなくて、長さが5の空配列を作ります。

紛らわしいので使わない方がいいです。

3. Array.from()（上級者向け）

// 文字列から配列を作る
let chars = Array.from("こんにちは");
// ["こ", "ん", "に", "ち", "は"]

便利だけど、最初は気にしなくていいです。

なぜ0から数えるのか（プログラマーの宿命）

配列の要素は0番目から始まります。

let fruits = ["りんご", "みかん", "ぶどう"];
//             0番目     1番目     2番目

console.log(fruits[0]);  // "りんご"
console.log(fruits[1]);  // "みかん"
console.log(fruits[2]);  // "ぶどう"

「なんで1からじゃないの？」

私も最初はそう思いました。でも、これはプログラミング界の共通ルールなんです。

慣れるしかありません。でも大丈夫、すぐに慣れます。

現場で必須の配列メソッド10選

配列には便利なメソッドがたくさんありますが、実際に使うのはこの10個です。

1. push() - 最後に追加（使用頻度★★★★★）

let todoList = ["買い物", "掃除"];
todoList.push("洗濯");
console.log(todoList);  // ["買い物", "掃除", "洗濯"]

一番よく使います。ToDoリストに項目を追加するイメージ。

2. pop() - 最後を削除

let todoList = ["買い物", "掃除", "洗濯"];
let completed = todoList.pop();
console.log(todoList);   // ["買い物", "掃除"]
console.log(completed);  // "洗濯"

完了したタスクを取り除く感じです。

3. unshift() - 最初に追加

let queue = ["太郎", "花子"];
queue.unshift("次郎");
console.log(queue);  // ["次郎", "太郎", "花子"]

行列の先頭に割り込む感じ（実際はダメですよ）。

4. shift() - 最初を削除

let queue = ["太郎", "花子", "次郎"];
let first = queue.shift();
console.log(queue);  // ["花子", "次郎"]
console.log(first);  // "太郎"

行列の先頭の人が案内される感じ。

5. indexOf() - 要素の位置を探す

let fruits = ["りんご", "みかん", "ぶどう"];
console.log(fruits.indexOf("みかん"));  // 1
console.log(fruits.indexOf("メロン"));  // -1（見つからない）

「みかんは何番目？」を調べる。見つからないと-1。

6. includes() - 含まれているか確認

let fruits = ["りんご", "みかん", "ぶどう"];
console.log(fruits.includes("みかん"));  // true
console.log(fruits.includes("メロン"));  // false

在庫確認みたいなもの。あるかないかだけ知りたいときに。

7. slice() - 部分的に切り出す

let numbers = [1, 2, 3, 4, 5];
let part = numbers.slice(1, 4);
console.log(part);     // [2, 3, 4]
console.log(numbers);  // [1, 2, 3, 4, 5]（元は変わらない）

ケーキを切り分けるイメージ。元のケーキはそのまま。

8. splice() - 要素の追加・削除・置換

let months = ["1月", "2月", "4月", "5月"];
months.splice(2, 0, "3月");  // 2番目に3月を挿入
console.log(months);  // ["1月", "2月", "3月", "4月", "5月"]

万能メソッド。でも引数がややこしいので私は毎回調べます。

9. map() - 全要素を変換（使用頻度★★★★☆）

let prices = [100, 200, 300];
let taxIncluded = prices.map(price => price * 1.1);
console.log(taxIncluded);  // [110, 220, 330]

消費税を計算するみたいに、全部に同じ処理をするときに。

10. filter() - 条件で絞り込み（使用頻度★★★★☆）

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers);  // [2, 4, 6, 8, 10]

偶数だけ抜き出すみたいに、条件に合うものだけ選ぶ。

配列のループ処理（結局forEachが便利）

配列の全要素を処理する方法はいくつかありますが、正直言って選択肢が多すぎて混乱しますよね。

私もプログラミングスクールで「for文とforEachの違いは？」という質問を山ほど受けました。

基本のfor文

let fruits = ["りんご", "みかん", "ぶどう"];

for (let i = 0; i < fruits.length; i++) {
    console.log(i + "番目: " + fruits[i]);
}

インデックスが必要ならこれ。でも正直めんどくさい。

シンプルなfor...of文

let fruits = ["りんご", "みかん", "ぶどう"];

for (let fruit of fruits) {
    console.log("フルーツ: " + fruit);
}

値だけでいいならこっち。読みやすい。

便利なforEach()

let fruits = ["りんご", "みかん", "ぶどう"];

fruits.forEach((fruit, index) => {
    console.log(index + ": " + fruit);
});

私はほぼこれしか使いません。値もインデックスも取れるから。

よくあるミスと対処法

undefinedエラー

let fruits = ["りんご", "みかん", "ぶどう"];
console.log(fruits[3]);  // undefined

存在しない要素にアクセスするとundefined。

私も最初「なんでエラーにならないの？」って思いました。

無限ループ

let numbers = [1, 2, 3];

// 危険！（配列が増え続ける）
// for (let i = 0; i < numbers.length; i++) {
//     numbers.push(i);
// }

ループ中に配列の長さを変えるのは危険。

私は一度これで画面を固まらせました...。

配列を上書き

let arr = [1, 2, 3];
arr = 4;  // 配列じゃなくなる！

これ、実際にやったことあります。

「なんで配列のメソッドが使えないの？」ってしばらく悩みました。

実践：簡単なToDoリストを作ってみよう

学んだことを使って、実際に動くものを作りましょう。

let todoList = [];

// タスクを追加
function addTask(task) {
    todoList.push(task);
    console.log("追加: " + task);
}

// タスクを完了
function completeTask(index) {
    if (index >= 0 && index < todoList.length) {
        let completed = todoList.splice(index, 1)[0];
        console.log("完了: " + completed);
    } else {
        console.log("そのタスクはありません");
    }
}

// 一覧表示
function showTasks() {
    console.log("=== ToDoリスト ===");
    todoList.forEach((task, index) => {
        console.log(index + ": " + task);
    });
}

// 使ってみる
addTask("買い物");
addTask("掃除");
showTasks();
completeTask(0);
showTasks();

これで基本的なToDoリストの完成です！

配列学習のロードマップ

「覚えること多すぎ...」と思ったあなたへ。

段階的に学べば大丈夫です。

Week 1：基本操作だけ

• 配列の作成
• 要素へのアクセス
• push()とpop()
• lengthプロパティ

これだけ。他は無視。

Week 2：ループ処理

• for文
• forEach()
• 簡単な集計

Week 3-4：便利メソッド

• filter()で絞り込み
• map()で変換
• indexOf()で検索

毎日少しずつで十分。継続すれば配列マスターです。

多次元配列って必要？（実はたまに使う）

配列の中に配列を入れることもできます。

// 成績表のイメージ
let scores = [
    ["太郎", 80, 75, 90],
    ["花子", 90, 85, 95],
    ["次郎", 70, 80, 85]
];

console.log(scores[0][0]);  // "太郎"
console.log(scores[1][1]);  // 90（花子の1科目目）

正直、最初は「こんなの使うの？」って思ってました。

でも実際は、表形式のデータを扱うときに便利なんです。Excelのシートをイメージすると分かりやすいかも。

まとめ

JavaScript配列は「データをまとめて管理する買い物カゴ」です。

覚えるべきポイントは3つ。

1. 0から数える（慣れるしかない）
2. 基本メソッドから覚える（push、pop、lengthから）
3. 実際に書いて練習（読むだけじゃダメ）

私も最初は「配列？何それ美味しいの？」状態でした。

でも今では配列なしでコードは書けません。それくらい基本中の基本なんです。

まずはpush()とpop()から始めて、少しずつメソッドを増やしていけばOKです。

失敗してもいいんです。私だって「なんでundefinedになるの？」「なんで動かないの？」って何度も悩みました。

でも、そうやって悩んだ分だけ、確実に成長できます。

次は配列を使って、もっと実践的なアプリを作ってみましょう。

あなたならきっとできますよ。