Java Scriptの基本その9　Loopについて

イントロダクション

JavaScriptでのループの使い方を紹介します。forループは、特定の回数繰り返したい時に便利です。例えば、10回のベンチプレスを数えるのに使えます。配列を使って名前や年齢を処理する例もあります。whileループは、条件が満たされるまで繰り返す時に使います。例えば、サイコロを振って6が出るまで繰り返すことができます。continueやbreakを使ってループの流れをコントロールすることも重要です。これで、効率的なデータ処理が可能になります。

forループの基本

まず、JavaScriptでのforループについて説明します。以下のコードは、forループを使って特定の処理を10回繰り返す例です。

for (let rep = 1; rep <= 10; rep++) {
  console.log(`ベンチプレスを${rep}回できたぞ！🏋️`);
}

forループは3つの部分から構成されます。初期化部分（let rep = 1）、条件部分（rep <= 10）、そして更新部分（rep++）です。このループでは、repが1から10までの間、console.logでメッセージを表示します。初期化部分でrepを1に設定し、条件部分でrepが10以下である間ループを続け、更新部分でrepを1ずつ増やします。

配列とループの組み合わせ

次に、配列とforループを組み合わせた例を見てみましょう。

const americanNames = [
  "James",
  "Emma",
  "William",
  "Olivia",
  "Liam",
  "Ava",
  "Noah",
  "Isabella",
  "Mason",
  "Sophia",
];

const type_americanNames = [];

for (let i = 0; i < americanNames.length; i++) {
  console.log(americanNames[i], typeof americanNames[i]);
  type_americanNames.push(typeof americanNames[i]);
}

console.log(americanNames);
console.log(type_americanNames);

ここでは、americanNamesという配列の各要素の型を確認し、その結果をtype_americanNamesという別の配列に格納しています。forループを使って配列の全ての要素にアクセスし、console.logで各要素とその型を表示しています。さらに、typeof演算子を使って各要素の型を取得し、type_americanNamesに追加しています。

配列の要素を使った計算

次に、配列の要素を使って計算を行う例を見てみましょう。

const birthYears = [1996, 2000, 1982, 1980, 1991, 1996, 1998, 1999, 1981, 1995];
const calcAge = [];
const currentYear = 2024;

for (let i = 0; i < birthYears.length; i++) {
  calcAge.push(currentYear - birthYears[i]);
}

console.log(birthYears);
console.log(calcAge);

このコードでは、birthYearsという配列に格納された生年を使って年齢を計算し、その結果をcalcAgeという配列に格納しています。forループを使って各生年に対して現在の年（currentYear）との差を計算し、その結果をcalcAgeに追加しています。

continueとbreakの使い方

forループの中でcontinueとbreakを使う方法を見てみましょう。

const mixedData = [
  50,
  "Mason",
  25,
  "Emma",
  18,
  "William",
  24,
  "Olivia",
  18,
  "Ava",
  19,
];

// Continueの活用
for (let i = 0; i < mixedData.length; i++) {
  if (typeof mixedData[i] !== "string") continue;
  console.log(mixedData[i], typeof mixedData[i]);
}

// Breakの活用
for (let i = 0; i < mixedData.length; i++) {
  if (typeof mixedData[i] === "number") break;
  console.log(mixedData[i], typeof mixedData[i]);
}

continueは、ループの現在の反復をスキップし、次の反復に進みます。この例では、mixedDataの要素が文字列でない場合に次の反復にスキップします。一方、breakはループ全体を終了します。この例では、mixedDataの要素が数値である場合にループを終了します。

whileループの基本

最後に、whileループについて説明します。

let rep = 1;
while (rep <= 10) {
  console.log(`ベンチプレスを${rep}回できたぞ！🏋️`);
  rep++;
}

let dice = Math.trunc(Math.random() * 6) + 1;

while (dice !== 6) {
  console.log(`振ったサイコロの目は${dice}`);
  dice = Math.trunc(Math.random() * 6) + 1;
  if (dice === 6) console.log(`${dice}が出たので終了`);
}

whileループは、指定された条件がtrueである間、繰り返し処理を実行します。最初の例では、repが10以下である間、メッセージを表示し、repを1ずつ増やします。2つ目の例では、サイコロの目が6になるまでループを続け、6が出たら終了します。

まとめ

このように、JavaScriptのループ構文を使うことで、繰り返し処理を効率的に行うことができます。forループ、whileループ、continueやbreakを活用して、複雑なデータ操作も簡単に実現できます。これらのテクニックをマスターすると、より柔軟で強力なプログラムを作成できるようになります。

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！