【ECMAScript編】第3回:プログラムの流れを制御する

目次

エンジニア

プログラミングでは、記述したコードが常に上から下へ一直線に実行されるわけではないんだ。条件によって処理を変えたり、同じことを何度も繰り返したりすることで、プログラムはもっと賢くなるんだよ。

プログラミングにおいて、記述したコードが常に上から下へ一直線に実行されるわけではありません。特定の条件に応じて処理を分岐させたり、同じ処理を何度も繰り返したりすることで、プログラムはより賢く、柔軟に動作します。今回の「EcmaScript基礎マスターへの道」第3回では、まさにこの「プログラムの流れを制御する」ための鍵となる「演算子」と「制御構文」について深く掘り下げていきます。

本回を終える頃には、あなたのプログラムはまるで意思を持っているかのように、状況に応じた判断を下し、効率的にタスクをこなせるようになっているでしょう。それでは、早速これらの強力なツールを学んでいきましょう。

デザイナー

演算子って、数学の記号みたいなものですか?例えば、足し算とか引き算とか…

エンジニア

そう、まさにその通り!変数や値に対して、計算したり、比較したり、論理的な操作を行うための記号なんだ。EcmaScriptには色々な種類があるんだよ。

演算子:プログラムの計算と判断の道具

演算子は、変数や値(オペランド)に対して計算や比較、論理的な操作を行う記号のことです。EcmaScriptには様々な種類の演算子が用意されています。

1. 算術演算子

デザイナー

算術演算子は、普段の計算と一緒だから分かりやすいですね! %** は馴染みが薄いけど…

エンジニア

% は割り算の余りを求める記号で、** はべき乗、つまり何乗かを表すんだ。地味だけど、意外と使う場面が多いよ。

数値の計算に使います。

演算子説明
+加算a + b
-減算a - b
*乗算a * b
/除算a / b
%剰余(余り)a % b
**べき乗a ** b (aのb乗)
let num1 = 10;
let num2 = 3;

console.log(num1 + num2); // 13
console.log(num1 - num2); // 7
console.log(num1 * num2); // 30
console.log(num1 / num2); // 3.333...
console.log(num1 % num2); // 1 (10を3で割った余り)
console.log(num2 ** 3);   // 27 (3の3乗)

2. 比較演算子

エンジニア

比較演算子は、二つの値が同じか、大きいか小さいか、といった関係を判断する時に使うんだ。結果は常にtruefalseになるよ。

二つの値を比較し、その結果が正しいか(`true`)誤っているか(`false`)を返します。

演算子説明
==等しい(値のみ比較)a == b
!=等しくない(値のみ比較)a != b
===厳密に等しい(値と型を比較)a === b
!==厳密に等しくない(値と型を比較)a !== b
>より大きいa > b
<より小さいa < b
>=以上a >= b
<=以下a <= b

特に重要なのが `==``===` の違いです。
`==` は比較する際に必要であれば型変換を行ってから比較します。
`===` は型変換を行わず、値と型が両方とも同じであるかを厳密に比較します。

let val1 = 10;
let val2 = '10'; // 文字列型の'10'
let val3 = 20;

console.log(val1 == val2);  // true (型が異なるが、値は同じと判断される)
console.log(val1 === val2); // false (値は同じだが、型が異なるため)

console.log(val1 != val3);  // true
console.log(val1 !== val2); // true (型が異なるため)

console.log(val1 > val3);   // false
console.log(val1 <= val3);  // true

予期せぬバグを防ぐため、基本的には `===` (厳密等価演算子) を使うことが推奨されます。

3. 論理演算子

デザイナー

論理演算子って、ちょっと難しそうですね。『かつ』とか『または』みたいな?

エンジニア

そう!複数の条件を組み合わせる時に使うんだ。例えば、『20歳以上で、かつ学生である』みたいな条件を作れるよ。!は条件を反転させる記号だね。

複数の真偽値を組み合わせて、最終的な真偽値を判断します。

