JavaScript

The JavaScript if statement is a conditional branching syntax for executing a specific block of code if the condition is true.

if ... else

　JavaScriptのif文は、プログラム内で条件に応じて異なるコードブロックを実行するための基本的な制御構文です。

　if文は、指定した条件式が真（true）の場合に、その条件が満たされた際に実行するコードブロックを定義し、条件が正しくない場合には「else」句を使用して別の処理を提供する制御構造です。基本的な構造は以下の通りです。

if (条件式) {
	// 条件が真の場合に実行されるコード
}

条件式

条件式は、真または偽を評価する式であり、通常は変数の値の比較や論理演算子の使用などによって構成されます。条件式が真の場合、if文の中のコードブロックが実行され、逆に条件式が偽の場合は何も実行されません。

　if文は単体で使用するだけでなく、複数の条件に基づいた条件分岐を作成するために、else文やelse if文と組み合わせて使います。

if (条件式) {
	// 条件が真の場合に実行されるコード
} else {
	// 条件が偽の場合に実行されるコード
}

　「else if」を使用すれば、さらに条件式を追加することができます。

if (条件式1) {
	// 条件1が真の場合に実行
} else if (条件式2) {
	// 条件2が真の場合に実行
} else {
	// どの条件も満たされない場合に実行
}

　else if はいくつでも追加可能。この場合、条件式1 が false ならば次の else if の条件式2 を検証し、また false ならばさらに次の条件へと移動していく。

　この条件式に指定されるのは、「結果が真偽値で得られるもの」です。true/false のリテラルや、真偽値の値を返す関数などもありますが、もっとも多用されるのは「比較演算子」という記号を使った式でしょう。簡単な例をあげてみます。

// x の数値が奇数の場合
var x = 123;
if (x % 2 == 0) {
	console.log(x + "は、偶数です。);
} else {
	console.log(x + "は、奇数です。);
}

// x の数値が偶数の場合
var x = 124;
if (x % 2 == 0) {
	console.log(x + "は、偶数です。);
} else {
	console.log(x + "は、奇数です。);
}

　これは、変数 x の値が偶数か奇数かを計算し表示する例です。ここでは、(x % 2 == 0) という式で条件を指定していますが、これは「 x % 2 と 0 は等しい」という意味です。これが成立すれば（ 2 で割った余りがゼロだから）偶数、そうでなければ奇数と判断されます。

　変数 x の値が変わると表示も変わります。ここでは全く同じ条件の if 文を使って、2種類の変数（ x = 123 と x = 124 ）を試しています。

比較演算子の一覧

　上記のサンプルで使ったのは「○○ == ××」といった式です。この == が、比較演算子です。比較演算子には、その他にも以下のようなものがあります。

==

左辺と右辺は等しい（同じ値と判断できる）

===

左辺と右辺は等しい（全く同じ値）

!==

左辺と右辺は等しくない（違う値と判断できる）

!===

左辺と右辺は等しくない（全く同じ値ではない）

<

左辺は右辺より小さい

<=

左辺は右辺と等しいか小さい

>

左辺は右辺より大きい

>=

左辺は右辺と等しいか大きい

　これらは、全て記号の右辺と左辺にある値を比較します。そして、それが正しければ true、正しくなければ false の値を返します。例えば、「A == B」というのは「AとBは等しい」と言う事を意味しますから、本当に2つの値が等しければ true になり、そうでなければ false となるわけです。

「==」と「===」の違い

　これらの中でやや分かりにくいのは「==」と「===」でしょう（同時に「!==」と「!===」もそうです）。これらの違いは、== および !== が「値が同じかどうか」のみをチェックするのに対し、=== および !=== が「値の種類も同じかどうか」までチェックする、という点です。例えば、こんな例を考えてみましょう。

var x = 123;
var y = "123";

if ( x == y )
	document.write("等しい");
else
	document.write("等しくない");

　このスクリプトの実行結果は、"等しい"と表示されます。123 と "123" を比較したとき、JavaScript は 2つの値を同じ種類の値に変換して両者を比較します。このため、2つの値は同じだと見なされ、true が返されるのです。

　が、条件部分を( x === y )とすると、今度は"等しくない"と表示されます。123 と "123" は、片方は数値、片方は文字列ですから同じ値ではありません。このため結果は false となるわけです。

複数分を実行する{ }

　上記のスクリプトを少し修正して、以下のようにしてみましょう。これを実行するとどうなるでしょうか。

var x = 123;
var y = "123";

if ( x == y )
	document.write( x + "と" + y + "は、" );
	document.write("等しい");
else
	document.write( x + "と" + y + "は、" );
	document.write("等しくない");

　不思議な事に、実行すると何も結果が表示されなくなります。これは、どちらも実行されていないからです。と言うと不思議に思うでしょうが、要するに「エラーになって止まっている」のです。

　ここでは、条件の後と else の後に、それぞれ 2つの文が記述されています。実を言えば、if で実行できるのは「１つの文」だけなのです。2つ以上の文は記述できません。

　もちろん、現実問題として「１つの文しか書けない」と言うのでは役に立ちません。そこで JavaScript では、「複数の文をひとまとめにして扱う」ための仕組みが用意されています。それは { } 記号です。

　この { } の中に記述された文は、いくつあろうと文法上は１つの文として扱われます。例えば、今の例を修正しましょう。

var x = 123;
var y = "123";

if ( x == y ) {
	document.write( x + "と" + y + "は、" );
	document.write("等しい");
} else {
	document.write( x + "と" + y + "は、" );
	document.write("等しくない");
}

　このようにすると、スクリプトは問題なく動作するようになります。見ればわかるように、ここでは if の文は、

if ( ○○ ) { ... } else { ... }

　このように条件が正しい時、正しくない時、それぞれで複数行の文が実行できるように { } で実行する処理をくくっています。このようにする事で構文の中にいくつでも文が書けるわけです。

　この { } 記号は、if 以外でも様々なところで使われます。ここで、その基本的な役割について理解をしておいてください。

3項演算子について

　if 文は、「条件に応じてどちらかの処理を行う」という場合の基本となるものですが、例えば「条件によって変数に代入する値を変える」と言うような場合には、もっと簡単な書き方ができます。

　それは「3項演算子」と呼ばれるものを使うのです。これは、以下のような形で記述されます。

条件 ? 正しい場合の値 : そうでない場合の値

　変数への代入などを行う際、このようにして式を記述しておく事で、設定された条件の真偽に応じて異なる値を代入させる事が出来ます。例えば、

var val = x % 2 == ? "偶数" : "奇数";

　このようにすると、変数 x の値が偶数か奇数かで、変数 val に異なる値を設定する事が出来ます。偶数ならば"偶数"、そうでなければ"奇数"というテキストが val には設定されます。

Sample source

　日付を取得してその値を２で割った余りが１の場合（奇数日）は 01.jpg の画像を、それ以外の場合（偶数日）は 02.jpg の画像を書き出す。

myDate = new Date();
myD = myDate.getDate();
if (myD%2 == 1) {
	document.write("今日は奇数日<br><img src='../../imgs/01.jpg' alt='picture01'>");
} else {
	document.write("今日は偶数日<br><img src='../../imgs/02.jpg' alt='picture02'>");
}