条件演算子を使えるようになりたい

メタデータ

公開日：2018/11/09
更新日：2021/07/10
カテゴリ：コード
タグ：JavaScript

リアクション

シェア寄付

【こちらは前サイトからの移植記事になります。】

概要

条件演算子がくると途端に読めなくなって、if/elseでいいやん。なんでそれすら略すんや！ギャルか！って思います。

日本語もさ、助詞を抜かすとだめじゃん…？

使いこなしたい

そんなこと言っても始まらないんで、どうすれば使いこなせるのかを考えたい。

世間的には条件演算子が悪か悪じゃないかで論争があるみたいですが、個人的には悪か悪じゃないかとかどうでもいいから使い分けようと思います。社会人でギャル語はアウトだけどギャルの間ではむしろ必要でしょ。そういうことだ（？）

で、そうなるとどこまで使うかが大事なのでは…？

いろいろな使い方を検証して、自分の中での条件演算子とif文の使い分けを考えたい。

条件演算子の基本の書き方

//if文
let b;
if(a) {
	b = 1;
} else {
	b = 0;
}

//条件演算子
let b = a ? 1 : 0;


//trueのときだけというのは条件演算子ではできない
//OK
if(a) {
	let b = 1;
}

//NG
let b = a ? 1;

//if文

let b;

if(a) {

b = 1;

} else {

b = 0;

}

//条件演算子

let b = a ? 1 : 0;

//trueのときだけというのは条件演算子ではできない

//OK

if(a) {

let b = 1;

}

//NG

let b = a ? 1;

こうやって見ると、変数の指定くらいなら条件演算子の方がスッキリ書けるような。

条件によって関数を指定するのは？

//if文１(変数に関数を入れてif文内で呼び出す)
let a = true;
let functionA = function(){
	console.log('true');
	a = false;
};
let functionB = function(){
	console.log('false');
	a = true;
};
$('button').on('click',function(){
	if(a) {
		functionA();
	} else {
		functionB();
	}
});

//条件演算子１
let a = true;
let functionA = function(){
	console.log('true');
	a = false;
};
let functionB = function(){
	console.log('false');
	a = true;
};
$('button').on('click',function(){
	a ? functionA() : functionB();
});

//if文２(if文内で呼び出す内容を決める)
let a = true;
$('button').on('click',function(){
	if(a) {
		console.log('true');
		a = false;
	} else {
		console.log('false');
		a = true;
	}
});

//条件演算子２
let a = true;
$('button').on('click',function(){
  a ? console.log('true') : console.log('false');
  a = a ? false : true;
});

//if文１(変数に関数を入れてif文内で呼び出す)

let a = true;

let functionA = function(){

console.log('true');

a = false;

};

let functionB = function(){

console.log('false');

a = true;

};

$('button').on('click',function(){

if(a) {

functionA();

} else {

functionB();

}

});

//条件演算子１

let a = true;

let functionA = function(){

console.log('true');

a = false;

};

let functionB = function(){

console.log('false');

a = true;

};

$('button').on('click',function(){

a ? functionA() : functionB();

});

//if文２(if文内で呼び出す内容を決める)

let a = true;

$('button').on('click',function(){

if(a) {

console.log('true');

a = false;

} else {

console.log('false');

a = true;

}

});

//条件演算子２

let a = true;

$('button').on('click',function(){

a ? console.log('true') : console.log('false');

a = a ? false : true;

});

if文/条件演算子ともに２パターンつくりました。内容は全部同じで、ボタンをクリックすると繰り返しtrueかfalseをコンソールログで返します。

if文１/条件演算子１は変数に関数を格納して、条件によって変数を呼び出す方法で、if文２/条件演算子２は条件によって内容が変わるというもの。

前者の感じだと条件演算子がシンプルでいいし、後者だとこの例は簡単だから条件演算子の方が短くなったけど、長い処理のときどうするの？という問題があるのでif文の方がいいですよね。

結局は使い分けだよなあ、と思います。

入れ子はぐんと可読性落ちますね

//if文
let a = 2;
let b;
if(a == 0) {
	b = 'zero';
} else if(a > 0) {
	b = 'プラス';
} else if(a < 0) {
	b = 'マイナス';
} else {
	b = a;
}
console.log(b);

//条件演算子
let a = 0;
let b = a == 0 ? 'zero' : a > 0 ? 'プラス' : a < 0 ? 'マイナス' : a ;
console.log(b);

//条件演算子を改行
let a = 0;
let b =
	a == 0 ? 'zero' :
	a > 0 ? 'プラス' :
	a < 0 ? 'マイナス' :
	a;
console.log(b);

//if文

let a = 2;

let b;

if(a == 0) {

b = 'zero';

} else if(a > 0) {

b = 'プラス';

} else if(a < 0) {

b = 'マイナス';

} else {

b = a;

}

console.log(b);

//条件演算子

let a = 0;

let b = a == 0 ? 'zero' : a > 0 ? 'プラス' : a < 0 ? 'マイナス' : a ;

console.log(b);

//条件演算子を改行

let a = 0;

let b =

a == 0 ? 'zero' :

a > 0 ? 'プラス' :

a < 0 ? 'マイナス' :

console.log(b);

確かに、数行がスッキリはするけど…。条件式と結果がわかりにくいので、入れ子では使いたくないなあ。

可読性のために改行したらいいやんっていうのもなんか、それならもうif文書くわよ…って思いますね。

感覚だけでエンジニアやってる人間の個人的な感触として、括弧の後じゃない場合にはセミコロンは同じ行がいい…。伝われこの気持ち…！

結論

私の個人的なルールとして、条件演算子はtrue/falseでの変数呼び出しに使用したい。

参考

三項演算子は悪か？ – Qiita

こちらの、”演算子”なんだから演算子らしく使おうっていう考え方で、条件演算子への苦手意識がなくなった気がします。