プログラミング

JavaScriptのif・for・whileを徹底解説！初心者向け入門ガイド

JavaScriptのif・for・whileを徹底解説！初心者向け入門ガイド

JavaScriptはWebサイトやアプリの開発に欠かせないプログラミング言語です。特に、プログラムの流れを制御するために使われる「条件分岐（if文）」や「ループ処理（for文・while文）」は、基本でありながら非常に重要な要素です。本記事では、初心者の方でも理解しやすいように、if文・for文・while文の使い方をわかりやすく解説します。

目次

JavaScriptの条件分岐とは？

プログラムを実行する際、「もし○○ならば△△する」というような条件を設定することを「条件分岐」といいます。JavaScriptでは、条件分岐を行うためにif文を使います。

if文の基本構文

if (条件) {
  // 条件が真（true）のときに実行する処理
}

例えば、「もし変数xが10以上なら、”xは10以上です”と表示する」プログラムは以下のようになります。

let x = 15;
if (x >= 10) {
  console.log("xは10以上です");
}

elseを使った条件分岐

if文の後にelseを追加すると、「条件が満たされなかった場合」の処理も書くことができます。

let x = 5;
if (x >= 10) {
  console.log("xは10以上です");
} else {
  console.log("xは10未満です");
}

else ifを使った複数条件の分岐

else ifを使うことで、複数の条件を設定することができます。

let score = 85;
if (score >= 90) {
  console.log("評価: A");
} else if (score >= 70) {
  console.log("評価: B");
} else {
  console.log("評価: C");
}

JavaScriptのループ処理とは？

ループ処理とは、「同じ処理を繰り返し実行する」ための構文です。プログラムで同じ処理を何度も記述するのは非効率なので、for文やwhile文を使って簡潔に書きます。

for文の基本構文

for文は、回数が決まっている繰り返し処理に適しています。

for (初期化; 条件; 更新) {
  // 繰り返し実行する処理
}

例えば、1から5までの数字を順番に表示するには、次のように書きます。

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

このプログラムの動作は次の通りです。

  1. iを1に初期化する。
  2. i <= 5の条件が満たされている場合、console.log(i)を実行。
  3. iを1増やして次のループへ。
  4. iが6になった時点で条件を満たさなくなるので、ループが終了。

while文の基本構文

while文は、特定の条件が満たされている間、繰り返し処理を実行します。

while (条件) {
  // 繰り返し実行する処理
}

例えば、iが5未満の間だけ数字を表示するには、次のように書きます。

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

do…while文の基本構文

do...while文は、最初に必ず1回処理を実行するという特徴があります。

do {
  // 繰り返し実行する処理
} while (条件);

例えば、iが5未満の間だけ数字を表示する場合、次のように書けます。

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

do...while文は、最初に1回は処理を実行するため、条件が最初からfalseの場合でも1回は必ず実行されるという点が特徴です。

まとめ

この記事では、JavaScriptのif文を使った条件分岐と、for文・while文を使ったループ処理について解説しました。

  • if文を使うことで、「もし○○ならば△△する」という条件を指定できる。
  • for文を使うと、指定回数だけループ処理ができる。
  • while文を使うと、条件を満たしている間ずっとループできる。
  • do...while文を使うと、最低1回は必ずループが実行される。

JavaScriptの条件分岐やループ処理を理解すると、プログラムの動きを自在に制御できるようになります。ぜひ実際にコードを書いて試してみてください！