HTML、CSS、JavaScriptJavaScriptの基礎

JavaScriptの基礎:制御構文を解説(if,for文など)

JavaScript制御構文解説ページのアイキャッチ画像 HTML、CSS、JavaScript

この記事では、プログラミングにおける制御構文の基本について学びます。特に、条件分岐(if文とswitch文)と繰り返し処理(for文とwhile文)に焦点を当て、それぞれの構文の使い方と実際のコード例を通じて理解を深めることができます。これらの制御構文は、プログラムの流れを制御する上で非常に重要な要素です。

はじめに

この記事のコードをコピペして出力してみよう。

VSCodeでコードを書き、Node.jsでコンソール出力する方法がおすすめです。

制御構文とは?

制御構文は、プログラムの実行順序や条件に応じた処理を制御するための構文です。主に条件分岐繰り返し処理に分類されます。これらを使用することで、プログラムに論理的な判断や反復を組み込むことができます。

条件分岐

条件分岐は、特定の条件が満たされたときに特定のコードブロックを実行する構文です。

if文の例:

JavaScript
// 年齢に基づいて投票権を判定する
let age = 20;

if (age >= 18) {
    console.log("投票権があります。"); // 年齢が18以上の場合に実行
} else {
    console.log("投票権がありません。"); // 年齢が18未満の場合に実行
}

出力結果:

投票権があります。

このコードでは、age変数の値に基づいて条件分岐を行っています。18歳以上であれば投票権があると判定します。

コードの解説

変数の宣言と初期化:

JavaScript
let age = 20;
  • let は変数を宣言するためのキーワードです。
  • age は変数名で、ここでは年齢を表します。
  • = 20 で変数 age に20という値を代入しています。

if文(条件分岐):

JavaScript
if (age >= 18) {
   // ...
} else {
   // ...
}
  • if は条件分岐を行うためのキーワードです。
  • (age >= 18) は条件式です。年齢が18以上かどうかを判定します。
  • >= は「以上」を意味する比較演算子です。
  • elseは条件に合わない時に実行されます。

条件が真の場合の処理:

JavaScript
console.log("投票権があります。");
  • この行は、年齢が18以上の場合に実行されます。
  • console.log() は、コンソールにメッセージを表示する関数です。

条件が偽の場合の処理:

JavaScript
console.log("投票権がありません。");
  • この行は、年齢が18未満の場合に実行されます。

全体の流れ:

  • まず年齢を設定します。
  • その年齢が18以上かどうかを判断します。
  • 18以上なら「投票権があります。」と表示します。
  • 18未満なら「投票権がありません。」と表示します。

このコードは、設定された年齢に基づいて、その人が投票権を持っているかどうかを判断し、適切なメッセージを表示します。変数、条件分岐、比較演算子の基本的な使い方を示す良い例です。

switch文の例:

JavaScript
// 曜日に応じてメッセージを表示
let day = "月曜日";

switch (day) {
    case "月曜日":
        console.log("週の始まり、頑張りましょう!");
        break;
    case "金曜日":
        console.log("もうすぐ週末です!");
        break;
    default:
        console.log("平常通りの1日です。");
}

出力結果:

週の始まり、頑張りましょう!

このswitch文は、day変数の値に応じて異なるメッセージを表示します。複数の条件分岐を簡潔に書くことができます。

コードの解説

変数の宣言と初期化:

JavaScript
let day = "月曜日";
  • let は変数を宣言するキーワードです。
  • day は変数名で、ここでは曜日を表します。
  • = "月曜日" で変数 day に “月曜日” という文字列を代入しています。

switch文(条件分岐):

JavaScript
switch (day) {
   // ...
}
  • switch は複数の条件分岐を行うためのキーワードです。
  • (day) は、どの変数の値に基づいて分岐するかを指定しています。

case文(各条件の処理):

JavaScript
case "月曜日":
   console.log("週の始まり、頑張りましょう!");
   break;
  • case は各条件を表します。
  • "月曜日": は、day の値が “月曜日” の場合の処理を指定します。
  • console.log() は、コンソールにメッセージを表示する関数です。
  • break; は、この case の処理が終わったらswitch文を抜けることを指示します。

別のcase:

JavaScript
case "金曜日":
   console.log("もうすぐ週末です!");
   break;
  • これは day の値が “金曜日” の場合の処理です。

default文(どのcaseにも当てはまらない場合の処理):

JavaScript
default:
   console.log("平常通りの1日です。");
  • default: は、どの case にも当てはまらない場合の処理を指定します。
  • この場合、月曜日と金曜日以外の曜日に対するメッセージです。

全体の流れ:

  • まず曜日を設定します。
  • その曜日に応じて、適切なメッセージを選択します。
  • 月曜日なら “週の始まり、頑張りましょう!” と表示します。
  • 金曜日なら “もうすぐ週末です!” と表示します。
  • それ以外の曜日なら “平常通りの1日です。” と表示します。

このコードは、設定された曜日に基づいて、適切なメッセージを表示します。switch文は、複数の条件分岐を行う際に便利で、if-else文の代替として使用されることがあります。各 casebreak の使い方、そして default の役割を理解することが重要です。

繰り返し処理

繰り返し処理は、特定の条件が満たされる間、または指定回数だけコードブロックを繰り返し実行する構文です。

for文の例:

JavaScript
// 1から5までの数字を出力する
for (let i = 1; i <= 5; i++) {
    console.log(i); // 現在の数字を出力
}

