読み込み中...

JavaScriptループ回数を完全マスター!5つの使い方と応用例

JavaScriptのループ回数取得方法を解説するイメージ JS
この記事は約4分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptのループ回数の取得方法を完全にマスターできるようになります。

使い方や注意点、カスタマイズ方法もサンプルコード付きで解説しているので、JavaScriptを触ったことがない初心者でも分かりやすい内容になっています。

●JavaScriptのループ回数とは

JavaScriptには、繰り返し処理を行うためのループ構文がいくつかあります。

下記に主なループ構文を紹介します。

○forループ

一定回数の繰り返し処理を行う場合に使用します。

○whileループ

ある条件が満たされている間、繰り返し処理を行います。

○do-whileループ

最低一回は処理を実行し、その後条件が満たされている間繰り返し処理を行います。

●ループ回数の取得方法

それぞれのループ構文でループ回数を取得する方法を、サンプルコード付きで解説します。

○サンプルコード1:forループ

// forループで10回繰り返す
for (let i = 1; i <= 10; i++) {
  console.log(i); // 現在のループ回数を表示
}

このコードでは、forループを使って10回繰り返し処理を行います。

iはループの回数を表し、1から始まり、10になるまで1ずつ増加します。

console.log(i);で現在のループ回数が表示されます。

○サンプルコード2:whileループ

// whileループで10回繰り返す
let count = 1;

while (count <= 10) {
  console.log(count); // 現在のループ回数を表示
  count++;
}

whileループを使った場合、countという変数を使ってループ回数を管理します。

countが10以下である間、ループが続けられます。

console.log(count);で現在のループ回数が表示されます。

○サンプルコード3:do-whileループ

// do-whileループで10回繰り返す
let loopCount = 1;

do {
  console.log(loopCount); // 現在のループ回数を表示
  loopCount++;
} while (loopCount <= 10);

do-whileループでは、最低1回は処理が実行されます。loopCountが10以下である間、ループが続けられます。

console.log(loopCount);で現在のループ回数が表示されます。

●応用例とサンプルコード

○サンプルコード4:配列の要素を順番に表示

// 配列の要素を順番に表示する
const fruits = ["apple", "banana", "cherry"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]); // 配列の要素を表示
}

このコードでは、fruitsという配列の要素を順番に表示します。

fruits.lengthは配列の要素数を取得しており、ループ回数として利用されます。

○サンプルコード5:条件に応じてループを抜ける

// 条件に応じてループを抜ける
for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break; // ループを抜ける
  }
  console.log(i); // 現在のループ回数を表示
}

このコードでは、iが5になった時点でbreakを使ってループを抜けます。

そのため、1から4までの数値が表示され、5以降は表示されません。

●注意点と対処法

○無限ループに注意

ループ処理を行う際には、ループ条件やループ内での変数の操作に注意し、意図しない無限ループを回避しましょう。

無限ループが発生すると、プログラムが停止せず、ブラウザが応答しなくなることがあります。

○配列の範囲外にアクセスしない

配列とループを組み合わせる際には、配列の範囲外にアクセスしないように注意しましょう。

範囲外にアクセスすると、エラーが発生したり、予期しない動作が起こる可能性があります。

まとめ

この記事では、JavaScriptでのループ回数の取得方法について、forループ、whileループ、およびdo-whileループを用いたサンプルコードとともに詳しく解説しました。

また、応用例や注意点についても触れました。

これらの知識を活用し、効率的なプログラムを作成していきましょう。