【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構文を使って条件分岐させる方法について解説していきます。
記事後半では、if構文を使った「うるう年の判定方法」をまとめました。

JavaScriptの数値の扱い方については、【JavaScriptの数値】概要から四則演算など計算例まとめで解説しています。

Contents

【JavaScriptの分岐】if構文の基本的な書き方
if構文を使って、うるう年を判定する方法
まとめ：JavaScriptのif構文をマスターしよう

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

if構文の基本的な書き方

基本的な書き方

if(条件){
　処理
}

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

例文です。

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

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

if構文の特徴

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

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

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

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

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

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

例文

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

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

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

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

条件（else if）は何個でも入れられます。
elseを使って、どの条件にも当てはまらない処理もできます。

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

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>

【解説】
変数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 > B	AがBより大きい
A >= B	AがB以上
A == B	AとBの値が等しい
A === B	AとBの値と型が等しい
A <= B	AがB以下
A < B	AがBより小さい（未満）
A != B	AとBが等しくない
A !== B	AとBが厳密に等しくない

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

index.html

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

厳密な比較については、以下です。

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

論理演算子

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

&&	AND（かつ）
\|\|	OR（または）
!	NOT（否定）

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

うるう年とは

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

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

うるう年の3つの条件

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

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

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

HTMLの記述例

index.html

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

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

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

まとめ：if構文

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

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

if構文はマスター必須です。

以上です。

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