出力結果:

1
2
3
4
5

このfor文は、変数iを1から5まで増加させながら、各数字を出力します。初期化条件増分の3つの部分で構成されています。

コードの解説

for文(ループ構文):

JavaScript
for (let i = 1; i <= 5; i++) {
   // ...
}
  • for はループを作成するためのキーワードです。
  • for文は3つの部分から構成されています:
    a. 初期化: let i = 1
    b. 条件: i <= 5
    c. 更新: i++

初期化部分:

JavaScript
let i = 1;
  • ループ変数 i を宣言し、1で初期化しています。
  • この部分は、ループが始まる前に一度だけ実行されます。

条件部分:

JavaScript
i <= 5
  • これはループを続けるための条件です。
  • i が5以下である限り、ループは続きます。
  • この条件は各ループの開始時にチェックされます。

更新部分:

JavaScript
i++
  • これは各ループの終わりに実行される部分です。
  • i++i の値を1増やすことを意味します。
  • これにより、i は1から順に増えていきます。

ループ本体:

JavaScript
console.log(i); // 現在の数字を出力
  • これはループ内で実行される処理です。
  • console.log(i) は、現在の i の値をコンソールに出力します。

全体の流れ:

  • ループは i が1から始まります。
  • 各ループで、i の値が出力されます。
  • ループの終わりに i の値が1増えます。
  • i が5以下である限り、このプロセスが繰り返されます。
  • i が6になると、条件 i <= 5 が偽になるため、ループが終了します。

このコードは、1から5までの数字を順番に出力します。for文は、決まった回数の繰り返し処理を行う際によく使用されます。初期化、条件、更新の3つの部分を理解し、それらがどのようにループの動作を制御しているかを把握することが重要です。

while文の例:

JavaScript
// 5が出たら終了するサイコロゲーム
while (true) {
    let dice = Math.floor(Math.random() * 6) + 1; // 1から6のランダムな数
    console.log("サイコロの目:" + dice);

    if (dice === 5) {
        console.log("5が出たのでゲーム終了!");
        break; // ループを抜ける
    }
}

出力結果:

サイコロの目:1
サイコロの目:3
サイコロの目:2
サイコロの目:4
サイコロの目:3
サイコロの目:1
サイコロの目:4
サイコロの目:6
サイコロの目:5
5が出たのでゲーム終了!

この例では、5が出るまでサイコロを振り続けます。5が出たらbreak文でループを抜けます

コードの解説

while文:

JavaScript
while (true) {
   // ...
}
  • while はループを作成するためのキーワードです。
  • (true) は常に真となる条件で、これにより無限ループが作られます。

サイコロを振る(ランダムな数の生成):

JavaScript
let dice = Math.floor(Math.random() * 6) + 1;
  • Math.random() は0以上1未満のランダムな小数を生成します。
  • * 6 でその範囲を0以上6未満に拡大します。
  • Math.floor() で小数点以下を切り捨てて整数にします。
  • + 1 で1から6の範囲にします。
  • 結果を dice 変数に代入します。

結果の表示:

JavaScript
console.log("サイコロの目:" + dice);
  • console.log() でサイコロの目をコンソールに表示します。

条件チェック:

JavaScript
if (dice === 5) {
   // ...
}
  • if 文で条件をチェックします。
  • === は厳密等価演算子で、値と型が同じかどうかを判定します。
  • サイコロの目が5かどうかをチェックしています。

ゲーム終了の処理:

JavaScript
console.log("5が出たのでゲーム終了!");
break;
  • 5が出た場合、終了メッセージを表示します。
  • break 文でループを即座に終了します。

全体の流れ:

  • ループが始まります(無限ループ)。
  • 毎回サイコロを振り(ランダムな数を生成し)、その結果を表示します。
  • サイコロの目が5であるかをチェックします。
  • 5でない場合、ループの先頭に戻ってサイコロを振り直します。
  • 5が出たら、終了メッセージを表示してループ(ゲーム)を終了します。

このコードは、サイコロを振るシミュレーションを行い、5が出るまでゲームを続けるプログラムです。while文による無限ループMath.random()を使用したランダムな数の生成if文による条件チェック、そしてbreak文によるループの終了という重要な概念が含まれています。これらの要素がどのように組み合わさってゲームのロジックを形成しているかを理解することが重要です。

これらの制御構文を適切に使用することで、より柔軟で効率的なプログラムを作成することができます。初心者の方は、まずこれらの基本的な構文をしっかりと理解し、実際にコードを書いて練習することをお勧めします。

まとめ

  • 制御構文はプログラムの実行順序を制御するための基本的な構造です。
  • 条件分岐(if文、switch文)は、特定の条件に基づいて異なる処理を実行します。
  • 繰り返し処理(for文、while文)は、特定の条件が満たされる間、処理を繰り返し実行します。
  • 各制御構文の具体的な使用例を通じて、実際のプログラミングでの応用方法を学べます。

これらの制御構文を適切に組み合わせることで、複雑な処理やアルゴリズムを実装することができます。また、制御構文の適切な使用は、コードの可読性と保守性を向上させ、バグの少ない効率的なプログラムの作成につながります。

この記事で学んだ知識を活用することで、より柔軟で効率的なプログラムを作成する能力が身につき、プログラミングスキルの向上につながります。

コメント

タイトルとURLをコピーしました