説明 | if文とは |
サンプル | if文のサンプル |
ネスト構造 if文の中にif文 | |
値が代入されているか(undefined) | |
nullを比較 | |
空文字を比較 | |
三項演算子 | |
比較演算子 | 比較演算子 |
論理演算子 | 論理積(&&) AかつB |
論理和(||) AまたはB | |
論理否定(!) Aではない | |
排他的論理和(^) |
if文とは
if (条件){ 処理 } //条件がtrueの時のみ処理しfalseでは処理しない |
|
// elseを書く場合 if (条件){ 処理 }else 処理 } //条件がtrueとfalseそれぞれで処理する |
|
// else ifとelseを書く場合 if (条件){ 処理 } else if (条件) { 処理 } else { 処理 } //複数の条件と条件にあてはまらない場合の書き方 |
- 条件が合致する場合、配下のブロック{ }の処理が実行され、if文の処理は終了します。
- 条件が合致することをtrue(真)ともいいます。
- 条件が合致しないことをfalse(偽)ともいいます。
- 条件が合致しない場合、配下のブロック{ }の処理は実行されず、その下(else if/else/if文終了)に進みます。
- else ifは、1つ以上記述できます。省略可能です。
- elseのブロック{ }の処理は、どの条件も合致しなかったときに実行されます。elseは1つのみ記述できます。省略可能です。
if文のサンプル
<script>
const a = 1;
if (a === 0) {
console.log("0");
} else if (a === 1) {
console.log("1"); // 1が表示される
} else {
console.log("other");
}
</script>
4行目から12行目までがif文です。
7行目は、条件が合致する(aの値は1である)のでその配下の処理が実行されます。
8行目の処理が実行されif文を抜けます(終了します)。
ネスト構造 if文の中にif文
if文の中にif文を記述しています。ネストの構造です。入れ子ともいいます。
<script>
const a = 1;
const b = 1;
if (a === 1) {
if (b === 1) {
console.log("1"); //1が表示される
}
}
</script>
値が代入されているか(undefined)
if (typeof 変数 === "undefined") |
- undefinedは変数に値が代入されていない状態を表します。
- undefinedを比較するときは、typeof演算子を使用します。
<script>
let a; //constの場合、値の代入がないとエラー
if (typeof a === "undefined") {
console.log("true"); // true 出力される
}
if (a) {
console.log("true");
} else {
console.log("false"); // false 出力される
}
const b = 3;
if (b) {
console.log("true"); // true 出力される
}
</script>
4行目は、typeof演算子でundefinedか比較しています。
8,16行目のように、変数のみでの判定もできます。
nullを比較
if (変数 === null) |
nullは中身が空の状態を表します。nullと空文字("")は別です。
<script>
const a = null;
if (a === null) {
console.log("true"); // true 出力される
}
if (a) {
console.log("true");
} else {
console.log("false"); // false 出力される
}
if (a === "") {
console.log("true");
} else {
console.log("false"); // false 出力される
}
</script>
空文字を比較
nullと空文字("")は別です。
<script>
const c = "";
if (c === "") {
console.log("true"); // true 出力される
}
if (c) {
console.log("true");
} else {
console.log("false"); // false 出力される
}
if (c === null) {
console.log("true");
} else {
console.log("false"); // false 出力される
}
</script>
三項演算子
変数 = 条件式 ? 値1 : 値2 |
- 条件式がtrueのとき、値1を返します。
- 条件式がfalseのとき、値2を返します。
<script>
const a = 1;
// 三項演算子
const b = a === 0 ? "true" : "false";
console.log(b); // falseが表示される
if (a === 0) {
console.log("true");
} else {
console.log("false"); // falseが表示される
}
</script>
5行目は、三項演算子です。
5,6行目をif文で書くと、8~12行目のようになります。
比較演算子
比較演算子は、2つの値を比べて条件を満たしていればtrue,そうでない場合はfalseを返します。
イコール3つ(===)は値と型を比較します。
比較演算子 | 説明 |
---|---|
a == b | aとbの値は等しい |
a === b | aとbの値は等しい かつ 型も等しい |
a != b | aとbの値は等しくない |
a !== b | aとbの値が等しくない または 型が等しくない |
a > b | aはbより大きい |
a >= b | aはbより大きい または 等しい |
a < b | aはbより小さい |
a <= b | aはbより小さい または 等しい |
論理積(&&) AかつB
if (左の条件式) && (右の条件式) |
- 左の式と右の式が両方ともtrueの場合、trueになります。それ以外はfalseです。
- 左の式がfalseの場合、右の式は判定(評価)されません。これを短絡評価(ショートサーキット評価 : Short-Circuit Evaluation)といいます。
<script>
const a = 2;
const b = 2;
if (a === 2 && b === 2) {
console.log("true"); // true 表示される
}
</script>
5行目は、左の式と右の式が共にtrueなので、trueになります。
論理和(||) AまたはB
if (左の条件式) || (右の条件式) |
- 左の式または右の式のどちらかがtrueの場合、trueになります。
- 左の式がtrueの場合、右の式は判定(評価)されません。これを短絡評価(ショートサーキット評価 : Short-Circuit Evaluation)といいます。
<script>
const a = 1;
const b = 2;
if (a === 2 || b === 2) {
console.log("true"); // true 表示される
}
</script>
5行目は、左の式はfalseですが右の式がtrueなのでtrueになります。
論理否定(!) Aではない
if !(条件式) |
- 式がfalseの場合にtrueになります。
- 式がtrueの場合にfalseになります。
<script>
const a = 1;
if (!(a === 2)) {
console.log("true"); // trueが表示される
}
if (!(a === 1)) {
console.log("true");
} else {
console.log("false"); // falseが表示される
}
</script>
4行目は値の比較でfalseになり、それを!で否定するのでtrueになります。
8行目は値の比較でtrueになり、それを!で否定するのでfalseになります。
排他的論理和(^)
if (左の条件式) ^ (右の条件式) |
- 左の式がtrueで右の式がfalseの場合、trueになります。
- 左の式がfalseで右の式がtrueの場合、trueになります。
- 左の式と右の式が両方ともtrueの場合、falseになります。
- 左の式と右の式が両方ともfalseの場合、falseになります。
<script>
const a = 2;
const b = 2;
if ((a === 2) ^ (b === 3)) {
console.log("true"); // trueが表示される
} else {
console.log("false");
}
if ((a === 3) ^ (b === 2)) {
console.log("true"); // trueが表示される
} else {
console.log("false");
}
if ((a === 2) ^ (b === 2)) {
console.log("true");
} else {
console.log("false"); // falseが表示される
}
if ((a === 3) ^ (b === 3)) {
console.log("true");
} else {
console.log("false"); // falseが表示される
}
</script>
5行目は、左の式がtrueで右の式がfalseなので、trueになります。
11行目は、左の式がfalseで右の式がtrueなので、trueになります。
17行目は、左の式と右の式が両方ともtrueなので、falseになります。
23行目は、左の式と右の式が両方ともfalseなので、falseになります。
以下は、wikiの短絡評価のリンクです。
https://ja.wikipedia.org/wiki/%E7%9F%AD%E7%B5%A1%E8%A9%95%E4%BE%A1
関連の記事