Reactの公式ドキュメントでGetting Startedを読むと、このような文章があります。
We recommend going through this JavaScript overview to check your knowledge level. It will take you between 30 minutes and an hour but you will feel more confident learning React.
意訳をすると「Reactを習得したかったら、JavaScriptも並行して学習してね！」と言ったところでしょうか？そういうわけなのでReactの学習を意識しつつ、JavaScriptの学習も進めていきましょう。今回は三項演算子（条件演算子）についてご紹介します。
三項演算子（条件演算子）とは
三項演算子はif-else文を書き換えたもので、条件式の真偽値を判定をすることができます。
if-else文による判定
[php]
var a = 10;
var b = 9;
if (a > b) {
console.log("a is Max");
} else {
console.log("error");
} // a is Max
[/php]
if文の丸括弧内で真偽値（true or false）を選んで、真であれば（aがbよりも大きければ）、”a is Max”とコンソール画面に表示されます。
三項演算子による判定
[php]
var i = (a > b) ? "a is Max" : "error";
console.log(i); // a is Max
[/php]
上記のif-else文を三項演算子に書き換えると、上記の通りになります。三項演算子で判定した真偽値は変数に代入することも可能です。
厳密演算子を使って文字列の真偽値を判定
[php]
var h = "hoge";
var f = "fuga";
var s = (h === f ) ? "Correct!" : "Wrong!";
console.log(s); // Wrong!
[/php]
また数値の比較だけでなく、厳密演算子”===”を使って文字列が等価であるかどうかも真偽値で判定できます。この場合、変数hとfの文字列は等価でないため、コンソール画面には”Wrong!”が表示されます。
Reactで三項演算子を扱う
[php]
handleInputChange(event) {
const target = event.target;
const value = target.type === ‘checkbox’ ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
[/php]
Reactの公式ドキュメントから一部を引用しました。この中では”target.type”というプロパティが、”checkbox”という文字列と等しいかどうか、三項演算子を使って判定しています。
- 条件が真（true）のとき → 変数valueに"target.checked"プロパティを代入 - 条件が偽（false）のとき → 変数valueに"target.value"プロパティを代入
なお真偽値の判定をする式について、丸括弧を用いても用いなくても判定することができます。
