論理演算子のアンドの特殊用法について、学んでおきます。
すでに、論理演算子については書いてきました。前の記事もご参考ください。
論理演算子の基本については、こちら
論理演算子OR「||」の特殊な用法についてはこちらです。
ORのところでも書きましたが、人の書いたコードを読むとき、自分が理解していないような記法が使われていたりすると、そこで全くプログラムの動きがわからなくなってしまいます。
なので、特殊な記法であっても読み解く必要があります。
自分ではこんな変な記法は使わない、という場合でも、知っておく必要があるんですよね。
なかなかプログラミングとは難しいものですよ。
ANDの特殊記法
ではサンプルコードをみてみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
// -------------------- // [1] 普通の AND の使い方 var value1 = true; var value2 = false; var result = value1 && value2; console.log(result); // false と表示される // -------------------- // [2] 普通ではない AND の使い方 var value1 = 10; var value2 = 0; var result = value1 && value2; console.log(result); // 0 と表示される // -------------------- // [2] 普通ではない AND の使い方 var value1 = 0; var value2 = 10; var result = value1 && value2; console.log(result); // 0 と表示される // -------------------- // [3] 普通ではない AND の使い方 var value1 = 5; var value2 = 10; var result = value1 && value2; console.log(result); // 10 と表示される // -------------------- // [3] 普通ではない AND の使い方 var value1 = 10; var value2 = 5; var result = value1 && value2; console.log(result); // 5 と表示される // -------------------- // [4] 普通ではない AND の使い方をした値の表示 var flag = false; var value = flag && 'test'; console.log(value); // false と表示される // -------------------- // [5] 普通ではない AND の使い方をした値の表示 var flag = true; var value = flag && 'test'; console.log(value); // test と表示される // -------------------- // [6] 普通ではない AND の使い方をした値の表示 var flag1 = true; var flag2 = true; var flag3 = false; var value = flag1 && flag2 && flag3 && 'test'; console.log(value); // false と表示される // -------------------- // [7] 普通ではない AND の使い方をした値の表示 var flag1 = true; var flag2 = true; var flag3 = true; var value = flag1 && flag2 && flag3 && 'test'; console.log(value); // test と表示される |
特殊用法として使われるのは[4][5][6][7]の使い方です。これを説明するために[1][2][3]を書いています
[1]は普通の使い方ですね。値が true か false だと、普通の論理演算です。
[2]は、ちょっと普通じゃないです。数値と数値を「&&」でつなぐと、false属性があるものが返ります。[2]が2つありますが両方とも同じですね。
[3]は、10 が返ります。5は10は true 属性を持つので、後ろに指定した値が表示されます。非常にわけがわかりませんが、こんな仕組みがあります。この記述方法は実際にはほぼ使い道がなく読みにくいので通常はみかけません。
ところが、[4]と[5]になると、みかけます。これは主にReactというライブラリを使うときに見かけることが多いような気がしますが、特にReactの何かを使っているということではなくて、JSの標準的な文法なんです。
ああ、読みにくい。
何をしているかというと、「test」という値を表示するかどうか、という判断を flag のBoolean 値によって判断しているのです。
Reactのライブラリに描画を任せる場合には、ある要素というかオブジェクトを「描画してくれ!」と命令を出すのですが、そのときにそのオブジェクトに false属性の値がわたされると、描画しないんです。
[4][5]の例のように、console.log に値を渡す場合は、false と描画されますが、Reactに描画させる場合は false は取り除かれるんです。
なので、[6][7]の記法が成り立ちます。
フラグが何個もある場合、全てが true の場合のみ、描画して どれかが false ならば、描画しない、という処理を行うために、こういう記法がされるわけです。
いやあ、超絶ややこしいです。
正直いって「読みやすいコード」を推奨している私としては、こんな書き方をされているプログラムは、ひどい糞コードに思えるのですが、React界隈では流行っている記法なので、よく見かけるんです。ぶっちゃけますが、超ダサー、というコードなのですが、React好きで、物珍しいことが好きで「最新」が好きな二流のプログラマに人気がある記法になります。
うちのページで読んでいる人には、こんな糞コードは書いてほしくないのですが、しかし、この記述方法を知らないと、二流の人に「こんなコードもしらないの?」みたいに馬鹿にされたりするので、きっちり知っておかないといけません。
プログラマって、なかなか疲れますが、まあ、いいでしょう。
まとめると
ということで、下記のコードの[A]と[B]はほぼ同じ処理になります。
1 2 3 4 5 6 7 8 9 |
// flag は boolean だとする // [A] var result = flag1 && flag2 && flag && value1; // [B] var result = null; if (flag1 && flag2 && flag3) { result = value1; } |
[B]の形式で書くと、多くの(JS以外も含む)プログラマにとっては読みやすいのですが、JavaScript で React を書いて、ブイブイ言わせるような、イケイケ最新プログラマにとっては、[A]の書き方が「ナウい」わけです。
私からしたら「珍走団」に近いくらいの、下手くそなプログラマなんだなと思いますが、時代の流れですかね。まあいいでしょう。ともかくも、「&&」を使ってこのように書けるということを理解しておいてください。
こんなわけわからない記法を書かなくてもいいのですが、再三書いているように、これを理解しないとプログラムの動きを読み取ることができません。
しっかり学んでおいてください。
Reactだけに限らない、JavaScriptの罠の一つ、です。
ひどいコードだとわかるから誰もがこの記法を避けて書かないコード、なのではなく、これをひどいコードだと見抜けない人が多くいて罠だとわからない人が「短く書けるからいいんだ!」と思い込んで多用するから、世の中にこのひどいコードがあふれんばかりに使われている、ということが、根深い罠になっています。