ループで配列を処理！JavaScript初心者向けfor文の使い方

みなさん、配列を使っていて困ったことありませんか？

「配列の中身を全部表示したい！」 「100個の要素を一つずつ処理するの？」 「同じコードを何度も書くのは面倒...」

こんな悩み、プログラミングを始めた人なら誰でも感じますよね。

実は、JavaScriptにはfor文という便利な機能があるんです！ これを使えば、配列の処理がとっても楽になります。

この記事では、JavaScript初心者の方向けに、for文を使った配列処理を分かりやすく解説します。 基本的な書き方から実践的なテクニックまで、一緒に学んでいきましょう。

for文って何だろう？基本を知ろう

なぜfor文が必要なの？

同じ処理を何度も繰り返したい時に使います。

// for文を使わない場合（とても大変）
let numbers = [1, 2, 3, 4, 5];

console.log(numbers[0]);
console.log(numbers[1]);
console.log(numbers[2]);
console.log(numbers[3]);
console.log(numbers[4]);
// 100個の要素があったら100行書く必要が...

これは大変ですよね。 for文を使うと、たった3行で済みます。

// for文を使った場合（とても楽）
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}
// たった3行で全要素を処理

まるで魔法みたいに簡単になります！

配列の基本を復習しよう

for文を学ぶ前に、配列の基本を確認しましょう。

// 配列の基本
let fruits = ["apple", "banana", "orange", "grape"];

console.log("配列の長さ:", fruits.length);        // 4
console.log("最初の要素:", fruits[0]);             // "apple"
console.log("最後の要素:", fruits[fruits.length - 1]); // "grape"

配列のポイントです。

// インデックスは0から始まる
console.log("インデックス0:", fruits[0]); // "apple"
console.log("インデックス1:", fruits[1]); // "banana"
console.log("インデックス2:", fruits[2]); // "orange"
console.log("インデックス3:", fruits[3]); // "grape"

この仕組みを理解すると、for文がもっと分かりやすくなりますよ。

基本のfor文をマスターしよう

for文の書き方

一番基本的なfor文の形を覚えましょう。

// for文の基本構文
// for (初期化; 条件; 更新) {
//     実行する処理
// }

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

for (let i = 0; i < colors.length; i++) {
    console.log(`${i}: ${colors[i]}`);
}

実行すると、こんな結果になります。

0: red 1: green 2: blue 3: yellow

とってもシンプルですよね！

各部分を詳しく見てみよう

for文の3つの部分を詳しく解説します。

let animals = ["cat", "dog", "bird", "fish"];

// 各部分を詳しく解説
for (
    let i = 0;           // 初期化: カウンター変数iを0で初期化
    i < animals.length;  // 条件: iが配列の長さより小さい間続ける
    i++                  // 更新: 毎回iを1増やす
) {
    console.log(`動物${i + 1}: ${animals[i]}`);
}

同じことを別の書き方でも表現できます。

// 同じことを別の書き方で
for (let index = 0; index < animals.length; index = index + 1) {
    console.log(`動物${index + 1}: ${animals[index]}`);
}

i++はi = i + 1の省略形なんです。

実際に使ってみよう

数値の配列で合計を計算してみましょう。

// 数値配列の合計を計算
let scores = [85, 92, 78, 95, 88];
let total = 0;

for (let i = 0; i < scores.length; i++) {
    total += scores[i];
    console.log(`${i + 1}番目: ${scores[i]}点 (累計: ${total}点)`);
}

console.log(`平均点: ${total / scores.length}点`);

条件に合う要素だけを取り出すこともできます。

// 条件に合う要素を抽出
let temperatures = [22, 25, 30, 18, 33, 28, 15];
let hotDays = [];

for (let i = 0; i < temperatures.length; i++) {
    if (temperatures[i] >= 25) {
        hotDays.push(temperatures[i]);
    }
}

