👏

条件分岐で変数を定義or代入する方法2種

2021/03/23に公開

4件

JavaScript

tech

追記

この記事の内容は,コメントにより指摘があった通り非推奨であるという意見があります.そのことを念頭においた上でお読みいただきますようお願いします.

三項演算子

JavaScriptではこんなふうに三項演算子を用いて,変数の値を決定することがよくある.

const info = { id: '123', age: 88 };
const userName = info.userName ? info.userName : 'no_name';

これは,infoにuserNameがあった場合は代入して,なかった場合は,no_nameを代入する記述である.

これは,結局if文と同じ原理なので,あるかないかという2択でしか分岐できない.

オブジェクトを使った分岐テクニック

では3択以上で分岐して代入したい.当然だけど短く書きたい.そんなときはこうすると良い.

const signalColor = 'red';
const action = { red: 'Stop', yellow: 'Be careful', blue: 'Go!!' }[signalColor];

所感

これはもはや構文ではなく知恵である.それでは僕はこれを知識に変えるとする.

Discussion

standard software

手厳しい感じで申し訳ないですが、書いておきました。

オブジェクトを連想配列として使うと痛い目にあいますよ

info.userName の true属性/false属性をつかう三項演算子の使い方もuserNameに数値の0が入るとno_nameになるので、望ましい感じがしないです。

こちらも参考になればどうぞです。多段階の三項演算子で複数分岐を書く方法も載せてます。
https://qr.ae/Tm2RNb

Knob/のまど先生

ご指摘ありがとうございます！勉強にの励みになるのでありがたいです！記事を読ませていただいた上で質問なのですが,これは例えばTypeScriptで代入される値を制限したとしても安全性は担保されないものなのでしょうか？

standard software

TypeScriptの型など別の方法で入力値を制限していれば大丈夫です。

とはいえ、このような分岐処理に適切なのは Mapオブジェクトだったり、switch文だったり、あるいは、switch文のような自作関数でもつくれるので、知っている人なら、オブジェクトを連想配列的に使うコードみて、何かやばい感じがするので、さけたほうがよいでしょう。

記述量をへらすことで、不具合が起きる可能性が高まるコードテクニックがJavaScriptにはたくさんあり、それで(雑に)書く人があまりにも多くて不具合が頻発するコードになるのが、JavaScriptの難しさだと思います。

記述量を少し増やすことで不具合が起きる可能性が少しでも減るなら、丁寧に書いておくのが、よりよいテクニックかと思います。

下記もこうなります。

const info = { id: '123', age: 88 };
// ここに100行ほど余計な行がはいると、
// info.userNameに何がはいるかわからなくなり、不具合につながりやすい
const userName = info.userName ? info.userName : 'no_name';

const info = { id: '123', age: 88 };
// ここに100行ほど余計な行がはいっても
// info.userNameの判定で、undefinedかどうかの判定なので
// 値が確定して不具合がおこりにくい。
const userName = !isUndefined(info.userName) ? info.userName : 'no_name';
// ※あるいは、isStringなど。

私の記事からリンクしているさまざまな方々のコメント欄でのやり取りなどを読むとより深く理解できるのではないかと思います。

Knob/のまど先生

ありがとうございます！大変勉強になります.エンジニアの方は本当に優しく助けられます🙇‍♂️
これからも可読性の高い安全なコードを練習します🦾