Web Design

【JavaScriptの分岐】if構文の書き方、うるう年の判定方法

2021年7月14日

JavaScriptのif構文
  • 「JavaScriptの条件分岐if構文の書き方について知りたい」
  • 「うるう年を判定するためのif構文サンプルコードを知りたい」

この記事はそんな方へ向けて書いています。

 本記事の内容

JavaScriptのif構文の基本的な書き方
if構文を使って、うるう年を判定する方法

 本記事の信頼性

2021年6月からWebデザインの職業訓練校で学んでいます(6ヶ月コース)
使用テキスト:HTML&CSS、JavaScriptのきほんのきほん
ブログ歴:2019年1月にWordPressで開設(月間最高62,000PV、52,000円)

プログラムができることは4つだけです。

入力
出力
分岐
繰り返し

今回のテーマ「分岐」は、その中でも重要なプログラム。
なぜなら、HTMLでは絶対にできないから。

分岐では「ある条件を満たした場合、処理する」というプログラムが可能です。
条件に応じて、処理する内容を以下のように切り替えられるのです。

もし○○だったら、XXをする。
そうじゃなくて●●だったら、YYをする。
○○でも●●でもなかったら、ZZをする。

本記事では、JavaScriptでif構文を使って条件分岐させる方法について解説していきます。

ちなみにJavaScriptの数値の扱い方については、【JavaScriptの数値】概要から様々な計算例をまとめましたで解説しています。

こーいち
記事後半では、if構文を使った「うるう年の判定方法」をまとめました。

【JavaScriptの分岐】if構文の基本的な書き方

JavaScriptの分岐

if構文の基本的な書き方

 基本的な書き方

if(条件){
 処理
}

条件が成立するときだけ処理をして、成立しないときは何もしません。

下記、例文です。

const kazu = 1;
if(kazu == 1){
 console.log('変数kazuは1です');
};

左辺と右辺が等しいかどうかを調べるには「==」を使います。

 if構文の特徴

処理のうち、どれか一つしか実行しない
上から見ていき、最初に成立したものを実行する

同時に条件が成立するものを作ってもOKです。

こーいち
ただ、問題がないように考えて作らないといけません。

成立しないときの処理の書き方【else】

以下がelseの書き方です。

if(条件){
 処理1
}else{
 処理2
}

条件が成立するときは処理1を行い、成立しないときは処理2を実行します。

例文は以下のとおり。

const kazu2 = 100;
if(kazu2 == 100){
 console.log('変数kazu2は100です');
}else{
 console.log('変数kazu2は100じゃないです');
};

複数条件の書き方【else if】

else ifの書き方は、以下のとおり。

if(条件1){
 処理1
}else if(条件2){
 処理2
}

条件1が成立するときは処理1を実行。
条件1が成立せず、条件2が成立するときは処理2を実行。

なお、条件(else if)は何個でも入れることができる。
さらにelseを使って、どの条件にも当てはまらない処理もできます。

const kazu3 = 100;
if(kazu3 == 1){
 console.log('変数kazu3は1です');
}else if(kazu3 ==10){
 console.log('変数kazu3は10です');
}else{
 console.log('変数kazu3は1でも10でもないです');
};

 複数条件を入れたときの注意点

if(条件a){
 処理a
}else if(条件b){
 処理b
}

もし、条件1と条件2がどちらも成立する場合、処理aのみを実行し、処理bは実行されません。

以下の場合、条件1、条件2とも成立します。
しかし、出力されるのは「変数kazu4は5より大きいです」だけなのです。

const kazu4 = 10;
if(kazu4 > 5){
 console.log('変数kazu4は5より大きいです');
}else if(kazu4 == 10){
 console.log('変数kazu4は10です');
};

こーいち
最初に成立したものを出力します。

if構文の記述例

index.html

<script>
 const kazu = 1;
 if (kazu == 1) {
  console.log(' 変数kazuは1です ');
 }
 const kazu2 = 10;
 if (kazu2 >= 10) {
  console.log('成り立つ');
 } else {
  console.log('成り立たない');
 }

 const kazu3 = 10;
  if (kazu3 == 1) {
   console.log('変数kazu3は1です');
  } else if (kazu3 == 10) {
   console.log('変数kazu3は10です');
  } else {
   console.log('変数kazu3は1でも10でもないです');
  }