console.log("25度以上の日:", hotDays); // [25, 30, 33, 28]

配列の要素を変換することもできますよ。

// 配列の要素を変換
let prices = [100, 200, 300, 400, 500];
let discountedPrices = [];

for (let i = 0; i < prices.length; i++) {
    let discounted = prices[i] * 0.8; // 20%割引
    discountedPrices.push(discounted);
}

console.log("割引後価格:", discountedPrices);
// [80, 160, 240, 320, 400]

どれも実際のWebアプリでよく使うパターンです。

for...of文でもっと簡単に

for...ofってなに？

ES6で追加された、もっと簡単な書き方です。

let fruits = ["apple", "banana", "orange"];

// 従来のfor文
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

// for...of文（よりシンプル）
for (let fruit of fruits) {
    console.log(fruit);
}

変数名は自由に決められます。

// 変数名は任意
for (let item of fruits) {
    console.log(`フルーツ: ${item}`);
}

とても読みやすくなりますね。

for...ofの良いところ

読みやすさを比較してみましょう。

let bookTitles = [
    "JavaScriptの教科書",
    "Webアプリ開発入門",
    "プログラミング思考",
    "データ構造とアルゴリズム"
];

// 従来のfor文（インデックスが不要なのに冗長）
for (let i = 0; i < bookTitles.length; i++) {
    console.log(`読書リスト: ${bookTitles[i]}`);
}

// for...of文（簡潔で分かりやすい）
for (let title of bookTitles) {
    console.log(`読書リスト: ${title}`);
}

エラーも起きにくくなります。

// エラーが起きにくい（インデックスの範囲外アクセスがない）
let numbers = [1, 2, 3];

// 危険: インデックスミスの可能性
for (let i = 0; i <= numbers.length; i++) { // <= は間違い
    console.log(numbers[i]); // undefinedが表示される
}

// 安全: 要素の数だけ確実に実行
for (let number of numbers) {
    console.log(number); // 常に有効な値
}

for...ofの方が安全で簡単ですね。

実際に使ってみよう

配列要素の加工例です。

// 配列要素の加工
let originalPrices = [1000, 1500, 2000, 800, 1200];
let taxIncludedPrices = [];

for (let price of originalPrices) {
    let taxIncluded = Math.floor(price * 1.1); // 消費税込み
    taxIncludedPrices.push(taxIncluded);
}

console.log("税込み価格:", taxIncludedPrices);

文字列の処理もできます。

// 文字列処理
let userInputs = ["  Hello  ", "  World  ", "  JavaScript  "];
let cleanedInputs = [];

for (let input of userInputs) {
    let cleaned = input.trim().toLowerCase();
    cleanedInputs.push(cleaned);
}

console.log("整理後:", cleanedInputs);
// ["hello", "world", "javascript"]

条件判定とカウントもできますよ。

// 条件判定とカウント
let testScores = [85, 92, 78, 95, 88, 76, 89, 94];
let passCount = 0;
let failCount = 0;
let totalScore = 0;

for (let score of testScores) {
    totalScore += score;
    
    if (score >= 80) {
        passCount++;
        console.log(`合格: ${score}点`);
    } else {
        failCount++;
        console.log(`不合格: ${score}点`);
    }
}

console.log(`合格者: ${passCount}人`);
console.log(`不合格者: ${failCount}人`);
console.log(`平均点: ${(totalScore / testScores.length).toFixed(1)}点`);

for...ofは本当に便利です！

for...in文でオブジェクトを扱おう

for...inの基本

オブジェクトのプロパティを取得するときに使います。

// オブジェクトでのfor...in使用
let person = {
    name: "田中太郎",
    age: 30,
    city: "東京",
    job: "エンジニア"
};

for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}

実行すると、こんな結果になります。

name: 田中太郎 age: 30 city: 東京 job: エンジニア

とても便利ですね。

配列でのfor...in（注意が必要）

