初心者のための JavaScript ループ: 基本を学ぶ

憂鬱な月曜日、あなたは仕事をしています。月曜日がどんなに憂鬱になるかは、誰もが知っていますよね。上司があなたのところにやって来て、「週末に受け取った未開封のメールが 300 通あります。1 通ずつ開封して、送信者の名前を書き留め、終わったらメールを削除してください」と言います。

この作業を手作業でやろうとすると、とても面倒に思えます。次に思い浮かぶのは、おそらく Google でこのプロセスを自動化して作業を楽にしてくれるソフトウェアを探すことではないでしょうか。

プログラミングでも同じような状況があります。タスクが完了するまで繰り返し実行する必要がある場合があります。この問題をどのように解決しますか? JavaScript には、ループと呼ばれるものがあります。ループを使用すると、タスクを完了するために必要なコードの量を減らすことで、繰り返しタスクを解決できます。

この記事では、ループとは何か、どのように機能するか、そしてプログラムでループを適用するために使用できるさまざまな方法について説明します。

ループとは何ですか?

ループは、JavaScript で繰り返しアクションを簡単に実行するために使用されます。ループは、true または false を返す条件に基づいています。

条件は、ループを実行し続けるために渡す必要がある式です。指定された条件が true 値を返すとループが実行され、false 値を返すと停止します。

ループはいつ使用する必要がありますか?

ループは、繰り返しのタスクを実行する場合に便利です。たとえば、ループを使用すると、問題を解決するために必要なコードが短縮されます。これにより、時間が節約され、メモリ使用量が最適化され、柔軟性が向上します。

ループの真の重要性は、コードの長さを短縮し、繰り返しを制限することだけではありません。配列、オブジェクト、またはその他の構造内のデータを扱うときにも役立ちます。さらに、ループはコードの繰り返しを減らし、コードの再利用性を高めることでコードのモジュール性を促進し、プロジェクトのさまざまな部分で使用できるコードの作成を可能にします。

ループの種類

ループには、エントリ制御ループと終了制御ループの 2 つの主要なカテゴリがあります。

エントリ制御ループは、ループ本体を実行する前に、「ループの入り口」で条件を評価します。条件が真であれば、本体が実行されます。そうでない場合、本体は実行されません。for forとwhileループは、エントリ制御ループの例です。

終了制御ループは、テスト条件よりもループ本体に重点を置き、テスト条件を評価する前にループ本体が少なくとも 1 回実行されるようにします。終了制御ループの良い例はdo-whileループです。

エントリ制御ループの例をいくつか見てみましょう。

whileループ

