はじめに
この実験では、学生たちは JavaScript のループ構造に深く突き入り、プログラミングロジックにとって基本的なさまざまな反復技術を探求します。この実験では、while ループ、do-while ループ、for ループ、for-in ループなどの必須ループの種類を扱い、実際のコーディング例と段階的な学習を通じて、各構造に対する実践的な経験を提供します。
参加者は、while ループの基本構文を理解することから始め、制御された反復を作成し、カウントや条件付き検索などのタスクを実行する方法を学びます。進歩するにつれて、彼らは異なるループ構造を実装する練習をし、それらの独自の特性と使用例を比較します。これは、ループを使ってデータを操作し、配列を反復処理し、JavaScript で動的なプログラミングソリューションを作成する方法について包括的な理解を深めるのに役立ちます。
While ループの構文と基本的な使い方を理解する
このステップでは、JavaScript における while ループの基本的な構文と使い方について学びます。while ループは、指定された条件が真の間、コードのブロックを繰り返すことができる基本的な制御構造です。
while ループを調べるために新しい JavaScript ファイルを作成しましょう。WebIDE を開き、~/projectディレクトリにwhileLoop.jsという名前のファイルを作成します。
// 1 から 5 までカウントするための単純な while ループを作成する
let count = 1;
while (count <= 5) {
console.log(`現在のカウント：${count}`);
count++;
}
次に、Node.js を使って JavaScript ファイルを実行して出力を見てみましょう。
node ~/project/whileLoop.js
出力例：
現在のカウント: 1
現在のカウント: 2
現在のカウント: 3
現在のカウント: 4
現在のカウント: 5
while ループの構文を解説しましょう。
let count = 1;は、ループの前にカウンタ変数を初期化します。while (count <= 5)は、ループを続けるために真でなければならない条件を定義します。console.log()は、countの現在の値を出力します。count++は、各反復でカウンタをインクリメントします。
次に、もう少し複雑な条件を持つ while ループを示すもっと実用的な例を作成しましょう。
// 3 と 5 の両方で割り切れる最初の数を見つけるための while ループを作成する
let number = 1;
while (!(number % 3 === 0 && number % 5 === 0)) {
number++;
}
console.log(`3 と 5 の両方で割り切れる最初の数：${number}`);
再度、ファイルを実行します。
node ~/project/whileLoop.js
出力例：
3と5の両方で割り切れる最初の数: 15
この例は、while ループが特定の条件を検索したり、反復処理を行うためにどのように使われるかを示しています。
増分反復処理を伴う Do-While ループを練習する
このステップでは、JavaScript の do-while ループについて学びます。これは while ループに似ていますが、重要な違いがあります。条件をチェックする前に、コードブロックが少なくとも 1 回実行されます。
WebIDE を使って~/projectディレクトリに新しいdoWhileLoop.jsファイルを作成します。
// ユーザー入力のシミュレーションで do-while ループを示す
let attempts = 0;
let secretNumber = 7;
let guess;
do {
// 1 から 10 の間のランダムな予想をシミュレートする
guess = Math.floor(Math.random() * 10) + 1;
attempts++;
console.log(`試行回数 ${attempts}: 予想値 ${guess}`);
if (guess === secretNumber) {
console.log(
`おめでとうございます！あなたは${attempts}回の試行で数字を当てました。`
);
}
} while (guess !== secretNumber);
do-while ループがどのように機能するかを見るために JavaScript ファイルを実行します。
node ~/project/doWhileLoop.js
出力例：
試行回数1: 予想値3
試行回数2: 予想値9
試行回数3: 予想値7
おめでとうございます！あなたは3回の試行で数字を当てました。
do-while ループの主な特徴：
- 条件をチェックする前に、コードブロックが少なくとも 1 回実行されます。
- 各反復の終わりで条件がチェックされます。
- コードが少なくとも 1 回実行されることを確認したい場合に便利です。
do-while ループをさらに明確に説明するためにもう 1 つの例を作成しましょう。
// do-while ループを使ったインクリメンタルな反復処理を示す
let total = 0;
let i = 1;
do {
total += i;
console.log(`現在の合計：${total}, 現在の数字：${i}`);
i++;
} while (total < 10);
console.log(`最終合計：${total}`);
再度、ファイルを実行します。
node ~/project/doWhileLoop.js
出力例：
現在の合計: 1, 現在の数字: 1
現在の合計: 3, 現在の数字: 2
現在の合計: 6, 現在の数字: 3
現在の合計: 10, 現在の数字: 4
最終合計: 10
この例は、do-while ループがインクリメンタルな反復処理にどのように使われるかを示しており、終了条件をチェックする前にコードブロックが少なくとも 1 回実行されることを確認しています。
制御された反復処理のための For ループを実装する
このステップでは、JavaScript の for ループについて学びます。これは、明確な開始、終了、および増分/減分メカニズムを備えた制御された反復処理を行うための簡潔な方法を提供します。
WebIDE を使って~/projectディレクトリに新しいforLoop.jsファイルを作成します。
// 1 から 5 までの数字を表示する基本的な for ループ
console.log("基本的なカウントループ：");
for (let i = 1; i <= 5; i++) {
console.log(`現在の数字：${i}`);
}
// 数値の階乗を計算する for ループ
console.log("\n階乗の計算：");
let number = 5;
let factorial = 1;
for (let j = 1; j <= number; j++) {
factorial *= j;
}
console.log(`${number}の階乗は：${factorial}`);
// 配列を反復処理する for ループ
console.log("\n配列の反復処理：");
let fruits = ["apple", "banana", "cherry", "date"];
for (let k = 0; k < fruits.length; k++) {
console.log(`インデックス${k}の果物：${fruits[k]}`);
}
JavaScript ファイルを実行して、さまざまな for ループの例を見てみましょう。
node ~/project/forLoop.js
出力例：
基本的なカウントループ:
現在の数字: 1
現在の数字: 2
現在の数字: 3
現在の数字: 4
現在の数字: 5
階乗の計算:
5の階乗は: 120
配列の反復処理:
インデックス0の果物: apple
インデックス1の果物: banana
インデックス2の果物: cherry
インデックス3の果物: date
for ループの構文を解説しましょう。
for (初期化; 条件; 増分/減分)が標準構造です。let i = 1はループカウンタを初期化します。i <= 5は継続条件を定義します。i++は各反復の後でカウンタをインクリメントします。
もっと複雑な for ループの使い方を示す別の例を作成しましょう。
// 掛け算表を作成するためのネストされた for ループ
console.log("掛け算表：");
for (let row = 1; row <= 5; row++) {
let rowOutput = "";
for (let col = 1; col <= 5; col++) {
rowOutput += `${row * col}\t`;
}
console.log(rowOutput);
}
再度、ファイルを実行します。
node ~/project/forLoop.js
出力例：
掛け算表:
1 2 3 4 5
2 4 6 8 10
3 6 9 12 15
4 8 12 16 20
5 10 15 20 25
この例は、ネストされた for ループがより複雑な反復パターンを作成するためにどのように使われるかを示しています。
配列要素を反復処理するために For-In ループを使用する
このステップでは、JavaScript の for-in ループについて学びます。これは、オブジェクトのプロパティや配列の要素を反復処理するための簡単な方法を提供します。
WebIDE を使って~/projectディレクトリに新しいforInLoop.jsファイルを作成します。
// for-in ループを使って配列を反復処理する
let fruits = ["apple", "banana", "cherry", "date"];
console.log("配列のインデックスを反復処理する：");
for (let index in fruits) {
console.log(`インデックス：${index}, 果物：${fruits[index]}`);
}
// for-in ループを使ってオブジェクトを反復処理する
let student = {
name: "John Doe",
age: 22,
major: "Computer Science",
gpa: 3.8
};
console.log("\nオブジェクトのプロパティを反復処理する：");
for (let property in student) {
console.log(`${property}: ${student[property]}`);
}
// 実用的な例：商品の合計価格を計算する
let shoppingCart = [
{ name: "Laptop", price: 1000 },
{ name: "Headphones", price: 100 },
{ name: "Mouse", price: 50 }
];
console.log("\n合計価格を計算する：");
let totalPrice = 0;
for (let index in shoppingCart) {
totalPrice += shoppingCart[index].price;
}
console.log(`合計価格：$${totalPrice}`);
JavaScript ファイルを実行して、for-in ループの動作を確認します。
node ~/project/forInLoop.js
出力例：
配列のインデックスを反復処理する:
インデックス: 0, 果物: apple
インデックス: 1, 果物: banana
インデックス: 2, 果物: cherry
インデックス: 3, 果物: date
オブジェクトのプロパティを反復処理する:
name: John Doe
age: 22
major: Computer Science
gpa: 3.8
合計価格を計算する:
合計価格: $1150
for-in ループに関する重要なポイント：
- 配列とオブジェクトの両方で機能します。
- 配列の場合はインデックスを、オブジェクトの場合はプロパティを反復処理します。
- 従来のインデックスベースのループを使わずに要素にアクセスするための簡単な方法を提供します。
- 配列で使用する場合、すべての列挙可能なプロパティを反復処理するため、注意が必要です。
その柔軟性を示す別の例を見てみましょう。
// for-in ループを使ってデータをフィルタリングして変換する
let grades = {
math: 85,
science: 92,
english: 78,
history: 88
};
console.log("80 点以上の成績をフィルタリングする：");
for (let subject in grades) {
if (grades[subject] > 80) {
console.log(`${subject}: ${grades[subject]}`);
}
}
再度、ファイルを実行します。
node ~/project/forInLoop.js
出力例：
80点以上の成績をフィルタリングする:
math: 85
science: 92
history: 88
さまざまなループ構造を比較・対照する
このステップでは、JavaScript におけるさまざまなループ構造の違いを調べ、それぞれの種類のループを効果的に使う時機を学びます。
WebIDE を使って~/projectディレクトリに新しいloopComparison.jsファイルを作成します。
// 同じタスクに対するさまざまなループ構造を示す
// 1. While ループ：反復回数が未知の場合に最適
console.log("While ループの例：");
let whileCounter = 1;
while (whileCounter <= 5) {
console.log(`While ループ：${whileCounter}`);
whileCounter++;
}
// 2. Do-While ループ：少なくとも 1 回の実行を保証
console.log("\nDo-While ループの例：");
let doWhileCounter = 1;
do {
console.log(`Do-While ループ：${doWhileCounter}`);
doWhileCounter++;
} while (doWhileCounter <= 5);
// 3. For ループ：反復回数が既知の場合に最適
console.log("\nFor ループの例：");
for (let forCounter = 1; forCounter <= 5; forCounter++) {
console.log(`For ループ：${forCounter}`);
}
// 4. For-In ループ：オブジェクトのプロパティを反復処理する
console.log("\nFor-In ループの例：");
let student = {
name: "John Doe",
age: 22,
major: "Computer Science"
};
for (let property in student) {
console.log(`${property}: ${student[property]}`);
}
// 5. ループのパフォーマンスを比較する
console.log("\nループのパフォーマンス比較：");
const iterations = 1000000;
console.time("While ループ");
let a = 0;
while (a < iterations) {
a++;
}
console.timeEnd("While ループ");
console.time("For ループ");
for (let b = 0; b < iterations; b++) {}
console.timeEnd("For ループ");
JavaScript ファイルを実行して比較を見てみましょう。
node ~/project/loopComparison.js
出力例：
Whileループの例:
Whileループ: 1
Whileループ: 2
Whileループ: 3
Whileループ: 4
Whileループ: 5
Do-Whileループの例:
Do-Whileループ: 1
Do-Whileループ: 2
Do-Whileループ: 3
Do-Whileループ: 4
Do-Whileループ: 5
Forループの例:
Forループ: 1
Forループ: 2
Forループ: 3
Forループ: 4
Forループ: 5
For-Inループの例:
name: John Doe
age: 22
major: Computer Science
ループのパフォーマンス比較:
Whileループ: 2.345ms
Forループ: 1.876ms
主な違い：
While ループ：
- 反復回数が未知の場合に使用する
- 各反復の前に条件をチェックする
- 条件が最初から偽の場合、実行されない場合がある
Do-While ループ：
- 少なくとも 1 回の実行を保証する
- 各反復の後に条件をチェックする
- コードを少なくとも 1 回実行したい場合に便利
For ループ：
- 反復回数が既知の場合に最適
- 初期化、条件、インクリメントを備えたコンパクトな構文
- 最も一般的に配列の反復処理やカウントに使用
For-In ループ：
- 特にオブジェクトのプロパティを反復処理するためのもの
- オブジェクトと配列の両方で動作する
- インデックスまたはプロパティ名を提供する
適切なループを選ぶ方法を示す最後の例を作成しましょう。
// さまざまなシナリオに対して適切なループを選ぶ
let numbers = [10, 20, 30, 40, 50];
// 条件付き検索のための While ループ
console.log("\n適切なループを選ぶ：");
let searchValue = 30;
let index = 0;
while (index < numbers.length && numbers[index] !== searchValue) {
index++;
}
console.log(`見つけた ${searchValue} のインデックス：${index}`);
// 単純な反復処理のための For ループ
console.log("二乗した数値：");
for (let i = 0; i < numbers.length; i++) {
console.log(`${numbers[i]} の二乗：${numbers[i] * numbers[i]}`);
}
再度、ファイルを実行します。
node ~/project/loopComparison.js
出力例：
適切なループを選ぶ:
見つけた30のインデックス: 2
二乗した数値:
10の二乗: 100
20の二乗: 400
30の二乗: 900
40の二乗: 1600
50の二乗: 2500
まとめ
この実験では、参加者は JavaScript におけるさまざまなループ構造を探り、異なる種類のループの理解と実装に焦点を当てました。この実験は、while ループの包括的な検討から始まり、反復回数を数え、特定の数値条件を検索する例を通じて、その基本的な構文と実用的な応用を示しました。参加者は、ループ変数を初期化し、ループ条件を定義し、ループの実行を制御するためにインクリメント演算子を使用する方法を学びました。
この実験は、do-while ループ、for ループ、for-in ループなどの追加のループタイプをカバーするように進み、各構造に対する実践的な経験を提供しました。これらのループメカニズムを比較・対照することで、学習者はさまざまなプログラミングシナリオに適切なループ構造を選択する方法を理解し、JavaScript のプログラミングスキルと制御フローメカニズムの理解を深めました。
