【JavaScript】制御構文if文、forループ、break,continueを徹底解説！

JavaScriptの制御構文について理解しよう！

JavaScriptには、プログラムの流れを制御するための構文がいくつかあります。これらは非常に重要な概念で、コードを書く上で欠かすことはできません。
今回は、それらの制御構文について詳しく見ていきましょう。

サルモリ

よーし、一緒にJavaScriptの制御構文を勉強していこう！

アロー関数を徹底的に学びたい人向けです！画像をクリックしてご覧ください！
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる

制御構文とは？

制御構文とは、プログラムの流れを制御するための命令です。これには、条件分岐やループなどがあります。
これらの構文を理解し、適切に使いこなすことで、より複雑で効率的なプログラムを作ることができます。

サルモリ

制御構文はプログラムを書く上で本当に重要だからね。しっかり理解しよう！

1. 条件分岐: if文

まず最初に、JavaScriptで最も基本的な制御構文であるif文について見ていきましょう。
if文は、指定した条件が真（true）であるかどうかをチェックし、真であればその後のブロック内のコードを実行します。

ソースコード例1

let num = 10;
if (num > 5) {
    console.log('num is greater than 5');
}

let num = 10;

if (num > 5) {

console.log('num is greater than 5');

}

 出力結果
num is greater than 5

サルモリ

ここでは、numが5より大きいかどうかをチェックしてるんだ。numは10だから、'num is greater than 5'って表示されるね！

if文は、さらにelse文やelse if文と組み合わせることができます。これにより、より複雑な条件分岐を行うことが可能になります。

ソースコード例2

let num = 10;
if (num > 10) {
    console.log('num is greater than 10');
} else if (num == 10) {
    console.log('num is exactly 10');
} else {
    console.log('num is less than 10');
}

let num = 10;

if (num > 10) {

console.log('num is greater than 10');

} else if (num == 10) {

console.log('num is exactly 10');

} else {

console.log('num is less than 10');

}

 出力結果
num is exactly 10

サルモリ

このコードでは、numが10より大きい、ちょうど10、あるいは10より小さいかどうかをチェックしてるんだ。numは10だから、'num is exactly 10'って表示されるね！

2. ループ: for文

次に、JavaScriptのループ構文であるfor文を見てみましょう。
for文は、指定した条件が真（true）である限り、ブロック内のコードを繰り返し実行します。

ソースコード例3

for (let i = 0; i < 5; i++) {
    console.log('This is loop number ' + i);
}

for (let i = 0; i < 5; i++) {

console.log('This is loop number ' + i);

}

 出力結果
This is loop number 0
This is loop number 1
This is loop number 2
This is loop number 3
This is loop number 4

サルモリ

ここでは、iが5未満の間、'This is loop number 'とiの値を表示してるんだ。だから、0から4までの数字が順番に表示されるね！

3. ループ: while文

最後に、while文を見てみましょう。
while文もfor文と同様にループ構文で、指定した条件が真（true）である限り、ブロック内のコードを繰り返し実行します。

ソースコード例4

let i = 0;
while (i < 5) {
    console.log('This is loop number ' + i);
    i++;
}

let i = 0;

while (i < 5) {

console.log('This is loop number ' + i);

i++;

}

 出力結果
This is loop number 0
This is loop number 1
This is loop number 2
This is loop number 3
This is loop number 4

サルモリ

このコードでは、iが5未満の間、'This is loop number 'とiの値を表示してるんだ。それからiを1増やすんだ。だから、0から4までの数字が順番に表示されるね！

4. switch文

次に、switch文を見てみましょう。
switch文は、特定の式の値に基づいて、多方向の実行パスを選択します。

ソースコード例5

let fruit = 'apple';
switch (fruit) {
  case 'banana':
    console.log('I am a banana');
    break;
  case 'apple':
    console.log('I am an apple');
    break;
  default:
    console.log('I am not a fruit');
}

let fruit = 'apple';

switch (fruit) {

case 'banana':

console.log('I am a banana');

break;

case 'apple':

console.log('I am an apple');

break;

default:

console.log('I am not a fruit');

}

 出力結果
I am an apple

サルモリ

このコードでは、fruitの値によって表示するメッセージを変えているんだ。fruitは'apple'だから、'I am an apple'って表示されるね！

5. ループ制御: break文

ループの中でbreak文を使うと、そのループをすぐに終了することができます。

ソースコード例6

for (let i = 0; i < 5; i++) {
    if (i === 3) {
        break;
    }
    console.log('This is loop number ' + i);
}

for (let i = 0; i < 5; i++) {

if (i === 3) {

break;

}

console.log('This is loop number ' + i);

}

 出力結果
This is loop number 0
This is loop number 1
This is loop number 2

サルモリ

このコードでは、iが3になったときにループから抜け出すようにしてるんだ。だから、0から2までの数字が順番に表示されるね！

6. ループ制御: continue文

ループの中でcontinue文を使うと、その回のループをスキップし、次のループに進むことができます。

ソースコード例7

for (let i = 0; i < 5; i++) {
if (i === 3) {
continue;
}
console.log('This is loop number ' + i);
}

for (let i = 0; i < 5; i++) {

if (i === 3) {

continue;

}

console.log('This is loop number ' + i);

}

 出力結果
This is loop number 0
This is loop number 1
This is loop number 2
This is loop number 4

サルモリ

このコードでは、iが3の時だけメッセージを表示しないようにしてるんだ。だから、0,1,2,4の数字が順番に表示されるね！

7. 配列の処理: forEach文

JavaScriptの配列では、forEach文を使って配列の各要素に対して処理を行うことができます。

ソースコード例8

let fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(function(fruit) {
    console.log('I am a ' + fruit);
});

let fruits = ['apple', 'banana', 'cherry'];

fruits.forEach(function(fruit) {

console.log('I am a ' + fruit);

});

 出力結果
I am a apple
I am a banana
I am a cherry

サルモリ

このコードでは、fruits配列の各要素に対して、'I am a 'とその要素を表示してるんだ。だから、'I am a apple', 'I am a banana', 'I am a cherry'と順番に表示されるね！

まとめ

この記事では、JavaScriptの制御構文について学びました。
制御構文はプログラムの流れを制御するために非常に重要な概念で、if文、for文、while文を始めとする基本的な制御構文を触れてきました。

JavaScriptの基礎をしっかりと理解することは、より複雑なプログラムを書くための第一歩となります。
これらの基本的な制御構文をマスターすることで、JavaScriptを用いたさまざまなプログラムを作成することが可能になります。

しかし、これらはあくまで基礎であり、JavaScriptにはこれら以外にも多くの便利なメソッドやライブラリが存在します。
是非とも、今回学んだ内容を活かして、さらに深い知識を身につけていきましょう。

最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！

サルモリ

最後まで読んでくれてありがとう！！

【JavaScript】制御構文if文、forループ、break,continueを徹底解説！

JavaScriptの制御構文について理解しよう！

制御構文とは？

1. 条件分岐: if文

2. ループ: for文

3. ループ: while文

4. switch文

5. ループ制御: break文

6. ループ制御: continue文

7. 配列の処理: forEach文

まとめ

Ads Blocker Detected!!!