</script>

【解説】
変数kazuに1を代入。
変数kazuが1のとき、開発者ツールに文字列「変数kazuは1です」を出力。

変数kazu2に10を代入。
変数kazu2が10のとき、文字列「変数kazu2は10です」を出力。
10じゃないとき、文字列「変数kazu2は10じゃないです」を出力。

変数kazu3に100を代入。
変数kazu3が1のとき、文字列「変数kazu3は1です」を出力。
変数kazu3が10のとき、文字列「変数kazu3は10です」を出力。
変数kazu3が1でも10でもないとき、「変数kazu3は1でも10でもないです」を出力。

JavaScriptで使える比較演算子、論理演算子

比較演算子

比較演算子はif文のJavaScriptで多用します。

A > BAがBより大きい
A >= BAがB以上
A == BAとBの値が等しい
A === BAとBの値と型が等しい
A <= BAがB以下
A < BAがBより小さい(未満)
A != BAとBが等しくない
A !== BAとBが厳密に等しくない

ちなみに、比較演算子をコンソールに出力すると、trueまたはfalseで返ってきます。

index.html

console.log(4 < 6);
//出力結果:true

メモ:厳密な比較について

「===」や「!==」はJavaScript特有の演算子。
「==」は比較するときに型を自動変換します。
たとえば、数値123と文字列「123」の比較ではtrueを返します。
console.log(123 == '123');の出力結果は、trueなのです。
「===」では型を含めてチェックするので、falseとなります。

» 参考:【JavaScript入門】比較演算子の使い方まとめ (==/===/OR/AND)

論理演算子

JavaScriptで使用できる論理演算子には、AND、OR、NOTの3種です。

&&AND(かつ)
||OR(または)
!NOT(否定)

if構文を使って、うるう年を判定する方法

JavaScriptのif構文でうるう年を判定する方法

うるう年とは

うるう年とは28日までしかない2月が、29日と1日多くなる年のこと。
うるう年は、1年365日ではなく366日になります。

ちなみに、2月29日ことは「うるう日」といいます。
» 参考:どうしてうるう年は4年に一度なの、どうしてあるの

うるう年の3つの条件

うるう年になる3つの条件は、以下です。

西暦が4で割り切れる
西暦が4で割り切れても、100で割り切れる場合を除く
西暦が100で割り切れても、400で割り切れる場合はうるう年

» 参考:うるう年は4年に1度とは限らない!うるう年の正しい計算方法など8選

うるう年のif構文の記述例

HTMLの記述例

index.html

<script>
 const year = 2021;
 if (year % 400 == 0) {
  console.log(year + '年はうるう年');
 } else if (year % 100 == 0) {
  console.log(year + '年はうるう年じゃない');
 } else if (year % 4 == 0) {
  console.log(year + '年はうるう年');
 } else {
  console.log(year + '年はうるう年じゃない');
 }
</script>

【解説】
変数yearに2021を代入。
変数yearが400で割り切れるとき「2021年はうるう年」を出力。
変数yearが400で割り切れず、100で割り切れるとき「2021年はうるう年じゃない」を出力。
変数yearが400でも100でも割り切れず、4で割り切れるとき「2021年はうるう年」を出力。
変数yearが400でも100でも4でも割り切れないとき「2021年はうるう年じゃない」を出力。

こーいち
条件が複数あるときは、満たされにくい順から考えるとif構文がシンプルになります。

【まとめ】JavaScriptのif構文をマスターしよう

JavaScriptのif構文/うるう年の判定方法

本記事は、職業訓練校で学んだif構文について書きました。

 【まとめ】if構文

処理のどれか一つしか実行しない
最初に成立したものだけ実行する
複数条件「else if」は、何個でも入れられる
満たされにくい順から考えるとif構文がシンプルに

if構文はプログラミング言語において多用する文法です。
if構文ができないとプログラミングができません。

ゆえに、if構文はマスター必須です。

こーいち
何事も基礎理解が重要ですので、1つ1つ焦らず理解していきましょう。

こーいちより

P.S. if構文をマスターしよう。

関連記事【JavaScript入門】初心者向けに基礎から文法をまとめました
関連記事
【未経験】Webデザインの独学は難しい3つの理由【解決策あり】

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.