JavaScriptはプログラマーの人気1位の言語と言われています。ブラウザで唯一動作が保証されているプログラミング言語ですし、サーバーサイドではNode.jsとして動作します。さまざまな分野で使われているプログラミング言語、それがJavaScriptです。
1つのプログラミングを習得すれば、他のプログラミング言語の学習も容易になります。まずJavaScriptをしっかりと学んでみましょう。
この記事ではそんなJavaScriptを学ぶ上で良くある疑問を、なるべく分かりやすく解説します。今回は「if判定」について解説します。
if文の基本
JavaScriptのif文は以下のように書くのが基本です。
const a = 100;
if (a == 100) {
console.log('aは100です');
} else if (a == 200) {
console.log('aは200です');
} else {
console.log('aは100でも200でもありません');
}
==と===の違い
if文では == と === の2つを使い分けられます。基本的に === を使うようにしてください。以下のように違いがあります。
| 条件 | 結果 |
|---|---|
| '1' == 1 | true |
| '1' === 1 | false |
| '1' == true | true |
| '1' === true | false |
| '0' == false | true |
| '0' === false | false |
| '' == false | true |
| '' === false | false |
== は判定が緩く、文字列を自動的に数字に変換したり、数値を真偽値に変換して判定します。そのため、予期していない判定結果になる可能性があります。 === や !== を使って判定する方がお勧めです。
判定の条件
=== や == を使わずにif文を記述できます。
if (a) {
// aがtrueだった場合
} else {
// aがfalseだった場合
}
=== や == を使わない場合、以下のように判定されます。
| 条件 | 結果 |
|---|---|
| ''（空文字） | false |
| 空文字ではない文字列 | true |
| 0 | false |
| 0以外の数字（マイナスを含む） | true |
| null | false |
| undefined | false |
入力されたテキストを判定する場合、以下のように書いてしまうと " " とスペース一つでチェックを通過してしまいます。
if (inputValue) {
// " " でもOK
}
trim や正規表現を使ってスペースを除去すると良いでしょう。
if (inputValue.trim()) {
// 文字列の前後にある " " や " " は除去されます
}
オブジェクトの比較
if文で文字列、数字、真偽値を比較するのは簡単ですが、配列やオブジェクトの比較は単純にはできません。
const a = {a: 'b', c: 'd'};
const b = {a: 'b', c: 'd'};
console.log(a === b); // false
console.log(a == b); // false
配列も同じです。
const d = [1, 2]; const e = [1, 2]; console.log(d == e); // false console.log(d === e); // false
他にも日付型（newするもの）も困難です。
const f = new Date('2023-09-01');
const g = new Date('2023-09-01');
console.log(f == g); // false
console.log(f === g); // false
オブジェクトや配列を比較する際に、JSON.stringifyを使うこともできますが、キーが同じ順番でないと一致が確認できません。
const a = {a: 'b', c: 'd'};
const b = {a: 'b', c: 'd'};
console.log(JSON.stringify(a) === JSON.stringify(b)); // true
const c = {c: 'd', a: 'b'}; // キーの順番を変えただけ
console.log(JSON.stringify(a) === JSON.stringify(c)); // false
複数条件の判定
a = b かつ c = d といった比較の場合には && を使います。
if (a === b && c === d) {
// 両条件が一致する場合
}
a = b または c = d といった比較の場合には、 || を使います。
if (a === b || c === d) {
// 両条件のいずれかが必置する場合
}
さらに a = b かつ c = d 、 または e = f という比較の場合には、以下のようになるでしょう。
if ((a === b && c === d) || e === f) {
// 条件にマッチする場合
}
波括弧を使わずに書く
if文で波括弧を省略して書けます。多くの場合、条件にマッチした場合にreturnで何らかの結果を返します。
function Hello(name) {
if (name === 'Taro') return '太郎';
if (name === 'Jiro') return '次郎';
return '三郎'
}
他にも以下のように書けます。波括弧がない場合には、コードは1行しか書けません。
let f;
if (100 === 100)
f = 100;
else や else if も使えます。
const a = 100;
if (a == 100)
console.log('aは100です');
else if (a == 200)
console.log('aは200です');
else
console.log('aは100でも200でもありません');
三項演算子を使う
if文の分岐に応じて変数の値を分けたい場合があります。
let b = 100;
if (a) {
b = 200;
}
console.log(b); // aがtrueなら200、falseなら100
これはletを使わずに、以下のように書けます。
const b = a ? 200 : 100;
三項演算子は複数重ねられますが、コードが読みづらくなるでしょう。
// aがtrueなら100。aがfalseでcがtrueなら200、cがfalseなら300 const c = a ? 100 : (c ? 200 : 300);
この場合、関数に分けてしまうのがお勧めです。
const c = getValue();
function getValue() {
if (a) return 100;
if (c) return 200;
return 300;
}
まとめ
if文はよく使いますので、使い方をきちんと覚えましょう。 == を使っていると不具合につながりやすいので、 === の利用をお勧めします。
ニフクラ mobile backendではJavaScript向けにSDKを提供しています。ぜひJavaScriptを使ったアプリ開発時に役立ててください。
