3.1 if〜else文

まず、if～else文の使い方から学んでゆくことにしよう。あわせて、JavaScriptの文とブロック文について説明する。プログラムの内容も、少しずつ実用的なものにステップアップしてゆく。

1. サンプル・プログラム
2. 4年に一度のうるう年
3. 正確なうるう年判定
4. 式とブロック文
5. 練習問題：if〜else文
6. 練習問題：セミコロンの役割
7. コラム：ExcelのIF関数、他言語の制御文、フロー図
8. 参考サイト

ダウンロード

4年に一度のうるう年――入力した西暦年がうるう年かどうかを判定するプログラムが "ifElse1.html" である。

ifElse1.html を実行

  19: <script>
  20: /**
  21:  * 判定と画面表示
  22: */
  23: function ifElse1() {
  24:     //変数宣言
  25:     let year = document.getElementById('year').value;   //西暦年
  26:     year = parseInt(year, 10);                          //10進整数化
  27: 
  28:     //うるう年判定（間違いがある）
  29:     let ret = '平年'
  30:     if (year % 4 === 0) {
  31:         ret = 'うるう年';
  32:     }
  33: 
  34:     //結果を表示する
  35:     document.getElementById('ret').innerHTML = ret;
  36: }
  37: </script>

これまで何度か出てきた if文を使って、「4年に一度」の判定をプログラムに実装した。
if文は if (式) のように用い、式が true のとき、それに続くブロック {...} で囲まれた中身）を実行する。

このプログラムでは、まず、判定結果を格納するString型変数 ret に '平年' を代入しておく。
次に、if文を使い、西暦年が格納されたNumber型変数 year の4の剰余を計算し、計算結果が0でない（4で割り切れる）場合は、変数 ret に 'うるう年' を代入する。
最後に、変数 ret の内容を表示する。

「4年に一度、うるう年」というのは、じつは不正確である。
現在の西暦であるグレゴリオ暦で、うるう年は次のように定義されている。

1. 4で割り切れる年はうるう年である。
2. ただし、100で割り切れる年は平年である。
3. ただし、400で割り切れる年はうるう年である。

西暦2000年は400で割り切れたので、うるう年だった。西暦2100年は100で割り切れるので、平年である。

ifElse2.html を実行

  19: <script>
  20: /**
  21:  * 判定と画面表示
  22: */
  23: function ifElse2() {
  24:     //変数宣言
  25:     let year = document.getElementById('year').value;   //西暦年
  26:     year = parseInt(year, 10);                          //10進整数化
  27:     let ret;
  28: 
  29:     //うるう年判定（正確なもの）
  30:     if (year % 400 === 0) {
  31:         ret = 'うるう年';
  32:     } else if (year % 100 === 0) {
  33:         ret = '平年';
  34:     } else if (year % 4 === 0) {
  35:         ret = 'うるう年';
  36:     } else {
  37:         ret = '平年';
  38:     }
  39: 
  40:     //結果を表示する
  41:     document.getElementById('ret').innerHTML = ret;
  42: }
  43: </script>

これをプログラムにしたのが "ifElse2.html" である。
if～else文は次のようにして使う。

if (式1) {
    ブロック1
} else if (式2) {
    ブロック2
} else (式3) {
    ブロック3
}

1. もし式1がtrueならブロック1を実行する。
2. 式1がfalseであり、式2がtrueならブロック2を実行する
3. 式1，式2がともにfalseであり、式3がtrueならブロック3を実行する。

式2・ブロック2は2つ以上書くことができる（必要がなければ省略できる）が、最初のif文と最後のelse文は各々1つずつである。

ここで if～else文 の順序に気をつけよう。
if (year % 4) を先頭に持ってくると、西暦2100年もうるう年になってしまう。
まず、グレゴリオ暦の定義を次のように並べ替える必要がある。

1. もし西暦年を400で割り切れれば、うるう年である。
2. そうでなければ、西暦年を100で割り切れれば、平年である。
3. そうでなければ、西暦年を4で割り切れれば、うるう年である。
4. そうでなければ、平年である

フロー図にすると下図のようになる。

JavaScriptでは命令を文（statement）と呼び、セミコロン ; で区切る。

ret = 'うるう年';

複数の文をまとめてブレース {...} で区切ったものをブロック文と呼ぶ。
if～else文 は、条件によって、それに続くブロック文を実行するか否かを制御していると言える。

なお、"ifElse2.html" のようにブロック文の中の式が1つしかない場合、ブレース {...} を省略して次のように書くこともできる。

if (year % 400 === 0)      ret = 'うるう年';
else if (year % 100 === 0) ret = '平年';
else if (year % 4 === 0)   ret = 'うるう年';
else                      ret = '平年';

しかし、あとでプログラムを修正・改変するときに式が増えるといけないので、最初からブレース {...} で囲んでおいた方がメンテナンス性は高まる。

「2.1 変数と定数 - グローバル変数とローカル変数」において、let 宣言した変数は、宣言したブロック内（ブロックスコープ）で通用するローカル変数になると説明した。
実用で使うことはあまりないが、制御を伴わないブロック文を使って、この作用を確認しておこう。

let1.html を実行

  19: <script>
  20: //ページのロード時に実行
  21: window.onload = function() {
  22:     let i = 1;                  //変数宣言・その1
  23:     {
  24:         let i = 2;              //変数宣言・その2
  25:         {
  26:             let i = 3;          //変数宣言・その3
  27:             document.getElementById('let1').innerHTML = i;
  28:         }
  29:         document.getElementById('let2').innerHTML = i;
  30:     }
  31:     document.getElementById('let3').innerHTML = i;
  32: }
  33: </script>

ローカル変数 i を3つ宣言しているが、各々の i は、お互いに影響を及ぼさないことがわかる。
ブロック文の中でのみ必要となる作業用変数は、ブロック文の中で let 宣言 して使うといい。

Pythonで "ifElse2.html" を書くと "ifElse3.py" 次のようになる。Pythonではブロック文をインデントで表す文法になっている。

  14: # うるう年判定（正確なもの）
  15: if year % 400 == 0:
  16:     ret = 'うるう年'
  17: elif year % 100 == 0:
  18:     ret = '平年'
  19: elif year % 4 == 0:
  20:     ret = 'うるう年'
  21: else:
  22:     ret = '平年'
  23: 

PHPの実装例は「PHPで閏年（うるう年）かどうか判定する」をご覧いただきたい。
他の言語も、おおむねJavaScriptと書き方は似ている。

制御の流れを表すのに、よくフロー図（流れ図、フローチャート）を使う。本文中でも紹介した。
「1.3 四則計算と変数」のコラムで紹介したプログラミング電卓付属の「プログラム・ライブラリ」にもフロー図が掲載されており、とても参考になった。
プログラミングに慣れるまでは、手間を惜しまず、自力でフロー図を書くことをお勧めする。

また、プログラミングに慣れた方でも、プログラムをフロー図にして見直すことで、条件式を正規化することなどして、制御の流れをシンプルにすることができる場合がある。
短くシンプルなプログラムほどバグが少ない。一度、自作プログラムを見直してみてはいかがだろうか。

• オリンピック・イヤーは閏年（うるう年）か？：ぱふぅ家のホームページ
• PHPで閏年（うるう年）かどうか判定する：ぱふぅ家のホームページ