Skip to content

JavaScript の基本をマスターしよう(後編)

公開日:December 23, 2024更新日:December 23, 2024
📄

中編では、変数、データ型、演算子といった、プログラミングの基礎を学びました。後編では、条件分岐と繰り返し処理という、プログラムの流れを制御するための重要な構文について学びましょう。

6. 条件分岐で処理を変えてみよう

条件分岐とは、ある条件が成り立つかどうかによって、実行する処理を変えるための構文です。例えば、「もし雨が降っていたら、傘を持っていく」「もしテストの点数が80点以上なら、合格」といったように、条件によって行動を変えることは、日常生活でもよくありますよね。

JavaScriptでは、条件分岐をif文を使って書きます。

if

if文の基本的な構文は、以下のとおりです。

javascript
if (条件式) {
  // 条件式が true のときに実行される処理
}

条件式には、比較演算子や論理演算子を使った式が入ります。条件式の結果がtrueなら、{}の中の処理が実行され、falseなら、{}の中の処理はスキップされます。

例えば、以下のように書くと、変数scoreの値が80以上のときだけ、「合格!」とコンソールに表示されます。

javascript
let score = 90;

if (score >= 80) {
  console.log("合格!");
}

else

if文にelse文を組み合わせると、「条件式がtrueのときは、この処理、falseのときは、別の処理」というように、2つの処理を使い分けることができます。

javascript
if (条件式) {
  // 条件式が true のときに実行される処理
} else {
  // 条件式が false のときに実行される処理
}

例えば、以下のように書くと、変数scoreの値が80以上のときは「合格!」、80未満のときは「不合格…」と表示されます。

javascript
let score = 70;

if (score >= 80) {
  console.log("合格!");
} else {
  console.log("不合格…");
}

else if

さらに、else if文を使うと、3つ以上の条件を使い分けることができます。

javascript
if (条件式1) {
  // 条件式1が true のときに実行される処理
} else if (条件式2) {
  // 条件式1が false で、条件式2が true のときに実行される処理
} else {
  // どの条件式も false のときに実行される処理
}

例えば、以下のように書くと、変数scoreの値に応じて、「優」「良」「可」「不可」の4段階で評価を表示できます。

javascript
let score = 85;

if (score >= 90) {
  console.log("優");
} else if (score >= 80) {
  console.log("良");
} else if (score >= 60) {
  console.log("可");
} else {
  console.log("不可");
}

7. 繰り返し処理で効率化

繰り返し処理とは、同じ処理を何度も繰り返すための構文です。例えば、「1から10までの数字を順番に表示する」「配列の中身をすべて表示する」といったように、同じような処理を繰り返したい場合に便利です。

JavaScriptでは、繰り返し処理をfor文やwhile文を使って書きます。

for

for文の基本的な構文は、以下のとおりです。

javascript
for (初期化式; 条件式; 更新式) {
  // 繰り返し実行される処理
}
  • 初期化式: ループが始まる前に、1回だけ実行される式です。主に、ループカウンタ(ループの回数を数える変数)を初期化するために使われます。
  • 条件式: 各ループの最初に評価される式です。この式の結果がtrueの間は、ループが繰り返され、falseになるとループが終了します。
  • 更新式: 各ループの最後に実行される式です。主に、ループカウンタを更新するために使われます。

例えば、以下のように書くと、1から10までの数字が順番にコンソールに表示されます。

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

このコードでは、

  1. 最初にlet i = 1;で、ループカウンタi1に初期化します。
  2. 次にi <= 10;で、iが10以下かどうかを判定します。最初はtrueなので、{}の中の処理(console.log(i);)が実行されます。
  3. console.log(i);で、iの値(最初は1)が表示されます。
  4. i++;で、iの値が1増やされます(i2になります)。
  5. 再びi <= 10;の判定に戻り、trueなら処理を続行、falseならループを終了します。

この処理が、iが10になるまで繰り返されます。

while

while文の基本的な構文は、以下のとおりです。

javascript
while (条件式) {
  // 繰り返し実行される処理
}

while文では、条件式の結果がtrueの間、{}の中の処理が繰り返し実行されます。条件式の結果が最初からfalseの場合、{}の中の処理は一度も実行されません。

例えば、以下のように書くと、変数numの値が0より大きい間、numの値を表示して、1ずつ減らしていく処理が繰り返されます。

javascript
let num = 5;

while (num > 0) {
  console.log(num);
  num--;
}

ループを途中で抜ける break

break文を使うと、ループの途中で処理を中断して、ループを抜けることができます。例えば、以下のコードは、1から10までの数字を表示しますが、iが5になった時点でループを終了します。

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

次のループへスキップする continue

continue文を使うと、ループの途中で処理を中断して、次のループへスキップすることができます。例えば、以下のコードは、1から10までの数字を表示しますが、iが5のときは表示せずにスキップします。

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