JavaScriptで条件分岐を行う場合、いくつか方法はありますが、今回はif文を使用する方法を説明します。
if文の構文
JavaScriptでif文を使用する場合、以下のように記述します。
if (条件式) {
処理1
} else {
処理2
}
(条件式)が成立(真:true)すれば、ifの後ろに続くブロックと呼ばれる「{}」で囲われた処理(処理1)が実行されます。
(条件式)が不成立(偽:false)の場合、elseの後ろに続くブロック内の処理(処理2)が実行されます。
if文の例:条件が成立する
if文で、条件が成立するときの例です。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>かいけつプログラム</title>
</head>
<body>
<p>if文のサンプル</p>
<script>
var syohizei = 0.1;
if (syohizei == 0.1) {
alert(‘消費税率10%です’);
} else {
alert(‘消費税率10%ではありません’);
}
</script>
</body>
</html>
ブラウザで開くと、ポップアップで以下のメッセージが表示されます。
ifの条件式「syohizei == 0.1」ですが、「==」は演算子の一つで、左右の値が等しいかを判断し、真偽値(true, false)を返します。
if文の例:条件が成立しない
if文で、条件が成立しないときの例です。
syohizeiの値を0.08に変更します。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>かいけつプログラム</title>
</head>
<body>
<p>if文のサンプル</p>
<script>
var syohizei = 0.08;
if (syohizei == 0.1) {
alert(‘消費税率10%です’);
} else {
alert(‘消費税率10%ではありません’);
}
</script>
</body>
</html>
ブラウザで開くと、ポップアップで以下のメッセージが表示されます。
これは、「syohizei == 0.1」の結果がfalseになり、「else」の後ろの処理が実行されました。
if文の例:comfirm関数を使用する
comfirm関数は、JavaScriptがあらかじめ用意している関数です。
alert関数と似ていますが、alert関数が値を返さないのに対し、confirm関数は実行後に真偽値を返します。
confirm関数は、「OK」を押下すると「true」、「キャンセル」を押下すると「false」を返します。
if文とcomfirm関数を使用した例です。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>かいけつプログラム</title>
</head>
<body>
<p>if文のサンプル</p>
<script>
if (confirm(‘この処理を実行しますか?’)) {
alert(‘OKが選択されました’);
} else {
alert(‘キャンセルが選択されました’);
}
</script>
</body>
</html>
ブラウザで開くと、ポップアップで以下のメッセージが表示されます。
「この処理を実行しますか?」メッセージに「OK」と「キャンセル」ボタンが表示されています。
「OK」ボタンを押下します。
「キャンセル」ボタンを押下します。
複数の条件式で処理を分岐する
複数の条件式で処理を分岐させる場合、以下のように記述します。
if (条件式1) {
処理1
} else if (条件式2) {
処理2
} else if (条件式3) {
処理3
:
} else {
処理4
}
2つ目以降の条件式は「else if (条件式)」と記述します。
「else」は条件分岐の最後に記述しますが、必要がなければ記述しなくてもよいです。
まとめ
JavaScriptでif文を使用して条件分岐をする方法について説明しました。
if文の条件式には真偽値(true,false)となる式を渡します。comfirm関数のように関数を渡すこともできます。
confirm関数は実行後に真偽値を返します。
条件式は1つでもよいですが、複数記述することもできます。
以上、JavaScriptでif文を使用した条件分岐の説明でした。