Open2021/06/22にコメント追加1

【React JSX】論理演算子「&&」による処理分岐の用法

React

JSX

yu.miyoshi

概要

論理演算子「&&」は、基本的に「かつ」や「アンド」という意味合いで使用されるが、JSXでよくみるBooleanの記法についてまとめてみる

詳細

使用法について、以下の6種類にまとめてみた

sample

// 1. 一般的な AND の使い方
var val1 = true;
var val2 = false;
var res = val1 && val2;
console.log(res); // false と表示される

// 2. 一般的ではない AND の使い方
var val1 = 5;
var val2 = 10;
var res = val1 && val2;
console.log(res); // 10 と表示される

// 2.1 一般的ではない AND の使い方
var val1 = 10;
var val2 = 5;
var res = val1 && val2;
console.log(res); // 5 と表示される

// 3. 一般的ではない AND の使い方をした値の表示
var flg = false;
var val = flg && 'test';
console.log(val); // false と表示される

// 4. 一般的ではない AND の使い方をした値の表示
var flg = true;
var val = flg && 'test';
console.log(val); // test と表示される

// 5. 一般的ではない AND の使い方をした値の表示
var flg1 = true;
var flg2 = true;
var flg3 = false;
var val = flg1 && flg2 && flg3 && 'test';
console.log(val); // false と表示される

// 6. 一般的ではない AND の使い方をした値の表示
var flg1 = true;
var flg2 = true;
var flg3 = true;
var val = flg1 && flg2 && flg3 && 'test';
console.log(val); // test と表示される

1は一般的なANDの使用方法
val1, val2をAND条件で評価した値をログに出力

2系は「&&」の左辺を評価し、trueなので、左辺をresに代入し出力

3は「&&」の左辺がfalseのため、右辺評価をしない

4は「&&」の左辺がtrueのため、valにtestを代入し出力

5はflg3がfalseのためtestまでたどり着かないので、falseが出力

６はflg1,2,3ともにtrueなので、valにtestを代入し出力

結論

「&&」の左辺がtrueの場合、右辺を実行と考えて良い。
6は、以下の記述に変更してあげると、よりわかりやすい

6(別記載)

var flg1 = true;
var flg2 = true;
var flg3 = true;
var val = 
  flg1 && 
    flg2 && 
      flg3 && 'test';
console.log(val); // test と表示される

以下のAとBの記述は同義

sample2

// flg は boolean だとする
// A
var res = flg1 && flg2 && flg && value1;

// B
var res = null;
if (flg1 && flg2 && flg3) {
  res = value1;
}

概要

詳細

結論

参考サイト