FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

JavaScriptの基本(その4)「if判定」

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;

elseelse 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を使ったアプリ開発時に役立ててください。

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。