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」句を使用して別の処理を提供する制御構造です。基本的な構造は以下の通りです。

JavaScript

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

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

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

JavaScript

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

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

JavaScript

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

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

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

JavaScript

// 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 ）を試しています。

比較演算子と論理演算子

　条件式を作成するために、比較演算子（==、!=、<、>など）や論理演算子（&&、||、!）を使用できます。これにより、複雑な条件を構築できます。

JavaScript

if (年齢 >= 18 && 国籍 === "日本") {
	// 18歳以上で日本国籍の場合に実行
}

Sample 1

　ボタンを押すとふたつのカードの比較結果が表示されます。同じ数字なら「同じ！」と、違う数字なら「はずれ」と表示されます。非常に原始的な例ですが、実際に神経衰弱ゲームを作る際にも同じような処理を行うことになります。

神経衰弱の判定例

カード１：
カード２：

HTML

<p class="bd">神経衰弱の判定例</p>
<p>
	カード１：<input type="number" id="i0" value="3"><br>
	カード２：<input type="number" id="i1" value="5"><br>
	<button onclick="check()">Check</button>
</p>
<p id="result"> </p>

JavaScript

function check() {
	let a = document.getElementById("i0").value;
	let b = document.getElementById("i1").value;
	if (a == b) {
		document.getElementById("result").textContent = "同じ！";
	} else {
		document.getElementById("result").textContent = "はずれ";
	}
}

Sample 2

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

JavaScript

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'>");
}