本記事ではJavaScriptの条件分岐と繰り返し処理についてご紹介します。
まず条件分岐から説明します。
条件分岐
・if文
・switch文
if文
基本的な条件分岐です。if(条件式){処理}の構文で成り立ち、(条件式)を計算してtrueとなるかfalseとなるかを判断します。
if(条件式){
//処理
}
＜＜使用例＞＞
let i = 3;
if(i > 1){
// iが1より大きいかどうか判断します
console.log(i + 'は1よりも大きいです');
}
条件式に合致（true）すればコンソール上で下記のように結果が表示されます。
変数iに1以下を代入して確認してみます。
let i = 0;
if(i > 1){
// iが1より大きいかどうか判断します
console.log(i + 'は1よりも大きいです');
}
(i > 1)の条件式に一致しないためコンソールには何も表示されません。
if文でtrueでなかった場合の処理を書きたい…
そんな時はelseを使用します。
if(条件式){
//処理
}else{
//処理
}
＜＜使用例＞＞
let i = 0;
if(i > 1){
// iが1より大きいかどうか判断します
console.log(i + 'は1よりも大きいです');
}else{
console.log(i + 'は1よりも小さいです');
}
このように書くことで、条件式(i > 1)に当てはまらなかった場合の処理を下に記載することができます。
コンソールに表示された結果はこのようになります。
if文でもっと条件を増やしたい…
そんな時はelse ifを用います。先ほどの「if」「else」の間に記載します。
if(条件式1){
//処理
}else if(条件式2){
//処理
}else{
//処理
}
このように記載することで、このような意味になります。
「if もし〇〇だった場合」
「else if もし〇〇でなくて△△である場合」
「else 〇〇でも△△でもない場合」
＜＜使用例＞＞
let i = 1;
if(i > 1){
// iが1より大きいかどうか判断します
console.log(i + 'は1よりも大きいです');
}else if(i == 1){
// iが1と一致するかどうか判断します
console.log(i + 'は1です');
}else{
console.log(i + 'は1よりも小さいです');
}
コンソールに表示される結果はこのようになります。
また、else ifの記述による条件は、「if」と「else」の間に複数増やすこともできます。
しかし、条件が増えすぎるとコードの可読性が低くなります。
そのため、複数の条件分岐に対応したのがswitch文です。
switch文
if文ほど使用頻度は高くありませんが、複数の値を用意して、その値に一致した場合、該当する処理を行う条件分岐です。
switch (値){
case 値:
// 処理
case 値:
// 処理
case 値:
// 処理
case 値:
// 処理
default:
// 処理
}
＜＜使用例＞＞
let color = 'red';
switch (color) {
case 'red':
console.log('赤');
break;
case 'blue':
console.log('青');
break;
case 'yellow':
console.log('黄');
break;
case 'white':
console.log('白');
break;
default:
console.log('不明な色です');
}
コンソールに表示される結果はこのようになります。
書き方のポイントとしては
分岐後の処理のbreak
…分岐して処理を行った後にbreakを記述しないと、そのまま次の条件に当てはまるかどうか検証し続けてしまい、無限ループが発生してしまうためです。
if文でのelseがdefault
…switch文の条件に一致しない値だった場合はelseではなくてdefaultを記述します。
また、記載したswitch文の条件に一致した条件から処理が行われるため、
例えば「〇〇かつ△△」という、〇〇と△△どちらでもある値だった時、
この場合switch文中で先に書かれていた条件の処理が行われます。
繰り返し処理
・for文
・while文
・do while文
for文
…ある特定の処理を、指定した数繰り返し処理を行うための文。
for(let i=1; i<=5; i++){
console.log(i);
}
for文の中身を分解して考えてみましょう。
let i=1 …変数iを宣言し、１を代入します。
i<=5 …これはfor文の処理が行われるための条件です。
内容としては「iが5以下である場合は処理を行う」という意味合いになります。
i++ …iの後置インクリメント演算子です。console.logの処理が終わった後にiを+1します。
つまり、「変数iが5以下である場合、console.logの処理を行い、を+1する」ということです。
コンソール上でどのような結果が出るか確認してみましょう。
このように５以上の数値になるまで数字がコンソール上に表示されるようになります。
while文
let i = 1;
while(i<=10){
// 条件式がtrueの時に行われる処理
console.log(i);
i++;
}
while文を使用する場合、forのようにまとめて宣言・条件・処理内容を記載するのではなく
while文の外側で変数の宣言をし、while文の()内に条件を記載し、iにiを足す処理をそのwhile文の内側で行います。
ソースコードを実行するとコンソール上に下記のような結果が表示されます。
do while文
先ほどのwhile文と同様に外で変数の定義を行うところまでは同じですが、
異なるのは、次にdo {処理}を記述し、doの外に繰り返し処理の条件を記載するようになっています。
let i = 3
do {
console.log(i);
i++;
} while(i <= 5);
こちらは変数iの中に3を代入しているため、コンソール上に3～5までの数字が出力されます。
