JavaScript if と else 、「==」と「===」 | プログラミングアカデミーゼロプラスワン

Boolean の記事にも書きましたが、true か false かの判定では、if を使います。

2018.10.10

root s 150x150 - JavaScript if と else 、「==」と「===」

JavaScript Booleanと true属性truthy false属性falsy

https://zero-plus-one.jp/javascript/javascript-boolean-falsy

Boolean は真偽値を表し、コンピュータプログラムでは非常に重要な型です。Boolean は true = 真と false = 偽のどちらかの値のみをとります。コンピュータは、プログラミングで動いていますが、つきつめるところ、電気が流れた状態と電気が流れない状態の２つの値を組み合わせて数値を表したり、条件を判断させたりして動作が変わるようになっています。この電気が流れていない状態を 0 、電気が流れている状態を 1 で表現して、0と1とでコンピュータは成り立っている、という表現がされます。これをプログラミング上で扱うと、Bool...

if は「if (変数 === 値) { 処理1 }」という形も書けますし、 else を組み合わせて、「 if (変数 === 値) { 処理1 } else { 処理2 } 」このような書き方もできます。

これは、日本語でいうと、「もし変数が値と一致しているなら処理1を実行する。それ以外の場合は処理2を実行する」と、読むことができます。

if と else

次のようなサンプルを書いて動かしてみます。

var value1 = 10;
var value2 = 10;

if (value1 === value2) {
  console.log('[1]value1 と value2 は一致する');     // 表示される。
}

var value1 = 10;
var value2 = 20;

if (value1 === value2) {
  console.log('[2]value1 と value2 は一致する');     // 表示されない
}

if (value1 === value2) {
  console.log('[3]value1 と value2 は一致する');
} else {
  console.log('[3]value1 と value2 は一致しない');   // こちらが表示される
}

if ((value1 * 2) === value2) {
  console.log('[4]value1 * 2 と value2 は一致する');   // こちらが表示される
} else {
  console.log('[4]value1 * 2 と value2 は一致しない');
}

if (value1 !== value2) {
  console.log('[5]value1 と value2 は一致しない');     // 表示される
}

if (!(value1 === value2)) {
  console.log('[6]value1 と value2 は一致しない');     // 表示される
}

// 実行結果
// [1]value1 と value2 は一致する
// [3]value1 と value2 は一致しない
// [4]value1 * 2 と value2 は一致する
// [5]value1 と value2 は一致しない
// [6]value1 と value2 は一致しない

var value1 = 10;

var value2 = 10;

if (value1 === value2) {

console.log('[1]value1 と value2 は一致する'); // 表示される。

}

var value1 = 10;

var value2 = 20;

if (value1 === value2) {

console.log('[2]value1 と value2 は一致する'); // 表示されない

}

if (value1 === value2) {

console.log('[3]value1 と value2 は一致する');

} else {

console.log('[3]value1 と value2 は一致しない'); // こちらが表示される

}

if ((value1 * 2) === value2) {

console.log('[4]value1 * 2 と value2 は一致する'); // こちらが表示される

} else {

console.log('[4]value1 * 2 と value2 は一致しない');

}

if (value1 !== value2) {

console.log('[5]value1 と value2 は一致しない'); // 表示される

}

if (!(value1 === value2)) {

console.log('[6]value1 と value2 は一致しない'); // 表示される

}

// 実行結果

// [1]value1 と value2 は一致する

// [3]value1 と value2 は一致しない

// [4]value1 * 2 と value2 は一致する

// [5]value1 と value2 は一致しない

// [6]value1 と value2 は一致しない

[1][2]でわかることは、if は丸かっこ「()」で囲まれた中の条件が正しければ(trueなら)、直後の大かっこ「{}」に囲まれたプログラムを実行し、正しくなければ(falseなら)、else がない場合は実行しない、ということです。

[3][4]では、if と else の組み合わせで、条件に一致しない場合は、else 後の大かっこ「{}」の部分を実行していることがわかります。

not否定、を表すのは、「!」の記号

[5]でわかるのは、「===」の記号の並びではなく「!==」の記号の並びを使うと、一致しない、ことを調べることができるということです。

多くのプログラム言語では、「!=」は、「≠ ノットイコール」の意味を表します。

[6]でも使っていますが、「!(値)」は、値がbooleanのときに、それを true と false を入れ替えて使っています。「if (!value) {}」という書き方で、value が false の場合には実行する、という書き方をしています。

大かっこは省略できる

このようなサンプルを動かしてみます。

var value1 = 10;
var value2 = 20;

if (value1 === 10) 
  console.log('[5]value1 は 10です');           // これは表示される

if (value2 !== 20) 
  console.log('[6]value2 は 20ではないです');   // これは表示されない

console.log('[7]' + value2);                  // これは表示される

// 実行結果
// [5]value1 は 10です
// [7]20

var value1 = 10;

var value2 = 20;

if (value1 === 10)

console.log('[5]value1 は 10です'); // これは表示される

if (value2 !== 20)

console.log('[6]value2 は 20ではないです'); // これは表示されない

console.log('[7]' + value2); // これは表示される

// 実行結果

// [5]value1 は 10です

// [7]20

大かっこは省略することができて、その後の1つの命令を動かすことができるのですが、[7]で示されている部分のように、処理の区分けが難しくなる場合があります。

つまり、

if (true) 
  console.log('処理A');   // これは表示される
  console.log('処理B');   // これは表示されない