配列でも使えますが、注意点があります。

let colors = ["red", "green", "blue"];

// for...in は配列のインデックスを返す
for (let index in colors) {
    console.log(`インデックス: ${index} (型: ${typeof index})`);
    console.log(`値: ${colors[index]}`);
}
// 注意: indexは文字列型になる

より安全な方法があります。

// より安全な方法
for (let i = 0; i < colors.length; i++) {
    console.log(`インデックス: ${i} (型: ${typeof i})`);
    console.log(`値: ${colors[i]}`);
}

// または for...of を使用
for (let color of colors) {
    console.log(`色: ${color}`);
}

配列にはfor...ofの方がおすすめです。

実際の活用例

オブジェクトの配列を処理してみましょう。

// オブジェクトの配列を処理
let employees = [
    { name: "田中", department: "開発", salary: 500000 },
    { name: "佐藤", department: "営業", salary: 450000 },
    { name: "山田", department: "人事", salary: 480000 }
];

for (let employee of employees) {
    console.log(`=== ${employee.name} ===`);
    for (let key in employee) {
        console.log(`${key}: ${employee[key]}`);
    }
    console.log("");
}

動的なプロパティアクセスもできます。

// 動的なプロパティアクセス
let salesData = {
    january: 120000,
    february: 135000,
    march: 145000,
    april: 132000
};

let totalSales = 0;
let monthCount = 0;

for (let month in salesData) {
    let sales = salesData[month];
    totalSales += sales;
    monthCount++;
    
    console.log(`${month}: ${sales.toLocaleString()}円`);
}

console.log(`
総売上: ${totalSales.toLocaleString()}円`);
console.log(`平均売上: ${(totalSales / monthCount).toLocaleString()}円`);

オブジェクトのプロパティをフィルタリングすることもできます。

// オブジェクトのプロパティをフィルタリング
let userSettings = {
    theme: "dark",
    language: "ja",
    notifications: true,
    autoSave: false,
    fontSize: 14,
    debugMode: true
};

console.log("=== Boolean設定のみ ===");
for (let setting in userSettings) {
    if (typeof userSettings[setting] === 'boolean') {
        console.log(`${setting}: ${userSettings[setting]}`);
    }
}

とても実用的ですね。

実践的な配列処理をマスターしよう

データの集計と統計

売上データを分析してみましょう。

// 売上データの分析
let salesData = [
    { month: "1月", amount: 120000, region: "東京" },
    { month: "2月", amount: 135000, region: "大阪" },
    { month: "3月", amount: 145000, region: "東京" },
    { month: "4月", amount: 132000, region: "福岡" },
    { month: "5月", amount: 155000, region: "東京" },
    { month: "6月", amount: 128000, region: "大阪" }
];

// 総売上の計算
let totalSales = 0;
for (let data of salesData) {
    totalSales += data.amount;
}

// 地域別売上の集計
let salesByRegion = {};
for (let data of salesData) {
    if (salesByRegion[data.region]) {
        salesByRegion[data.region] += data.amount;
    } else {
        salesByRegion[data.region] = data.amount;
    }
}

// 最高売上月を見つける
let maxSales = salesData[0];
for (let data of salesData) {
    if (data.amount > maxSales.amount) {
        maxSales = data;
    }
}

console.log(`総売上: ${totalSales.toLocaleString()}円`);
console.log(`平均売上: ${(totalSales / salesData.length).toLocaleString()}円`);
console.log(`最高売上: ${maxSales.month} ${maxSales.amount.toLocaleString()}円`);
console.log("地域別売上:", salesByRegion);

色々な情報を一度に計算できました。

データの変換と加工

商品データを変換してみましょう。

// 商品データの変換
let products = [
    { id: 1, name: "ノートPC", price: 80000, category: "electronics" },
    { id: 2, name: "マウス", price: 2000, category: "electronics" },
    { id: 3, name: "プログラミング本", price: 3000, category: "books" },
    { id: 4, name: "デスク", price: 15000, category: "furniture" }
];

