JavaScriptの条件分岐とは？
JavaScriptの条件分岐も他のプログラミング言語と同様にif文を使って書きます。
構文も変わらずに以下の通りです。
if (条件式) {
} else if (条件式) {
} else {
}条件分岐の方法は、if文以外にもswitch文で実装することもあります。
使い分けの目安はさまざまですが、あまり慣れてない時は
分岐数が少ない時はif文を使い、分岐数が多い場合はswitch文を使うで良いと思います。
switch文については、以下の記事で解説していますので、
気になった方は、覗いてみてください。
条件式とは？
条件式には結果がboolean型の「true」または「false」になる式を記入します。
実際にコードを見てみましょう。
以下のコードは「checkFlag」が「true」の時にif文の中にあるコードが実行されます。
const checkFlag = true
if (checkFlag) {
// checkFlagがtrueの時に実行したい処理
} JavaScriptの型について
JavaScriptは変数を宣言する際に型情報を書きません。
これはJavaScriptが「動的型付け」の言語であるためです。
例えば以下のコードは、結果が「true」または「false」になります。
const a = 1
const b = 1
console.log(a === b) // 結果：trueここで注意することがあります。
以下のコードは数字と文字列の比較なのに、結果が「true」になります。
const a = 1
const b = '1'
console.log(a == b) // 結果：trueこれは、「==」で比較する場合は、型を無視して判定するためです。
逆に「===」で比較する場合は、型と値の両方が一致しているかの判定をします。
そのため、なるべく「===」で比較するようにしましょう。
条件式に演算子を使用しない場合もある！？
JavaScriptではif文の条件式に演算子を使用しない場合もあります。
以下のコードを確認してください。
const toy = 'ball'
if (toy) {
console.log('trueの場合の処理')
} else {
console.log('falseの場合の処理')
}
// 結果：trueの場合の処理これは、条件式に書いた「toy」という変数に値が格納されているため、trueの判定になります。
変数の値が「null」または「undefined」の場合は、falseの判定になります。
以下のコードで確認してください。
const toy = null
if (toy) {
console.log('trueの場合の処理')
} else {
console.log('falseの場合の処理')
}
// 結果：falseの場合の処理この挙動を知らない場合、思わぬバグが発生する可能性もあるため、覚えておきましょう。
if文の使用例
次に、チェックボックスのON/OFFによって
アラートダイアログの表示内容を変更するコードを書いてみます。
ぜひ試してみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample</title>
</head>
<body>
<input type="checkbox" name="test" id="checkbox" onclick="getCheckHandler()">TEST
</body>
<script>
function getCheckHandler() {
const check = document.getElementById('checkbox').checked
if (check) {
alert('チェックされました(' + check + ')')
} else {
alert('チェックされていません(' + check + ')')
}
}
</script>
</html>上記の例では、checkという変数にboolean型の戻り値が入ってくるように実装しています。
そして、checkをif文の条件式に設定しています。
よって、分岐が正常に行われ、チェックボックスのONとOFFを検知することができています。
チェックONの場合
チェックOFFの場合
コードが少しスッキリする小技
慣れると便利な小技を紹介します。
上記のコード中に出てきたコードをすっきりさせたいと思います。
// 普通に書くと👇
alert('チェックされました(' + check + ')')
// スッキリさせると👇
alert(`チェックされました(${check})`)ポイントは「`」です。「バッククォート」と言います。[Shift] + [@]キーで入力できます。
バッククォートで囲むと変数をバインドすることができるようになります。
コードがスッキリしますし、開発効率も爆上がりなので、試してみてください。
まとめ
ここまで、JavaScriptの条件分岐について解説しました。
条件分岐はよく使うので、色々アレンジして挙動を確かめて、スキルアップしていきましょう。
ここまで読んでいただきありがとうございます。