演算子説明
&&論理AND(両方が`true`なら`true`A && B
||論理OR(どちらか一方が`true`なら`true`A || B
!論理NOT(真偽を反転させる、`true`なら`false``false`なら`true`!A
let age = 25;
let isStudent = true;

// AND演算子: ageが20より大きく、かつ学生であるか?
console.log(age > 20 && isStudent); // true

// OR演算子: ageが18未満、または学生であるか?
console.log(age < 18 || isStudent); // true (age < 18はfalseだが、isStudentがtrueのため)

// NOT演算子: isStudentではないか?
console.log(!isStudent); // false

4. 代入演算子

エンジニア

代入演算子は、変数に値をセットする時に使う記号だよ。=が基本だけど、+=みたいに計算しながら代入する短縮形も便利なんだ。

変数に値を代入する際に使います。`=` が最も基本的ですが、算術演算子と組み合わせた短縮形もあります。

演算子説明短縮なしの形
=代入x = y
+=加算代入x += yx = x + y
-=減算代入x -= yx = x - y
*=乗算代入x *= yx = x * y
/=除算代入x /= yx = x / y
%=剰余代入x %= yx = x % y
**=べき乗代入x **= yx = x ** y
let count = 5;

count += 3; // countは 5 + 3 = 8 になる
console.log(count); // 8

count *= 2; // countは 8 * 2 = 16 になる
console.log(count); // 16

count %= 7; // countは 16 % 7 = 2 になる
console.log(count); // 2
デザイナー

演算子で計算や比較ができることは分かりました!では、その結果を使ってプログラムに動きを持たせるのが『制御構文』ってことですか?

エンジニア

その通り!制御構文は、条件によって処理を分岐させたり、同じ処理を繰り返したりするための文法なんだ。これでプログラムの実行フローを柔軟にコントロールできるようになるよ。

制御構文:プログラムに意思決定と繰り返しを

制御構文は、特定の条件に基づいて処理を分岐させたり、同じ処理を繰り返したりするための文法です。これにより、プログラムの実行フローを柔軟にコントロールできます。

1. 条件分岐

エンジニア

条件分岐は、特定の条件が満たされた場合にだけ、特定のコードを実行したい時に使うんだ。人間が『もし雨が降ったら傘をさす』と判断するのと一緒だね。

特定の条件が満たされた場合にのみ、特定のコードブロックを実行します。

`if…else if…else` 文

最も一般的な条件分岐の方法です。

let score = 75;

if (score >= 90) {
  console.log("評価:A");
} else if (score >= 70) {
  console.log("評価:B");
} else if (score >= 50) {
  console.log("評価:C");
} else {
  console.log("評価:D");
}
// 出力: 評価:B

`if` の条件が `true` の場合、そのブロックが実行され、それ以降の `else if``else` は評価されません。どの条件も `true` でない場合に `else` ブロックが実行されます。

`switch` 文

一つの式の値に基づいて、複数の分岐処理を行うのに適しています。

let fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("リンゴを選びました。");
    break;
  case "banana":
    console.log("バナナを選びました。");
    break;
  case "orange":
    console.log("オレンジを選びました。");
    break;
  default:
    console.log("選択肢にない果物です。");
}
// 出力: リンゴを選びました。

`switch` 文では、`case` に合致する処理が実行された後、`break` がないと、その後の `case` の処理も続けて実行されてしまいます(フォールスルー)。意図しない動作を防ぐために、通常は各 `case` の最後に `break` を記述します。どの `case` にも合致しない場合は `default` が実行されます。

2. 繰り返し(ループ)

デザイナー

同じ処理を何度も繰り返すなんて、手作業では考えられないことですよね!

エンジニア

そうだね。例えば、『1から100まで数字を数える』とか、『リストの項目を一つずつ処理する』とか、プログラムが得意な作業の典型だよ。

同じ処理を複数回実行したい場合に利用します。

`for` ループ

回数が決まっている繰り返し処理によく使われます。

// 1から5までの数を表示する
for (let i = 1; i <= 5; i++) {
  console.log(i);
}
// 出力:
// 1
// 2
// 3
// 4
// 5

`for` ループは、以下の3つの部分で構成されます。

  • 初期化: ループ開始時に一度だけ実行される式 (`let i = 1`)
  • 条件: 各ループの開始時に評価される条件式。`true` の間はループが続きます (`i <= 5`)
  • 更新: 各ループの終了時に実行される式 (`i++`)
`while` ループ

条件が `true` である間、処理を繰り返し実行します。回数が明確でない繰り返し処理に適しています。

let count = 0;
while (count < 3) {
  console.log("現在のカウント:", count);
  count++; // この行がないと無限ループになるので注意!
}
// 出力:
// 現在のカウント: 0
// 現在のカウント: 1
// 現在のカウント: 2

`while` ループでは、ループ内部で必ず条件式を `false` にする処理を含める必要があります。そうしないと、無限ループとなりプログラムが停止しなくなることがあります。

`do…while` ループ

`while` ループと似ていますが、条件の評価がループの実行後に行われるため、最低1回は必ず処理が実行されます。

let j = 0;
do {
  console.log("do...whileのカウント:", j);
  j++;
} while (j < 3);
// 出力:
// do...whileのカウント: 0
// do...whileのカウント: 1
// do...whileのカウント: 2
エンジニア

ここまでで、プログラムに意思を持たせ、効率的にタスクをこなすための強力なツールを見てきたね。

まとめ

今回の第3回では、プログラムの流れを自在に操るための「演算子」と「制御構文」を学びました。

  • 演算子:数値の計算(算術演算子)、値の比較(比較演算子)、真偽値の組み合わせ(論理演算子)、変数への値の代入(代入演算子)といった基本的な操作を行いました。特に `==``===` の違いを理解することは重要です。
  • 制御構文:条件に応じて処理を変える `if/else if/else``switch` などの「条件分岐」、そして同じ処理を繰り返す `for``while``do/while` などの「繰り返し(ループ)」を習得しました。

これらの知識を組み合わせることで、あなたのプログラムは単調な指示の羅列から脱却し、より複雑な状況に対応できる「賢い」プログラムへと進化します。次回は、より複雑なデータを効率的に扱うための「データ構造」について学んでいきましょう。

チャンネル登録 よろしくお願いします

こんにちわ!JS太郎です‼
このチャンネルでは、はじめてプログラミングをする人はもちろん、小学生からでも理解出来るように判りやすく解説しています。
是非、一緒にプログラミングを学んでご自身の付加価値を高めていきましょう。

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。