// 税込み価格を追加
for (let product of products) {
    product.priceWithTax = Math.floor(product.price * 1.1);
}

// カテゴリ名を日本語に変換
let categoryMap = {
    electronics: "電子機器",
    books: "書籍",
    furniture: "家具"
};

for (let product of products) {
    product.categoryJP = categoryMap[product.category] || "その他";
}

// 価格帯を追加
for (let product of products) {
    if (product.price < 5000) {
        product.priceRange = "安価";
    } else if (product.price < 20000) {
        product.priceRange = "中価格";
    } else {
        product.priceRange = "高価格";
    }
}

console.log("加工後の商品データ:");
for (let product of products) {
    console.log(`${product.name}: ${product.priceWithTax.toLocaleString()}円 (${product.categoryJP}, ${product.priceRange})`);
}

データがとても分かりやすくなりました。

検索とフィルタリング

学生データの検索システムを作ってみましょう。

// 学生データの検索システム
let students = [
    { id: 1, name: "田中太郎", grade: 85, subject: "数学", year: 2 },
    { id: 2, name: "佐藤花子", grade: 92, subject: "英語", year: 1 },
    { id: 3, name: "山田次郎", grade: 78, subject: "数学", year: 3 },
    { id: 4, name: "鈴木美子", grade: 88, subject: "国語", year: 2 },
    { id: 5, name: "高橋健太", grade: 95, subject: "数学", year: 1 }
];

// 複数条件での検索関数
function searchStudents(students, criteria) {
    let results = [];
    
    for (let student of students) {
        let match = true;
        
        // 各条件をチェック
        for (let key in criteria) {
            if (criteria[key] !== undefined && student[key] !== criteria[key]) {
                match = false;
                break;
            }
        }
        
        if (match) {
            results.push(student);
        }
    }
    
    return results;
}

// 範囲検索関数
function searchStudentsByGradeRange(students, minGrade, maxGrade) {
    let results = [];
    
    for (let student of students) {
        if (student.grade >= minGrade && student.grade <= maxGrade) {
            results.push(student);
        }
    }
    
    return results;
}

実際に検索してみましょう。

// 検索例
console.log("=== 数学の学生 ===");
let mathStudents = searchStudents(students, { subject: "数学" });
for (let student of mathStudents) {
    console.log(`${student.name}: ${student.grade}点`);
}

