[Javascript] 三項演算子より短く変数代入する方法

2019年2月4日

テクノロジー プログラミング

プログラムを複数人のチームで開発する時に、他の人が読みやすくする事を前提にプログラミングを行う事をアジャイル開発などで重要視している人も多いと思います。 世の中でチーム開発でプログラミング作業をやっている感覚の人、プログラムコーディングという作業はどうしても一人で行うという性質から、チーム開発っていう足かせを苦に思っているエンジニアも少なからずいるという話を聞く事もあります。 他人が読みやすいというプログラムは、言い換えれば誰でも読めるプログラムという事になり、チーム開発において、チームメンバーが誰でも読めるプログラムというのは、一番低いレベルの人に合わせるという風にも考えられる。 そんな非効率な開発作業をしていて、果たして発展性がどこにあるのか、いささか疑問ではあるが、今日も一人で黙々とコーディングをするのが好きな僕が、プログラムを読みにくくする原因のひとつに「三項演算子」をあげていたんですが、最近では、逆に三項演算子で変数代入した方が効率がいい事に今更ながら気が付いて、使いまくっています。 そして、今回三項演算子よりもはるかに短い文字数で変数代入する事がわかり、この書き方でトラブらないために、少し実験しておく事にします。

三項演算より短い書き方とは・・・

今回の言語はJavascriptです。 三項演算子は、簡単なif文を1行で書けるので、「値があるかないかという判定を基準とした変数代入」や「true,falseの簡易判定」などで使うようにしています。 そして今回は、連想配列でkey値が無い場合などで、typeofで判定して、ある場合と無い場合の値をそれぞれ変数代入していたのをif文で記述すると、以下のようになります。 var arr = {a:1,b:2}; var num; if(typeof arr.c !== "undefined"){ num = 3; } else{ num = arr.c; } console.log(num); > 3 同じ内容を三項演算子でコーディングすると・・・ var arr = {a:1,b:2}; var num = (typeof arr.c === "undefined") ? 3 : arr.c; console.log(num); > 3 これを論理演算子での書き方でより短く以下のように記述する事ができます。 var arr = {a:1,b:2}; var num = arr.c || 3; console.log(num); > 3 確かにこういう書き方しているOSSソースを見た事がある!! そしてなんてシンプルにかけるんだ!という感動。 「おまえアホか!」と今更ながら指さされてもいいけど、結構感動してこのブログ記事を書いています。

複数繋げても書ける

この論理演算子での書き方をすると、複数の論理演算を繋げて記述する事ができるので、三項演算子よりも便利に使う事ができます。 ※三項演算子を数珠つなぎにしたい場合は、ネストを考慮して、()でくくって上げる必要があります。 サンプルは以下のようになります。 var arr = {a:1,b:2}; var num = arr.c || arr.d || arr.e || 3; console.log(num); > 3 何個でも後ろに繋げられます。 判定がundefinedの場合には無視され、trueになる場合に返り値になり代入されます。

0やnullやfalseの場合はどういう挙動になるのか?

var arr = {a:1,b:2}; arr.d = 1; var num = arr.c || arr.d || 3; console.log(num); > 1 var arr = {a:1,b:2}; arr.d = 0; var num = arr.c || arr.d || 3; console.log(num); > 3 var arr = {a:1,b:2}; arr.d = null; var num = arr.c || arr.d || 3; console.log(num); > 3 var arr = {a:1,b:2}; arr.d = false; var num = arr.c || arr.d || 3; console.log(num); > 3 わかりますかね?0,null,falseもシカトされてしまいます。 ここでわかったことは、この代入方法は、true判定されるものしか代入できないという事です。 この点は三項演算子で掛けという事ですね。 なんせ論理演算ですからね。

&&で書くとどうなるのか?

プログラマーとして興味が湧いてきたのは、"||"で書けるのであれば、"&&"でも書けるのではないか? 書いたらどうなるのか? という事でやってみた・・・ var arr = {a:1,b:2}; var num = arr.a && arr.b; console.log(num); > 2 var arr = {a:1,b:2}; var num = arr.a && arr.c; console.log(num); > undefined どうやら、&&で区切られている全ての判定がtrueの場合に一番右端の値が代入されるようです。 中に一つでもundefinedがあれば、"undefined"がかえってしまいます。 これは使い物になりませんね。

undefined,0,null,falseを"&&"で使ってみるとどれが返る?

var arr = {a:0,b:false,c:null,d:undefined}; var num = arr.a && arr.b && arr.c && arr.d; console.log(num); > 0 var arr = {a:0,b:false,c:null,d:undefined}; var num = arr.d && arr.c && arr.b && arr.a; console.log(num); > undefined var arr = {a:0,b:false,c:null,d:undefined}; var num = arr.c && arr.d && arr.b && arr.a; console.log(num); > null この結果から、どうやら&&を使うと、一番左側の値が結果として現れるようだ。 そして、0,null,false,undefinedには順位はなく、とにかく左らしい。

最後に

単純に三項演算子を短く書くというつもりで使うととんでもない事故になってしまうという事がわかりますでしょうか? 型をあまり重要視しないjavascriptなんですが、trueの扱いをしっかりと理解してこの論理演算子代入を使用しましょう。 これまでif文で、あるなし判定していた書き方はこれで非常に簡単にできるようになるはずなので、この書き方をしている人はレベルいっちょ上って見てあげましょうね。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。