第3回:制御構文

2024-08-162025-02-24

プログラミングを学び始めると、何かしらの条件に基づいて処理を分岐させたり、繰り返したりする場面が多く出てきます。
これを「制御構文」と呼びます。
この記事ではJavaScriptの制御構文について詳しく解説し、初心者がつまずきやすいポイントをわかりやすく説明します。
制御構文を理解することで、より複雑で動的なプログラムを作成できるようになりますよ！

制御構文とは？

制御構文とはプログラムの実行の流れを制御するための構文です。
具体的には、「条件分岐」や「繰り返し」などが含まれます。
制御構文を使うことでコードに柔軟性を持たせ、様々なシナリオに対応した動作を実現できます。

補足: 制御構文を使うと、特定の条件が満たされた場合にだけコードを実行したり、同じ処理を何度も繰り返すことができます。

条件分岐

条件分岐は、指定した条件が真か偽かに応じて、実行するコードを選択するための構文です。

補足: 条件の真偽については「true」や「正しい」、「false」や「正ではない」とも表現しますが、ここでは「true」or「false」で統一します。

if文

解説

最も基本的な条件分岐はif文です。
if文は条件がtrueである場合にのみ、直後の{ }の中のコードを実行します。

const weather = "晴れ";

if (weather === "晴れ") {
  console.log("今日はピクニックに行きましょう！");
}

このコードでは、天気が”晴れ”である場合に、「今日はピクニックに行きましょう！」というメッセージが表示されます。

比較演算子	条件
x > 0	0より大きい
x < 0	0未満
x >= 0	0以上
x <= 0	0以下
x === 0	0と等しい
x !== 0	0と等しくない

補足: === は、JavaScriptで「厳密な等価」を確認するための比較演算子です。
2つの値が型も値も同じ場合に真を返します。
原則は==ではなく===を使いましょう。
!は否定形と言い、条件がひっくり返ります。

演習問題

変数scoreに数値を代入し、その値が80以上の場合に「合格です」と表示するコードを書いてみましょう。

if…else文

解説

if…else文を使うと、条件がfalseである場合に実行するコードを指定することができます。

const weather = "雨";

if (weather === "晴れ") {
  console.log("今日はピクニックに行きましょう！");
} else {
  console.log("今日は家で映画を見ましょう。");
}

このコードでは、天気が”晴れ”でない場合、「今日は家で映画を見ましょう。」が表示されます。

else if文

複数の条件をチェックしたい場合には、else ifを使います。

let weather = "曇り";

if (weather === "晴れ") {
  console.log("今日はピクニックに行きましょう！");
} else if (weather === "曇り") {
  console.log("今日は図書館に行きましょう。");
} else {
  console.log("今日は家で映画を見ましょう。");
}

ここでは天気が”晴れ”でも”曇り”でもない場合、「今日は家で映画を見ましょう。」が表示されます。

演習問題

ユーザーの年齢を表す変数 age があります。
以下の条件に従って、適切なメッセージを表示するプログラムを作成してください。

age が 20以上の場合：「成人です」と表示する
age が 18以上20未満の場合：「成人ですがお酒は飲めません」と表示する
age が 18未満の場合：「未成年です」と表示する

繰り返し処理

解説

繰り返し処理は同じコードを何度も実行するための構文です。
これにより同じ処理を手動で繰り返し書く手間を省くことができます。

for文

for文は特定の条件が満たされるまで繰り返し処理を行うための構文です。

for (let i = 0; i < 5; i++) {
  console.log(`このメッセージは${i + 1}回目の表示です。`);
}

このコードでは、iが0から4になるまで繰り返します。
つまり5回メッセージを表示します。

補足: for文では、初期化（let i = 0;）、条件（i < 5;）、更新（i++）の3つの部品で構成されています。

上記の例文を、より人間がわかりやすいように書き換えると下記のようになります。

for (let i = 1; i <= 5; i++) {
  console.log(`このメッセージは${i}回目の表示です。`);
}

人間は最初の1回目を1と数えるのに対して、コンピュータは0と数えるところから、この差が生まれます。

while文

while文は指定した条件がtrueである場合に、記述された繰り返し処理を行います。

const count = 0;

while (count < 5) {
  console.log(`カウント: ${count}`);
  count++;
}

このコードではカウントが5未満の場合に、メッセージを表示し続けます。

do…while文

do…while文は条件をチェックする前に必ず一度は処理を実行します。

const count = 0;

do {
  console.log(`カウント: ${count}`);
  count++;
} while (count < 5);

このコードでもカウントが5未満の場合に、メッセージを表示し続けますが、whileの前にdoが記述してある通り、まず1回実行されます。

補足: 20年以上コードを書いてきましたが、do while文を使ったことはほとんどありません。
知識として知っておきましょう。

演習問題

1から100までの数字をたし算して、その合計を求めるプログラムをfor文を使って書いてください。
100から1までの数字を逆順に表示するプログラムをwhile文を使って書いてください。
1から50までの数字の中で、偶数のみを表示するプログラムをfor文を使って書いてください。
掛け算九九表をwhile文を使って作成し、表示するプログラムを作成してください。

ネストされた制御構文

制御構文は別の制御構文の中に入れることができます。
これを「ネスト」（入れ子）と呼びます。
ネストされた制御構文を使うことで、より複雑な処理を行うことができます。

const weather = "晴れ";
const temperature = 30;

if (weather === "晴れ") {
  if (temperature >= 25) {
    console.log("今日は海に行きましょう！");
  } else {
    console.log("今日は山にハイキングに行きましょう！");
  }
} else {
  console.log("今日は家で読書をしましょう。");
}

ここでは天気が”晴れ”で、かつ気温が25度以上である場合に、「今日は海に行きましょう！」が表示されます。
それ以外の場合には、山に行くか、家で読書するかのメッセージが表示されます。

補足: ネストされた制御構文を多用するとコードが複雑になりやすいので、できるだけシンプルに保つことが大切です。
ネストは深くても3段目までにしておきましょう。
読みづらいコードというのは、それだけで罪です。

まとめ

制御構文はプログラムの実行の流れを制御し、柔軟な処理を可能にします。
条件分岐や繰り返し処理を活用することで、より動的でインタラクティブなプログラムを作成できます。

この記事では基本的な制御構文とその使い方について説明しました。
次回はさらに進んだ制御構文や例外処理について学びましょう。
焦らず一歩ずつ進めば、必ず理解が深まります。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！