JavaScriptにおいて、ループと条件分岐はプログラムの流れを制御するための基本的かつ重要な構文です。ループは特定のコードを繰り返し実行するために使用され、条件分岐はプログラムの実行経路を選択するために使用されます。これらを効果的に組み合わせることで、複雑なロジックや柔軟なプログラムを作成することが可能になります。本記事では、JavaScriptのループと条件分岐の基本から応用までを体系的に解説し、実践的なコード例や応用例を通じて理解を深めていきます。初心者から中級者まで幅広い層に役立つ内容を目指します。
ループの基本概念
JavaScriptには、コードを繰り返し実行するための主要なループ構文が3種類あります。これらのループ構文を理解することで、同じ処理を効率的に何度も行うことができます。
forループ
forループは、繰り返しの回数があらかじめ決まっている場合に使用します。基本的な構文は以下の通りです。
for (let i = 0; i < 10; i++) {
console.log(i);
}この例では、変数iが0から9までの値をとり、ループが10回実行されます。
whileループ
whileループは、条件が真である限りループを続けます。終了条件が明確でない場合や、ループ回数が動的に決まる場合に適しています。
let i = 0;
while (i < 10) {
console.log(i);
i++;
}この例では、変数iが0から9までの値をとり、条件i < 10が偽になるまでループが実行されます。
do-whileループ
do-whileループは、少なくとも一度はループを実行したい場合に使用します。構文は以下の通りです。
let i = 0;
do {
console.log(i);
i++;
} while (i < 10);この例では、変数iが0から9までの値をとり、条件i < 10が偽になるまでループが実行されます。doブロック内のコードは、条件チェックの前に一度実行されます。
これらのループを適切に使い分けることで、効率的で読みやすいコードを書くことができます。
条件分岐の基本概念
条件分岐は、プログラムの実行経路を制御するための重要な構文です。JavaScriptには、条件に基づいて異なるコードブロックを実行するための主要な条件分岐構文が4種類あります。
if文
if文は、指定した条件が真の場合に特定のコードブロックを実行します。基本的な構文は以下の通りです。
let x = 10;
if (x > 5) {
console.log("xは5より大きい");
}この例では、xが5より大きい場合にメッセージが表示されます。
else if文
else if文は、複数の条件を順にチェックし、最初に真となる条件のコードブロックを実行します。
let x = 10;
if (x > 15) {
console.log("xは15より大きい");
} else if (x > 5) {
console.log("xは5より大きいが15以下");
} else {
console.log("xは5以下");
}この例では、xが5より大きく15以下の場合にメッセージが表示されます。
else文
else文は、すべての条件が偽の場合に実行されるコードブロックを指定します。
let x = 3;
if (x > 5) {
console.log("xは5より大きい");
} else {
console.log("xは5以下");
}この例では、xが5以下の場合にメッセージが表示されます。
switch文
switch文は、変数の値に基づいて複数のコードブロックの中から1つを選択して実行します。複数の条件を効率的に処理するために使用されます。
let day = 3;
switch (day) {
case 1:
console.log("月曜日");
break;
case 2:
console.log("火曜日");
break;
case 3:
console.log("水曜日");
break;
default:
console.log("他の日");
}この例では、dayの値が3であるため、「水曜日」が表示されます。defaultブロックは、いずれの条件にも該当しない場合に実行されます。
これらの条件分岐構文を適切に使い分けることで、プログラムの動作を柔軟に制御することができます。
ループと条件分岐の組み合わせ
ループと条件分岐を組み合わせることで、より複雑で柔軟なプログラムを作成することができます。ループ内で条件分岐を使用することで、繰り返し処理の中で異なる条件に応じた処理を実行することが可能になります。
ループ内での条件分岐の使用例
以下に、forループとif文を組み合わせた例を示します。この例では、1から10までの数値をループで処理し、偶数と奇数を判別して異なるメッセージを表示します。
for (let i = 1; i <= 10; i++) {
if (i % 2 === 0) {
console.log(i + "は偶数です");
} else {
console.log(i + "は奇数です");
}
}このコードでは、iが1から10までの値をとり、それぞれの値について偶数か奇数かを判別して対応するメッセージを表示します。
実践的なシナリオ
次に、実践的なシナリオとして、配列内の数値をループ処理し、特定の条件に基づいて処理を分岐させる例を紹介します。ここでは、数値の配列から正の数と負の数を分けて、それぞれの数値の合計を計算します。
let numbers = [3, -2, 5, -1, 6, -4, 7];
let positiveSum = 0;
let negativeSum = 0;
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] > 0) {
positiveSum += numbers[i];
} else {
negativeSum += numbers[i];
}
}
console.log("正の数の合計: " + positiveSum);
console.log("負の数の合計: " + negativeSum);この例では、配列numbers内の各数値に対してループ処理を行い、正の数の場合はpositiveSumに、負の数の場合はnegativeSumに加算します。最終的に、それぞれの合計値を表示します。
このように、ループと条件分岐を組み合わせることで、特定の条件に応じた複雑な処理を効率的に実装することができます。これにより、より動的で柔軟なプログラムを作成することが可能になります。
forループとif文の実例
forループとif文を組み合わせることで、特定の条件に基づいた繰り返し処理を効率的に行うことができます。ここでは、forループとif文を使用した具体的なコード例をいくつか紹介します。
1から100までの数値のフィルタリング
次の例では、1から100までの数値の中から、3で割り切れる数値だけを表示します。
for (let i = 1; i <= 100; i++) {
if (i % 3 === 0) {
console.log(i + "は3で割り切れます");
}
}このコードでは、iが1から100までの値をとり、それぞれの値について3で割り切れるかどうかをif文でチェックし、割り切れる場合にメッセージを表示します。
特定の文字を含む文字列のフィルタリング
次の例では、文字列の配列から特定の文字を含む文字列だけを表示します。
let words = ["apple", "banana", "cherry", "date", "fig", "grape"];
let char = "a";
for (let i = 0; i < words.length; i++) {
if (words[i].includes(char)) {
console.log(words[i] + "は'" + char + "'を含みます");
}
}このコードでは、配列words内の各文字列に対してループ処理を行い、各文字列が指定した文字charを含むかどうかをif文でチェックします。含む場合にメッセージを表示します。
数値配列の合計と平均の計算
次の例では、数値の配列から正の数と負の数を分け、それぞれの合計と平均を計算して表示します。
let numbers = [3, -2, 5, -1, 6, -4, 7];
let positiveSum = 0;
let positiveCount = 0;
let negativeSum = 0;
let negativeCount = 0;
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] > 0) {
positiveSum += numbers[i];
positiveCount++;
} else {
negativeSum += numbers[i];
negativeCount++;
}
}
console.log("正の数の合計: " + positiveSum);
console.log("正の数の平均: " + (positiveSum / positiveCount));
console.log("負の数の合計: " + negativeSum);
console.log("負の数の平均: " + (negativeSum / negativeCount));このコードでは、配列numbers内の各数値に対してループ処理を行い、正の数の場合はpositiveSumに、負の数の場合はnegativeSumに加算し、それぞれのカウントも行います。最終的に、合計値と平均値を計算して表示します。
これらの例を通じて、forループとif文の組み合わせがどのように活用されるかを理解できるでしょう。これにより、特定の条件に基づいた繰り返し処理を効率的に実装することが可能になります。
whileループとswitch文の実例
whileループとswitch文を組み合わせることで、特定の条件に基づいて繰り返し処理を柔軟に実行することができます。ここでは、whileループとswitch文を使用した具体的なコード例を紹介します。
ユーザー入力の処理
次の例では、ユーザーが数値を入力し、その数値に応じて異なるメッセージを表示するプログラムを作成します。ユーザーが0を入力するまで、ループは続きます。
let input;
while (input !== 0) {
input = parseInt(prompt("数値を入力してください（終了するには0を入力）:"));
switch (input) {
case 1:
console.log("1が入力されました");
break;
case 2:
console.log("2が入力されました");
break;
case 3:
console.log("3が入力されました");
break;
case 0:
console.log("終了します");
break;
default:
console.log("1から3の数値を入力してください");
}
}このコードでは、ユーザーからの入力を繰り返し受け取り、入力された数値に応じたメッセージを表示します。0が入力されると、ループを終了します。
メニュー選択の処理
次の例では、簡単なメニューシステムを作成し、ユーザーが選択したメニュー項目に応じて異なる処理を実行します。ユーザーが「4.終了」を選択するまで、ループは続きます。
let choice;
while (choice !== 4) {
choice = parseInt(prompt("メニューを選択してください:\n1. オプション1\n2. オプション2\n3. オプション3\n4. 終了"));
switch (choice) {
case 1:
console.log("オプション1が選択されました");
break;
case 2:
console.log("オプション2が選択されました");
break;
case 3:
console.log("オプション3が選択されました");
break;
case 4:
console.log("終了します");
break;
default:
console.log("1から4の有効な選択肢を入力してください");
}
}このコードでは、ユーザーがメニューから選択した項目に応じて、対応するメッセージを表示します。「4. 終了」が選択されると、ループを終了します。
複雑な条件によるループの制御
次の例では、複雑な条件に基づいて異なる処理を実行し、特定の条件が満たされるまでループを続けます。
let attempts = 0;
let maxAttempts = 5;
let correctAnswer = "JavaScript";
while (attempts < maxAttempts) {
let userAnswer = prompt("プログラミング言語の名前を入力してください:");
switch (userAnswer) {
case "JavaScript":
console.log("正解です！");
attempts = maxAttempts; // ループを終了するためにattemptsを最大値に設定
break;
case "Python":
case "Ruby":
console.log("近いですが、違います");
attempts++;
break;
default:
console.log("間違いです。もう一度試してください");
attempts++;
}
}
if (attempts === maxAttempts && userAnswer !== correctAnswer) {
console.log("最大試行回数に達しました。正解は" + correctAnswer + "です。");
}このコードでは、ユーザーが正解を入力するか、最大試行回数に達するまでループを続けます。ユーザーが正解を入力すると、ループを終了し、それ以外の場合は試行回数を増やして再度入力を求めます。
これらの例を通じて、whileループとswitch文の組み合わせがどのように活用されるかを理解できるでしょう。これにより、特定の条件に基づいた柔軟な繰り返し処理を実装することが可能になります。
ネストされたループと条件分岐
ネストされたループと条件分岐を使用することで、複雑な繰り返し処理や条件分岐を実装することができます。ここでは、ネストされたループと条件分岐の具体的な使用例を紹介します。
多次元配列の処理
多次元配列を処理する際には、ループをネストすることで各要素にアクセスすることができます。以下の例では、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++) {
if (matrix[i][j] % 2 === 0) {
console.log(matrix[i][j] + "は偶数です");
} else {
console.log(matrix[i][j] + "は奇数です");
}
}
}このコードでは、2次元配列matrixの各要素に対してループ処理を行い、各要素が偶数か奇数かを判別して対応するメッセージを表示します。
ネストされた条件分岐
次の例では、ネストされたループと条件分岐を使用して、特定の条件に基づいた複雑な処理を実装します。ここでは、学生の成績を格納した配列を処理し、各学生の成績に基づいてメッセージを表示します。
let students = [
{ name: "Alice", scores: [85, 92, 78] },
{ name: "Bob", scores: [70, 68, 75] },
{ name: "Charlie", scores: [95, 100, 98] }
];
for (let i = 0; i < students.length; i++) {
let totalScore = 0;
for (let j = 0; j < students[i].scores.length; j++) {
totalScore += students[i].scores[j];
}
let averageScore = totalScore / students[i].scores.length;
if (averageScore >= 90) {
console.log(students[i].name + "の平均成績は" + averageScore + "で、評価はAです");
} else if (averageScore >= 80) {
console.log(students[i].name + "の平均成績は" + averageScore + "で、評価はBです");
} else if (averageScore >= 70) {
console.log(students[i].name + "の平均成績は" + averageScore + "で、評価はCです");
} else {
console.log(students[i].name + "の平均成績は" + averageScore + "で、評価はDです");
}
}このコードでは、各学生の成績を格納した配列をループ処理し、各学生の平均成績に基づいて評価を表示します。ネストされたループと条件分岐を使用することで、複雑なロジックを効率的に実装しています。
ネストされたループと条件分岐を用いたゲーム
次の例では、簡単なゲームロジックを実装します。ここでは、3×3のマス目を使用したじゃんけんゲームを行い、各マスにランダムに設定された値に基づいて勝敗を決定します。
let grid = [
["rock", "paper", "scissors"],
["scissors", "rock", "paper"],
["paper", "scissors", "rock"]
];
let playerChoice = "rock"; // プレイヤーの選択（例）
for (let i = 0; i < grid.length; i++) {
for (let j = 0; j < grid[i].length; j++) {
let opponentChoice = grid[i][j];
if (playerChoice === opponentChoice) {
console.log("マス[" + i + "][" + j + "]は" + opponentChoice + "で、引き分けです");
} else if (
(playerChoice === "rock" && opponentChoice === "scissors") ||
(playerChoice === "paper" && opponentChoice === "rock") ||
(playerChoice === "scissors" && opponentChoice === "paper")
) {
console.log("マス[" + i + "][" + j + "]は" + opponentChoice + "で、勝ちです");
} else {
console.log("マス[" + i + "][" + j + "]は" + opponentChoice + "で、負けです");
}
}
}このコードでは、3×3のマス目にランダムに設定されたじゃんけんの手に対して、プレイヤーの選択と比較して勝敗を判定します。ネストされたループと条件分岐を使用して、ゲームロジックをシンプルかつ効果的に実装しています。
これらの例を通じて、ネストされたループと条件分岐を使用することで、複雑な処理やロジックを効率的に実装する方法を理解できるでしょう。これにより、柔軟で高度なプログラムを作成することが可能になります。
ループの最適化
ループの最適化は、パフォーマンスを向上させるために非常に重要です。特に、大規模なデータセットや複雑な計算を扱う場合、ループの効率を改善することで、プログラムの実行速度を大幅に向上させることができます。ここでは、JavaScriptのループを最適化するためのいくつかのテクニックを紹介します。
不要な計算を避ける
ループ内で繰り返し実行される計算は、ループの外で一度だけ計算するようにしましょう。以下の例では、ループの長さを事前に計算して変数に保存することで、ループごとの計算を減らします。
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let length = numbers.length;
for (let i = 0; i < length; i++) {
console.log(numbers[i]);
}このようにすることで、numbers.lengthの計算がループごとに実行されるのを防ぎます。
ループの範囲を減らす
特定の条件を満たす場合にのみループを実行するようにすることで、ループの範囲を減らすことができます。以下の例では、必要な要素だけを処理するようにします。
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] % 2 === 0) {
console.log(numbers[i] + "は偶数です");
}
}このコードでは、偶数の要素だけを処理し、それ以外の要素はスキップします。
ループの種類を選ぶ
場合によっては、異なる種類のループを使用することでパフォーマンスを向上させることができます。例えば、forループよりもforEachメソッドを使用することで、コードの可読性と効率を高めることができます。
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
numbers.forEach(function(number) {
if (number % 2 === 0) {
console.log(number + "は偶数です");
}
});このコードでは、forEachメソッドを使用して配列の各要素を処理しています。
break文とcontinue文の活用
特定の条件が満たされた場合にループを終了するか、次の繰り返しにスキップすることで、不要な処理を避けることができます。
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] === 5) {
break; // ループを終了
}
if (numbers[i] % 2 !== 0) {
continue; // 奇数の場合は次の繰り返しにスキップ
}
console.log(numbers[i] + "は偶数です");
}このコードでは、5に達した時点でループを終了し、奇数の要素はスキップして偶数の要素だけを処理します。
メモリ効率を考慮する
ループ内で新しいオブジェクトや配列を頻繁に作成すると、メモリの消費が増加し、パフォーマンスが低下します。可能な限り、ループの外でオブジェクトや配列を作成し、再利用するようにしましょう。
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let results = [];
for (let i = 0; i < numbers.length; i++) {
results.push(numbers[i] * 2);
}
console.log(results);このコードでは、新しい配列resultsをループの外で作成し、ループ内で再利用しています。
これらの最適化テクニックを活用することで、JavaScriptのループのパフォーマンスを向上させることができます。これにより、効率的で高速なプログラムを作成することが可能になります。
エラーハンドリング
ループと条件分岐を使用する際には、エラーハンドリングが重要です。適切なエラーハンドリングを行うことで、予期しないエラーが発生した場合でもプログラムが安定して動作し、デバッグが容易になります。ここでは、ループと条件分岐におけるエラーハンドリングの方法を解説します。
try-catch文を使用したエラーハンドリング
try-catch文を使用することで、エラーが発生した際にプログラムがクラッシュするのを防ぎ、エラーメッセージを表示することができます。以下の例では、配列の各要素に対して数値を取得しようとする際に、エラーが発生した場合の処理を行います。
let data = [1, 2, "three", 4, 5];
for (let i = 0; i < data.length; i++) {
try {
let number = parseInt(data[i]);
if (isNaN(number)) {
throw new Error("数値ではありません: " + data[i]);
}
console.log(number * 2);
} catch (error) {
console.log("エラー: " + error.message);
}
}このコードでは、parseInt関数を使用して配列の各要素を数値に変換し、数値でない場合はエラーをスローします。エラーが発生した場合は、catchブロックでエラーメッセージを表示します。
エラーハンドリングの関数化
エラーハンドリングを関数として定義することで、コードの再利用性と可読性を向上させることができます。以下の例では、数値を二倍にする関数と、その関数を呼び出すループを示します。
function doubleNumber(value) {
try {
let number = parseInt(value);
if (isNaN(number)) {
throw new Error("数値ではありません: " + value);
}
return number * 2;
} catch (error) {
console.log("エラー: " + error.message);
return null;
}
}
let data = [1, 2, "three", 4, 5];
let results = [];
for (let i = 0; i < data.length; i++) {
let result = doubleNumber(data[i]);
if (result !== null) {
results.push(result);
}
}
console.log(results);このコードでは、doubleNumber関数を定義し、エラーハンドリングを関数内で行っています。ループ内でこの関数を呼び出し、エラーが発生しなかった場合のみ結果を配列に追加します。
ログを使用したデバッグ
エラーハンドリングとともに、ログを使用することでデバッグを容易にすることができます。以下の例では、エラーログと成功ログを記録します。
let data = [1, 2, "three", 4, 5];
let logs = {
errors: [],
successes: []
};
for (let i = 0; i < data.length; i++) {
try {
let number = parseInt(data[i]);
if (isNaN(number)) {
throw new Error("数値ではありません: " + data[i]);
}
logs.successes.push("成功: " + number * 2);
} catch (error) {
logs.errors.push("エラー: " + error.message);
}
}
console.log("成功ログ:", logs.successes);
console.log("エラーログ:", logs.errors);このコードでは、エラーと成功のログをそれぞれの配列に追加し、最終的にログの内容を表示します。これにより、エラーの発生箇所や成功した処理を簡単に確認することができます。
エラーの再スロー
特定の条件下でエラーを再スローすることで、エラーハンドリングをさらに強化することができます。以下の例では、特定の条件を満たした場合にエラーを再スローします。
function processNumber(value) {
try {
let number = parseInt(value);
if (isNaN(number)) {
throw new Error("数値ではありません: " + value);
}
if (number < 0) {
throw new Error("負の数です: " + number);
}
return number * 2;
} catch (error) {
if (error.message.includes("負の数")) {
console.log("重大なエラー: " + error.message);
throw error; // エラーを再スロー
} else {
console.log("エラー: " + error.message);
return null;
}
}
}
let data = [1, -2, "three", 4, -5];
let results = [];
for (let i = 0; i < data.length; i++) {
try {
let result = processNumber(data[i]);
if (result !== null) {
results.push(result);
}
} catch (error) {
console.log("ループ内でキャッチされたエラー: " + error.message);
}
}
console.log(results);このコードでは、processNumber関数内で負の数に対するエラーを再スローし、ループ内で再度キャッチしています。これにより、特定のエラーをより厳密に処理することができます。
これらのテクニックを使用して、ループと条件分岐におけるエラーハンドリングを効果的に行うことができます。エラーハンドリングを適切に実装することで、プログラムの信頼性とデバッグの効率が向上します。
実践的な応用例
ループと条件分岐を効果的に活用することで、実践的なアプリケーションを構築することができます。ここでは、実際のプロジェクトで役立ついくつかの応用例を紹介します。
ユーザー管理システム
ユーザーのデータを管理するシステムでは、ループと条件分岐を使用してユーザーの情報を効率的に処理できます。以下の例では、ユーザーリストから特定の条件に合致するユーザーを検索し、その情報を表示します。
let users = [
{ id: 1, name: "Alice", age: 25, role: "admin" },
{ id: 2, name: "Bob", age: 30, role: "user" },
{ id: 3, name: "Charlie", age: 35, role: "admin" },
{ id: 4, name: "Dave", age: 40, role: "user" }
];
let adminUsers = [];
for (let i = 0; i < users.length; i++) {
if (users[i].role === "admin") {
adminUsers.push(users[i]);
}
}
console.log("管理者ユーザー:", adminUsers);このコードでは、ユーザーリストからroleがadminのユーザーを検索し、その情報を配列に格納して表示します。
商品リストのフィルタリング
オンラインショップのシステムでは、商品リストを条件に基づいてフィルタリングすることがよくあります。以下の例では、商品の価格が特定の範囲内にある商品を表示します。
let products = [
{ id: 1, name: "Laptop", price: 1500 },
{ id: 2, name: "Smartphone", price: 800 },
{ id: 3, name: "Tablet", price: 600 },
{ id: 4, name: "Monitor", price: 300 }
];
let filteredProducts = [];
let minPrice = 500;
let maxPrice = 1000;
for (let i = 0; i < products.length; i++) {
if (products[i].price >= minPrice && products[i].price <= maxPrice) {
filteredProducts.push(products[i]);
}
}
console.log("フィルタされた商品:", filteredProducts);このコードでは、商品の価格がminPriceとmaxPriceの範囲内にある商品を検索し、その情報を配列に格納して表示します。
フォームの入力検証
ユーザーがフォームに入力したデータを検証するために、ループと条件分岐を使用することができます。以下の例では、複数のフォームフィールドの入力をチェックし、エラーメッセージを表示します。
let formData = {
username: "john_doe",
email: "john.doe@example.com",
password: "password123",
confirmPassword: "password123"
};
let errors = [];
if (formData.username === "") {
errors.push("ユーザー名が入力されていません");
}
if (!formData.email.includes("@")) {
errors.push("有効なメールアドレスを入力してください");
}
if (formData.password.length < 8) {
errors.push("パスワードは8文字以上で入力してください");
}
if (formData.password !== formData.confirmPassword) {
errors.push("パスワードが一致しません");
}
if (errors.length > 0) {
console.log("エラーメッセージ:", errors);
} else {
console.log("フォームの入力は有効です");
}このコードでは、フォームデータの各フィールドに対して条件分岐を使用して検証を行い、エラーメッセージを配列に格納します。エラーがある場合はメッセージを表示し、エラーがない場合はフォームの入力が有効であることを表示します。
チャートデータの生成
データを視覚化するために、ループと条件分岐を使用してチャートデータを生成することができます。以下の例では、売上データを月ごとに集計し、チャートデータを作成します。
let salesData = [
{ month: "January", amount: 1500 },
{ month: "February", amount: 2000 },
{ month: "March", amount: 2500 },
{ month: "April", amount: 3000 },
{ month: "May", amount: 3500 },
{ month: "June", amount: 4000 },
{ month: "July", amount: 4500 },
{ month: "August", amount: 5000 },
{ month: "September", amount: 5500 },
{ month: "October", amount: 6000 },
{ month: "November", amount: 6500 },
{ month: "December", amount: 7000 }
];
let chartData = {
labels: [],
datasets: [{
label: 'Monthly Sales',
data: []
}]
};
for (let i = 0; i < salesData.length; i++) {
chartData.labels.push(salesData[i].month);
chartData.datasets[0].data.push(salesData[i].amount);
}
console.log("チャートデータ:", chartData);このコードでは、売上データを月ごとに集計し、チャートに表示するためのデータ構造を作成します。chartDataオブジェクトにラベルとデータを追加し、最終的なチャートデータを表示します。
これらの実践的な応用例を通じて、ループと条件分岐の効果的な活用方法を理解し、実際のプロジェクトで役立てることができるでしょう。これにより、柔軟で効率的なプログラムを作成するスキルを身につけることができます。
演習問題
これまで学んだループと条件分岐の知識を実践するために、いくつかの演習問題を解いてみましょう。これらの問題を通じて、実際のコードを記述し、理解を深めることができます。
演習問題1: 奇数と偶数のカウント
与えられた数値の配列から奇数と偶数の数をカウントする関数を作成してください。
function countOddEven(numbers) {
let oddCount = 0;
let evenCount = 0;
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] % 2 === 0) {
evenCount++;
} else {
oddCount++;
}
}
return { oddCount, evenCount };
}
// テストデータ
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(countOddEven(numbers)); // { oddCount: 5, evenCount: 5 }演習問題2: フィボナッチ数列の生成
指定された長さのフィボナッチ数列を生成する関数を作成してください。
function generateFibonacci(n) {
let fibonacci = [0, 1];
for (let i = 2; i < n; i++) {
fibonacci.push(fibonacci[i - 1] + fibonacci[i - 2]);
}
return fibonacci;
}
// テストデータ
console.log(generateFibonacci(10)); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]演習問題3: 単語のカウント
与えられた文字列中の各単語の出現回数をカウントする関数を作成してください。単語はスペースで区切られています。
function countWords(sentence) {
let words = sentence.split(" ");
let wordCount = {};
for (let i = 0; i < words.length; i++) {
let word = words[i];
if (wordCount[word]) {
wordCount[word]++;
} else {
wordCount[word] = 1;
}
}
return wordCount;
}
// テストデータ
let sentence = "this is a test this is only a test";
console.log(countWords(sentence)); // { this: 2, is: 2, a: 2, test: 2, only: 1 }演習問題4: 2次元配列の転置
与えられた2次元配列を転置する関数を作成してください。転置とは、行と列を入れ替える操作です。
function transposeMatrix(matrix) {
let transposed = [];
for (let i = 0; i < matrix[0].length; i++) {
transposed[i] = [];
for (let j = 0; j < matrix.length; j++) {
transposed[i][j] = matrix[j][i];
}
}
return transposed;
}
// テストデータ
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
console.log(transposeMatrix(matrix));
// [
// [1, 4, 7],
// [2, 5, 8],
// [3, 6, 9]
// ]演習問題5: 数字を文字列に変換
0から999の範囲の数値を英語の文字列に変換する関数を作成してください。例えば、123は「one hundred twenty-three」となります。
function numberToWords(num) {
let ones = ["", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];
let teens = ["", "eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen"];
let tens = ["", "ten", "twenty", "thirty", "forty", "fifty", "sixty", "seventy", "eighty", "ninety"];
if (num === 0) return "zero";
if (num < 10) return ones[num];
if (num >= 11 && num < 20) return teens[num - 10];
if (num < 100) return tens[Math.floor(num / 10)] + (num % 10 !== 0 ? "-" + ones[num % 10] : "");
if (num < 1000) {
return ones[Math.floor(num / 100)] + " hundred" + (num % 100 !== 0 ? " " + numberToWords(num % 100) : "");
}
}
// テストデータ
console.log(numberToWords(123)); // "one hundred twenty-three"
console.log(numberToWords(45)); // "forty-five"
console.log(numberToWords(999)); // "nine hundred ninety-nine"これらの演習問題を通じて、ループと条件分岐の実践的な使用方法をさらに理解し、スキルを向上させることができます。各問題を解く際には、適切なエラーハンドリングや最適化も考慮してコードを記述してください。
まとめ
本記事では、JavaScriptのループと条件分岐の基本概念から応用例、最適化、エラーハンドリング、実践的な応用例、そして演習問題までを包括的に解説しました。ループと条件分岐を効果的に組み合わせることで、複雑なロジックを簡潔に実装することができ、プログラムの効率を大幅に向上させることが可能です。
ループの種類（for、while、do-while）や条件分岐の種類（if、else if、else、switch）を理解し、それらを実践的なシナリオで組み合わせる方法を学びました。また、ループの最適化やエラーハンドリングの重要性についても触れ、コードのパフォーマンスと信頼性を向上させるためのテクニックを紹介しました。
実践的な応用例では、ユーザー管理システム、商品リストのフィルタリング、フォームの入力検証、チャートデータの生成など、具体的なシナリオに基づいた実装例を提供しました。これにより、実際のプロジェクトでどのようにループと条件分岐を活用できるかを具体的にイメージできるようになったことでしょう。
最後に、演習問題を通じて、学んだ内容を実践し、理解を深める機会を提供しました。これらの問題を解くことで、ループと条件分岐のスキルをさらに強化することができます。
今後も、これらの知識を基に、より複雑なプログラムを効率的に構築し、JavaScriptの理解を深めていってください。
コメント