【JAVASCRIPT】JavaScriptのループ文について

タグ :

JAVASCRIPT

PROGRAMMING

JavaScriptのループ文は、特定の条件が満たされるまで、または特定の回数だけコードを繰り返し実行するために使われます。

1 for ループ
2 for ループの実用例
3 for…in ループ
4 for…inループ実用例
5 for…of ループ
6 for…ofループ実用例
7 while ループ
8 whileループの実用例
9 do…while ループ
10 do-whileループの実用例

for ループ

forループは、繰り返し処理を行う際に最も一般的に使用されるループです。初期化、条件判定、更新処理を一つの行でまとめて記述できます。

構文



for (初期化; 条件; 更新処理) {
    // 繰り返し実行するコード
}

例



for (let i = 0; i < 5; i++) {
    console.log(i);
}

このコードは、0から4までの数字をコンソールに表示します。

for ループの実用例

配列の要素をループして表示する



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

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

この例では、fruits配列のすべての要素が順番にconsole.logで表示されます。

合計を計算する



let sum = 0;

for (let i = 1; i <= 10; i++) {
    sum += i;
}

console.log("The sum is:", sum);

このコードでは、sumに1から10までの数値を順番に加算し、最終的に合計を表示します。

条件付きループ



for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
        continue;  // 偶数をスキップ
    }
    console.log(i);
}

この例では、iが偶数の場合はcontinueによってスキップされ、奇数のみがconsole.logで表示されます。

多重ループ

forループをネストして、多重ループを作成することも可能です。例えば、2次元の配列を処理する場合に使います。



let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

for (let i = 0; i < matrix.length; i++) {
    for (let j = 0; j < matrix[i].length; j++) {
        console.log(matrix[i][j]);
    }
}

この例では、matrixという2次元配列のすべての要素が表示されます。外側のループが行（i）、内側のループが列（j）を表しています。

for…in ループ

for…inループは、オブジェクトのすべての列挙可能なプロパティを反復処理するために使用されます。

構文



for (プロパティ in オブジェクト) {
    // 繰り返し実行するコード
}

例



const person = {name: "John", age: 30, city: "New York"};
for (let key in person) {
    console.log(key + ": " + person[key]);
}

このコードは、オブジェクトpersonのすべてのプロパティとその値をコンソールに表示します。

for…inループ実用例

オブジェクトのプロパティを表示する



const student = {
    name: "Alice",
    age: 22,
    major: "Computer Science",
    grade: "A"
};

for (let key in student) {
    console.log(key + ": " + student[key]);
}

説明:
student オブジェクトには、名前、年齢、専攻、成績といったプロパティが含まれています。
for…inループを使って、オブジェクトの各プロパティを順に処理し、キーとその対応する値を表示します。

出力:



name: Alice
age: 22
major: Computer Science
grade: A

プロパティを基に条件付き処理を行う

例えば、学生の成績に基づいて何らかのアクションを取る場合:



const student = {
    name: "Alice",
    age: 22,
    major: "Computer Science",
    grade: "A",
    attendance: "Excellent"
};

for (let key in student) {
    if (key === "grade" && student[key] === "A") {
        console.log(student.name + " has an excellent grade!");
    } else if (key === "attendance" && student[key] === "Excellent") {
        console.log(student.name + " has excellent attendance!");
    }
}

説明:
この例では、学生の成績(grade)が「A」であるか、または出席状況(attendance)が「Excellent」である場合にメッセージを表示します。

出力:



Alice has an excellent grade!
Alice has excellent attendance!

ネストされたオブジェクトの処理

もしオブジェクトのプロパティの中にさらにオブジェクトがある場合、for…inループをネストして処理することもできます。



const student = {
    name: "Alice",
    age: 22,
    major: "Computer Science",
    grades: {
        math: "A",
        physics: "B",
        chemistry: "A"
    }
};

for (let key in student) {
    if (typeof student[key] === "object") {
        console.log(key + ":");
        for (let subKey in student[key]) {
            console.log("  " + subKey + ": " + student[key][subKey]);
        }
    } else {
        console.log(key + ": " + student[key]);
    }
}