console.log("
=== 90点以上の学生 ===");
let highScoreStudents = searchStudentsByGradeRange(students, 90, 100);
for (let student of highScoreStudents) {
    console.log(`${student.name}: ${student.grade}点 (${student.subject})`);
}

console.log("
=== 2年生の数学 ===");
let year2Math = searchStudents(students, { subject: "数学", year: 2 });
for (let student of year2Math) {
    console.log(`${student.name}: ${student.grade}点`);
}

柔軟な検索システムができました。

よくある間違いを避けよう

インデックスの範囲外アクセス

よくある間違いです。

// 間違いやすい例
let numbers = [1, 2, 3, 4, 5];

// 危険: <= を使用
for (let i = 0; i <= numbers.length; i++) { // 間違い
    console.log(numbers[i]); // 最後にundefinedが表示される
}

// 正しい: < を使用
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

// より安全: for...of を使用
for (let number of numbers) {
    console.log(number);
}

範囲チェック付きの安全な関数も作れます。

// 範囲チェック付きの安全な関数
function safeArrayAccess(array, index) {
    if (index >= 0 && index < array.length) {
        return array[index];
    } else {
        console.warn(`インデックス ${index} は範囲外です (配列長: ${array.length})`);
        return undefined;
    }
}

// 使用例
for (let i = 0; i <= numbers.length; i++) {
    let value = safeArrayAccess(numbers, i);
    if (value !== undefined) {
        console.log(`インデックス ${i}: ${value}`);
    }
}

安全にアクセスできるようになります。

ループ中での配列の変更

危険な例を見てみましょう。

// 危険な例: ループ中に配列を変更
let items = ["a", "b", "c", "d", "e"];

// 問題のあるコード
console.log("=== 危険な削除 ===");
for (let i = 0; i < items.length; i++) {
    if (items[i] === "b" || items[i] === "d") {
        items.splice(i, 1); // 要素を削除
        // インデックスがずれて要素がスキップされる
    }
    console.log(`i=${i}, 要素: ${items[i]}, 配列: [${items.join(", ")}]`);
}

安全な方法があります。

// 安全な方法1: 後ろから削除
items = ["a", "b", "c", "d", "e"];
console.log("
=== 安全な削除（後ろから） ===");
for (let i = items.length - 1; i >= 0; i--) {
    if (items[i] === "b" || items[i] === "d") {
        console.log(`削除: ${items[i]}`);
        items.splice(i, 1);
    }
}
console.log(`結果: [${items.join(", ")}]`);

// 安全な方法2: フィルタリング
items = ["a", "b", "c", "d", "e"];
console.log("
=== 安全な削除（フィルタ） ===");
let filteredItems = [];
for (let item of items) {
    if (item !== "b" && item !== "d") {
        filteredItems.push(item);
    } else {
        console.log(`除外: ${item}`);
    }
}
console.log(`結果: [${filteredItems.join(", ")}]`);

どちらも安全で確実です。

変数スコープの問題

よくある変数スコープの問題です。

// 問題のある例: var の使用
console.log("=== var の問題 ===");
var buttons = ["ボタン1", "ボタン2", "ボタン3"];
var handlers = [];

for (var i = 0; i < buttons.length; i++) {
    handlers.push(function() {
        console.log(`${buttons[i]}がクリックされました`); // iは常に3
    });
}

// すべて "undefined がクリックされました" になる
for (var j = 0; j < handlers.length; j++) {
    handlers[j]();
}

let を使って解決できます。

// 解決方法1: let の使用
console.log("
=== let で解決 ===");
let correctHandlers = [];

for (let i = 0; i < buttons.length; i++) {
    correctHandlers.push(function() {
        console.log(`${buttons[i]}がクリックされました`);
    });
}

for (let j = 0; j < correctHandlers.length; j++) {
    correctHandlers[j]();
}

for...ofを使う方法もあります。

// 解決方法3: for...of の使用
console.log("
=== for...of で解決 ===");
let modernHandlers = [];

for (let button of buttons) {
    modernHandlers.push(function() {
        console.log(`${button}がクリックされました`);
    });
}

for (let handler of modernHandlers) {
    handler();
}

現代的な書き方ではこの問題は起きにくくなっています。

まとめ

JavaScriptのfor文を使った配列処理について学びました。

for文の種類と特徴

• 基本のfor文: インデックスが必要な時に使う
• for...of文: 要素に直接アクセス、シンプルで安全
• for...in文: オブジェクトのプロパティを取得

実践的な使い方

• データの集計と統計計算
• 配列要素の変換と加工
• 条件に基づく検索とフィルタリング
• オブジェクトの動的プロパティアクセス

注意すべきポイント

• インデックスの範囲外アクセスに注意
• ループ中の配列変更は危険
• varよりletを使う
• 用途に応じた適切なfor文を選ぶ

これからの学習

• まずは基本のfor文から練習
• for...ofで簡単な配列処理をマスター
• 実際のWebアプリで活用してみる
• エラーハンドリングも忘れずに

for文を適切に使えるようになると、配列処理がとても楽になります。 最初は簡単な例から始めて、だんだんと複雑な処理にもチャレンジしてみてくださいね。

ぜひ今日から、これらの技術を活用して、より効率的なJavaScriptプログラムを作ってみませんか？