whileループの構文は次のとおりです。

 while (condition) { // loop's body }

次のリストは while ループの機能について説明しています。

1. whileループは括弧内にテスト条件を指定します。

   
   

2. プログラムは条件をチェックして、合格か不合格かを確認します。

   
   

3. ループ本体内のコードは、条件が満たされている限り実行されます。

   
   

4. テスト条件が満たされないと、プログラムは動作を終了します。

以下に、 whileループの実際の例を示します。

 let arr = []; let i = 1; let number = 5; while (i <= number) { arr.push(i) i++ } console.log(arr)

1. 上記のコード スニペットは、「arr」、「i」、および「num」変数を初期化します。

   
   

2. 「 arr 」変数は、テスト条件に合格した値を保持する配列です。

   
   

3. 「i」変数は、各反復後の各増分を追跡します。

   
   

4. 「number」変数は、各反復の後に「i」の値とその値（5）を比較します。

   
   

5. ループ本体内のコードは、「i」が「number」以下である限り、各反復の後に「i」の各値を配列にプッシュします。

   
   

6. 「i」の現在の値が条件を満たさなくなると、この場合は「i」の値が「数値」の 6 より大きいため、ループの実行が停止します。

   
   

push()メソッドは、配列の末尾に新しい項目を追加する組み込みの JavaScript 関数です。

出力

[1, 2, 3, 4, 5]

do-while ループ

do-whileループは while ループによく似ています。while whileとdo-whileループの主な違いは、 do-whileループではループの条件を評価する前に少なくとも 1 回はコードが実行されることです。do do-whileループの構文は次のとおりです。

 do { // loop's body } while (//condition)

do-while終了制御ループの優れた例です。終了制御ループは、テスト条件よりもループ本体を優先するという事実にあります。では、 do-whileループを使用した実際のコード例を詳しく見ていきましょう。

例：

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

さて、このコード スニペットを分解してみましょう。

1. 「i」変数と「num」変数を初期化しました。

   
   

2. コンソールは、ループの条件を評価する前に、「i」（1）の値をログに記録します。

   
   

3. 条件がチェックされ、各反復後に「i」の値が +1 ずつ増加します。

   
   

4. 「i」が「num」より大きくなると、ループは終了します。

   
   

出力

1 2 3 4 5

do-whileループはwhileループと非常によく似ていますが、注意すべき微妙な違いがあります。while whileとdo-whileループの違いを比較する別の例を見てみましょう。

 let i = 5; let num = 4 while( i < num) { console.log(i) }

上記のwhileループはコンソールに結果を返しません。なぜでしょうか?

1. 「i」変数と「num」変数をそれぞれ 5 と 4 の値で初期化しました。

   
   

2. 条件は、「i」の値が「num」より小さいかどうかをチェックします。

   
   

3. true の場合、それぞれの値がログに記録されます。

   
   

4. 「i」の初期値が「num」の初期値を超えているため、ループは実行されません。

   
   

ここで、 do-whileループを使った同様の例を見てみましょう。

 let i = 5; let num = 4; do { console.log(i) } while ( i < num)

出力

5

do-whileループはコード ブロックの実行を保証し、コンソールに 5 を返します。最初は「i」の値が「num」よりも大きいのですが、それでもコンソールに 1 回記録されます。この表現は、 do-whileループとwhileループの機能の違いを示しています。

Forループ

for loopはユニークなタイプのループであり、プログラマーが最もよく使用するループの 1 つです。for for loop 、条件に応じてコード ブロックを特定の回数実行するループです。for ループの構文は次のとおりです。

 for (Expression1...; Expression2....; Expression3...{    //code block }

式 1: for loopのこの部分は初期化領域とも呼ばれ、 for loopの始まりであり、カウンター変数が定義される領域です。カウンター変数は、ループの実行回数を追跡し、それを値として保存するために使用されます。

式 2: これはループの 2 番目の部分です。この部分は、ループを実行する条件文を定義します。

式 3: ここでループが終了します。このセクションのカウンター変数は、条件で指定された値を増やすか減らすことによって、各反復後に値を更新します。

for ループを使用した例を見てみましょう。

 for (let i = 0; i < 100; i++) {  console.log("Hello World" ) }

上記のコード スニペットを一緒に分解してみましょう。

1. まず、カウンター変数「 i 」を値 0 で初期化します。

   
   

2. 次に、コードを実行し続けるための条件文を作成しました。

   
   

3. 「i」の値を 100 と比較しました。このテストに合格すると、「Hello World」がログに記録されます。

   
   

4. このプロセスは繰り返され、各反復の後にカウンターが +1 ずつ増加します。

   
   

5. カウンターの値が 100 に達するとループは終了します。

   
   

出力

Hello World Hello World Hello World ... //repeated 97 more times making it 100 "Hello World" in total ...

for-each ループ

for-eachループは、配列内を移動し、その配列内の各要素にコールバック関数を適用する JavaScript のメソッドです。コールバック関数は、単に関数にパラメータとして渡される別の関数です。コールバック関数は、メイン関数の実行が完了した後に順番に実行されます。

for-eachループの基本的な構文を調べてみましょう。

 array.forEach(function(currentValue, index, arr))

上記のコードは、 for-eachループの動作を説明しています。

• このループは、現在の値、インデックス、配列の 3 つのパラメータを受け入れます。

• 現在の値は、配列内の要素の現在の値を表します。

• インデックスは、その配列内の現在の要素の番号位置を示すオプションのパラメーターです。

• arr は、要素がどの配列に属しているかを示す別のオプション パラメーターです。

  
  

 let myArray = [1, 2, 3, 4, 5]; array.forEach((num, index, arr) => { arr[index] = num * 2; console.log(array); });

上記の例を詳しく見てみましょう。

1. 変数名「myArray」で配列を初期化し、1 から 5 までの整数を格納しました。

   
   

2. for-each配列メソッドは 3 つのパラメータを受け取り、配列にコールバック関数を適用します。

   
   

3. この行; arr[index] = num * 2現在の要素の値を 2 倍にして、返された値を現在の要素のインデックスに割り当てます。

   
   

注意: for-each配列メソッドは新しい配列を返すのではなく、元の配列を変更して返します。

出力

[2, 4, 6, 8, 10]

JavaScript の For...In ループと For...of ループとは何ですか?

for... inとfor... ofループは、反復可能なオブジェクトを反復処理する場合に非常に便利です。反復可能なオブジェクトとは、ループ処理が可能な任意の要素を指します。反復可能なオブジェクトの一般的な例としては、配列、文字列、セットなどがあります。

for... inとfor... ofオブジェクトを反復/移動する方法の点では似ていますが、それらの主な違いは値を返す方法にあります。

for... ループ内

for... inループは、オブジェクトからキー/プロパティを抽出し、親オブジェクトから対応するプロパティを抽出する必要がある場合に便利です。 for... inループは、特定のオブジェクトで定義された方法とは異なる方法でオブジェクトを反復処理する場合があります。 for... inループの動作例を見てみましょう。

 let namesArray = []; const studentScores = { John: 60, Dan: 53, Tricia: 73, Jamal: 45, Jane: 52 } for(const name in studentScores){ namesArray.push(name); } console.log(namesArray);

上記の例では、複数の生徒の名前とそれに対応するスコアを含むstudentScoresというオブジェクトを定義しました。 for... inを使用することで、オブジェクトstudentScoresのキーを表す生徒の名前のみを取得し、 push()メソッドを使用して配列に格納することができました。

出力

["John", "Dan", "Tricia", "Jamal", "Jane"]

ループの...

for... ofループは、配列、文字列、マップなどの反復可能なオブジェクトの値を反復する特殊なタイプのループです。for for... ofループはオブジェクトのキーやプロパティには関係せず、値の優先順位のみを示します。

for... ofループは通常のオブジェクトを反復処理することができず、反復可能ではないためエラーをスローします。for for.. ofループを使用する例を見てみましょう。

 let numArray = [1,2,3,4,5] for (const value of numArray) {   console.log(value) } // Output = 1,2,3,4,5

要約すると、 for... inとfor... ofループは反復可能なオブジェクトをループするのに最適な方法です。主な違いは、 for... inループはオブジェクトのキーを返すのに対し、 for... ofループは反復可能なオブジェクトの値のみを返すことです。

無限ループとは何か、そしてどうすればそれを回避できるか?

無限ループとは、ループが無期限に実行され続けることを意味します。これは、ループに終了条件が定義されていない場合に発生します。無限ループは、ブラウザをクラッシュさせたり、プログラムで望ましくないアクションを引き起こしたりする可能性があるため、危険です。

 // infinite loop sample while (true) { console.log("keep on running") }

プログラム内で無限ループが発生しないようにするには、ループ内に終了条件が定義されていることを常に確認してください。

結論

この記事を最後まで読んでいただき、ありがとうございます。JavaScript のループは、優れた最適化可能なプログラムを作成する上で非常に価値があるため、すべての開発者が習得する必要がある重要な概念です。この記事を読めば、プログラムでループを使用する基本と複雑さを理解できると思います。