if (true)

console.log('処理A'); // これは表示される

console.log('処理B'); // これは表示されない

上記のように書かれる時と下記のようにかかれる時とで動きが異なるようになってしまいます。

if (true) {
  console.log('処理A');   // これは表示される
  console.log('処理B');   // これは表示される
}

if (true) {

console.log('処理A'); // これは表示される

console.log('処理B'); // これは表示される

}

ぱっと見て、この2つは区別がつきにくく、プログラムの読み間違いが多く発生するので、if や else の大かっこの省略は行うべきではないこと、つまりアンチパターン、という書き方だということになります。

比較演算子「==」と「===」

上で学んだ通り、「 if (変数 === 値) { 処理1 } else { 処理2 } 」このような書き方で処理がわけられるということがわかりました。

ここで、値を比較するための、「===」という記号の並びについて、詳しく理解しておきます。

イコールの記号の使われ方についてですが、数学でいうところの「A = B」は、「AとBは一致している」という表現になります。

しかし、JavaScriptのプログラムにおいては、「A = B」は、変数Aに変数Bの値を代入する、ということになります。一致をみるものではありません。

そこで、プログラミングの中で一致をみるために、「=」の記号を連続してつかって「==」で表現することになっています。

ここからが重要なのですが、JavaScriptの場合はイコールが2文字の「==」はほとんど通常のプログラミングでは使われていません。イコールが3文字の「===」を使います。

サンプルを動かします。

var value1 = 10;
var value2 = '10';

if (value1 == value2) {
  console.log('[1]value1 と value2 は一致しているようだ'); // 表示される
}

if (value1 === value2) {
  console.log('[2]value1 と value2 は厳密には一致していない'); // 表示されない
}

if (value1 === Number(value2)) {
  console.log('[3]value1 と value2を数値変換したら、厳密に一致している'); // 表示される
}

var value1 = 10;

var value2 = '10';

if (value1 == value2) {

console.log('[1]value1 と value2 は一致しているようだ'); // 表示される

}

if (value1 === value2) {

console.log('[2]value1 と value2 は厳密には一致していない'); // 表示されない

}

if (value1 === Number(value2)) {

console.log('[3]value1 と value2を数値変換したら、厳密に一致している'); // 表示される

}

JavaScriptの場合、変数の型が自動的に変換されるので、[1]の場合は、文字列と数値が変換された上で一致を確認するので表示されますが、[2]の場合は、厳密には、型が違うので、別物として扱われます。

プログラミングを行っていて難しいのは、このようなあいまいな判定が行われると動かさないかぎりは、どのような動きになるのか、一見ではわからないということになります。

他の人のコードを読み取る時、あるいは、以前に自分が書いたコードを読み取るときに、あいまいな処理がかかれていると「このプログラムはどういう処理が行われるんだ？」という疑問が残り、あいまいな理解になってしまうのです。

文字列を数値に変換したり、数値を文字列に変換することは、プログラムで書くことができるので、文字と数値を比較する場合には、かならず変換してから比較する、という処理を書くようにします。

なので「==」は使わずに、必ず「===」を使うようにする方が、プログラムの正確性が上がるということになります。

文字と数値をほんとに比較したい場合は、文字を数値に変換してから、厳密の一致を比較するという方法をとります。それが[3]のやり方です。

if (値) で判定するのは望ましくない。「==」を使わないというのと同程度に。

さて、この記事の最初にリンクした、Booleanについての記事の中で、値には false属性というものがあるというのを紹介しています。

「if (value) { } 」という書き方をする場合に、value には Boolean型だけではなく、さまざまな値が入りますが、そのときに、false属性をもった値

Boolean型false | undefined | null | 数値の0 | ''空文字 | NaN

これらの値が入ってきた場合には、falseとして扱われます。

これは、これらの値のどれかなら、false ということなのですが、これはそれぞれ実際にはあいまいなことが行われているということです。

「if (value) { } 」この書き方は、すなわち、「if (value == false) {} 」この書き方と同じことです。

JavaScriptの模範的な書き方として「==」ではなく「===」を使いなさい、と書かれているものは多いのですが「if (value) {}」という書き方をするべきではないと書かれているものは少ないようです。

より模範的な書き方として「if (value) {} 」このような書き方はさけるべきです。

じゃあ、どうするのか、というと、簡単です。

if (value === false) {}
if (value === undefined) {}
if (value === null) {}
if (value === 0) {}
if (value === '') {}
if (value === NaN) {}

if (value === false) {}

if (value === undefined) {}

if (value === null) {}

if (value === 0) {}

if (value === '') {}

if (value === NaN) {}

このように書けば、厳密なプログラムが書けるようになります。

少し記述量が短くなるからといって「if (value) {}」この書き方はなるべく避けたほうが、より読みやすいプログラムコードになります。明示的にBoolean型が入ることがわかっている変数とか、undefinedかオブジェクトかしか入らなさそうな変数を記載するときくらいですかね。

JavaScriptでは、短く書くこと、コード量をへらすことを「ショートハンド」といって、極限まで「ショートハンド」することが、よいことだとされると思い込んでいる人もいます。

実際にはこれはプログラムを読みにくくする、望ましくない書き方です。これを理解できている人はJavaScriptの中級者にも非常に少ない様子です。

うちのサイトを利用している人は、ぜひともこういうことを理解した上でJavaScriptを使いこなす上級者になっていってください。