• Home
  • Web制作
  • JavaScriptのループを使いこなす！for、while、for...in、for...ofを徹底解説

JavaScriptのループを使いこなす！for、while、for...in、for...ofを徹底解説

schedule
Tags: JavaScript

JavaScriptのループを使いこなす！for、while、for…in、for…ofを徹底解説

JavaScriptを扱う上で、ループ処理は避けては通れない重要な概念です。同じ処理を繰り返し実行したい場合、ループ処理を使うことで効率的にコードを書くことができます。

本記事では、JavaScriptで利用できる代表的なループ構文であるfor、while、for...in、for...ofについて、それぞれの違いや使い分け、具体的な使用例を交えながら詳しく解説していきます。

1. 繰り返し処理の基礎: for ループ

forループは、JavaScriptで最もよく使われるループ構文の一つです。指定した条件が満たされる限り、処理を繰り返し実行することができます。

1-1. for ループの基本構造

forループは、以下のように記述します。

for (初期化式; 条件式; 更新式) {
  // 繰り返し実行したい処理
}
  • 初期化式: ループが始まる前に一度だけ実行される式です。ループカウンタ変数の初期化によく用いられます。
  • 条件式: ループが繰り返される条件を指定する式です。この条件がtrueである限り、ループ内の処理が実行されます。
  • 更新式: ループ処理が一回実行されるごとに実行される式です。ループカウンタ変数の値の更新などに用いられます。

1-2. for ループの使用例

例えば、1から10までの数字をコンソールに表示するプログラムは、以下のように書くことができます。

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

このプログラムでは、まず変数iが1で初期化されます。次に、i <= 10という条件式が評価され、trueなのでconsole.log(i)が実行され、1がコンソールに表示されます。その後、更新式i++によりiの値が2になり、再び条件式の評価が行われます。このようにして、iの値が11になるまで処理が繰り返されます。

2. 条件が満たされるまで繰り返す: while ループ

whileループは、指定した条件式がtrueである限り、処理を繰り返し実行します。forループとは異なり、ループカウンタの管理などは開発者が明示的に行う必要があります。

2-1. while ループの基本構造

whileループは、以下のように記述します。

while (条件式) {
  // 繰り返し実行したい処理
}
  • 条件式: ループが繰り返される条件を指定する式です。この条件がtrueである限り、ループ内の処理が実行されます。

2-2. while ループの使用例

例えば、ユーザーが入力した値が"終了"という文字列になるまで入力を促すプログラムは、以下のように書くことができます。

let input = "";
while (input !== "終了") {
  input = prompt("文字列を入力してください。終了するには「終了」と入力してください。");
  console.log("入力値: " + input);
}

このプログラムでは、まず変数inputを空文字列で初期化します。次に、input !== "終了"という条件式が評価され、trueなのでprompt関数でユーザーに入力を促します。入力された値はinput変数に代入され、コンソールに表示されます。その後、再び条件式の評価が行われ、input変数の値が"終了"になるまで処理が繰り返されます。

3. オブジェクトのプロパティを列挙: for…in ループ

for...inループは、オブジェクトのプロパティ名を順番に取得し、ループ処理を実行するために使用します。

3-1. for…in ループの基本構造

for...inループは、以下のように記述します。

for (let 変数名 in オブジェクト名) {
  // 繰り返し実行したい処理
}
  • 変数名: オブジェクトのプロパティ名を格納する変数です。
  • オブジェクト名: プロパティを列挙する対象のオブジェクトです。

3-2. for…in ループの使用例

例えば、以下のオブジェクトのキーと値をそれぞれ表示するプログラムは、for...inループを用いて以下のように記述できます。

const user = {
  name: "太郎",
  age: 30,
  city: "東京"
};

for (let key in user) {
  console.log("キー: " + key + ", 値: " + user[key]);
}

このプログラムでは、userオブジェクトの各プロパティに対して、キーと値が順番にコンソールに表示されます。

4. 反復可能なオブジェクトの要素を順番に取得: for…of ループ

for...ofループは、配列や文字列などの反復可能なオブジェクトの要素を順番に取得し、ループ処理を実行するために使用します。

4-1. for…of ループの基本構造

for...ofループは、以下のように記述します。

for (let 変数名 of 反復可能なオブジェクト) {
  // 繰り返し実行したい処理
}
  • 変数名: 反復可能なオブジェクトの各要素を格納する変数です。
  • 反復可能なオブジェクト: 要素を順番に取得する対象のオブジェクトです。

4-2. for…of ループの使用例

例えば、配列の要素を順番に表示するプログラムは、for...ofループを用いて以下のように記述できます。

const numbers = [1, 2, 3, 4, 5];

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

このプログラムでは、numbers配列の各要素が順番にコンソールに表示されます。

まとめ: 各ループ構文の使い分け

本記事では、JavaScriptの代表的なループ構文であるfor、while、for...in、for...ofについて解説しました。それぞれのループ構文の特徴を理解し、状況に応じて適切なものを使い分けることが重要です。

  • 特定回数繰り返す: forループ
  • 条件が満たされるまで繰り返す: whileループ
  • オブジェクトのプロパティを列挙: for...inループ
  • 反復可能なオブジェクトの要素を順番に取得: for...ofループ

これらのループ構文をマスターすることで、より効率的で可読性の高いJavaScriptコードを書くことができるようになります。

関連記事