説明:
studentオブジェクトには、gradesというプロパティがあり、それ自体がオブジェクトです。
for…inループをネストして、gradesオブジェクトの中の各科目の成績を表示しています。

出力:



name: Alice
age: 22
major: Computer Science
grades:
  math: A
  physics: B
  chemistry: A

for…of ループ

for…ofループは、配列や文字列などの反復可能なオブジェクトの値を反復処理するために使用されます。

構文



for (変数 of 反復可能オブジェクト) {
    // 繰り返し実行するコード
}

例



const array = [10, 20, 30];
for (let value of array) {
    console.log(value);
}

このコードは、配列の各要素を順にコンソールに表示します。

for…ofループ実用例

配列の要素を処理する



const fruits = ["apple", "banana", "cherry"];

for (let fruit of fruits) {
    console.log(fruit);
}

説明:
fruits 配列には、3つのフルーツの名前が含まれています。
for…ofループを使って、配列の各要素を順に取り出し、コンソールに表示しています。

出力:



apple
banana
cherry

文字列の各文字を処理する



const word = "Hello";

for (let char of word) {
    console.log(char);
}

説明:
word という文字列の各文字をfor…ofループで順に取り出し、表示します。

出力:



H
e
l
l
o

Map オブジェクトの処理



const studentGrades = new Map([
    ["Alice", "A"],
    ["Bob", "B"],
    ["Charlie", "C"]
]);

for (let [student, grade] of studentGrades) {
    console.log(student + ": " + grade);
}

説明:
studentGrades はMapオブジェクトで、学生の名前と成績のペアが格納されています。
for…ofループを使って、各学生とその成績を取り出して表示します。

出力:



Alice: A
Bob: B
Charlie: C

Set オブジェクトの処理



const uniqueNumbers = new Set([1, 2, 3, 4, 5]);

for (let number of uniqueNumbers) {
    console.log(number);
}

説明:
uniqueNumbers はSetオブジェクトで、重複しない一意の数値が格納されています。
for…ofループで各数値を順に取り出し、表示します。

出力:

ループ中の処理のカスタマイズ



const scores = [85, 90, 78, 92, 88];

for (let score of scores) {
    if (score >= 90) {
        console.log("Excellent: " + score);
    } else {
        console.log("Good: " + score);
    }
}

説明:
scores 配列には、テストの点数が格納されています。
for…ofループで各スコアを評価し、90点以上の場合は「Excellent」、それ以外の場合は「Good」として表示します。

出力:



Good: 85
Excellent: 90
Good: 78
Excellent: 92
Good: 88

while ループ

whileループは、指定された条件がtrueである限り、コードを繰り返し実行します。条件が初めにチェックされるので、条件がfalseの場合、ループは一度も実行されません。

構文



while (条件) {
    // 繰り返し実行するコード
}

例



let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

このコードも0から4までの数字をコンソールに表示します。

whileループの実用例

次の例は、ユーザーから正しい入力が得られるまで繰り返しプロンプトを表示するコードです。



let userInput = "";

while (userInput !== "yes" && userInput !== "no") {
    userInput = prompt("Please enter 'yes' or 'no':");
}

console.log("You entered:", userInput);

この例では、ユーザーが”yes”または”no”を入力するまで、プロンプトが繰り返し表示されます。

do…while ループ

do…whileループはwhileループに似ていますが、少なくとも一度はループを実行します。条件のチェックがループの後に行われるため、最初の1回は必ず実行されます。

構文



do {
    // 繰り返し実行するコード
} while (条件);

例



let i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);

このコードも0から4までの数字をコンソールに表示します。

do-whileループの実用例

次の例は、ユーザーが正しい数値を入力するまで繰り返しプロンプトを表示するdo-whileループです。



let userInput;

do {
    userInput = prompt("10より大きい数を入力してください。:");
} while (userInput <= 10);

console.log("You entered:", userInput);

前ページに戻る