こんにちは、ライターのマサトです！
今回は、「IF文」を簡略的かつ効率よく書くことができる「条件(三項)演算子」について学習しましょう！
「条件(三項)演算子」には、さまざまな書き方や使い方のテクニックがありますが、本記事を読むことで初心者の方でもすぐに理解できるように解説します！
この記事では、
・条件(三項)演算子とは？
・基本的な使い方
・式は省略できない
・nullやundefinedなどの判定について
という基本的な内容から、
・値をreturn(戻り値)する方法
・処理を改行する方法について
・条件(三項)演算子の応用テクニック
などの実践的な使い方に関しても解説していきます。
この記事で「条件(三項)演算子」をしっかり学習して、より効率的な分岐処理が書けるように頑張りましょう！
条件(三項)演算子とは？
それでは、「条件(三項)演算子」の基本的な学習から始めていきましょう！
「条件(三項)演算子」は、IF文の省略形または代替手段として利用することが可能で、3つの値・式を必要とする特殊な演算子になります。
まず最初に、「IF文」のおさらいをもう1度しておきましょう。
if (条件式) {
//Trueの処理
} else {
//Falseの処理
}
このように、IF文は「条件式」の結果に応じて、「True」「False」の処理を振り分けることができる構文でした。
上記と同じコードを「条件(三項)演算子」で記述すると次のようになります。
条件式 ? Trueの処理 : Falseの処理
とてもシンプルなコードに変わりましたね。
こちらのコードでも、「IF文」と同じく条件式がまず最初にあり、その結果が「true」か「false」なのかによって処理を分岐させることができます。
単純な条件式による結果が知りたいのであれば、簡潔にコードが書けてプログラムもスッキリと見やすい「条件(三項)演算子」を使った方が効率が良いでしょう。
ちなみに、「IF文」について具体的なコードやその活用事例をさらに知りたい場合は、次の記事で詳しく解説していますのでぜひ参考にしてみてください！
基本的な使い方
次に、簡単なサンプル例を確認しながら、実際にどのような使い方をするのかを詳しく見ていきましょう！
まずは、最も単純な例です。
console.log( 5 > 2 ? true : false );
実行結果
true
このサンプルでは条件式が「5 > 2」となっており、正しい条件なのでtrueの処理が実行されて最終的には「true」が表示されているのが分かりますね。
もちろん、最終的な結果を「戻り値」として変数に代入することも可能です！
var result = 5 > 2 ? true : false; console.log( result );
実行結果
true
この例では、変数「result」へ条件式の結果を代入して出力しているのが分かりますね。
このように、単純な条件分岐であれば「条件(三項)演算子」の方が簡単で効率よく記述できるわけです！
式は省略できない
冒頭でも解説しましたが、「条件(三項)演算子」は3つの値・式を必要とする演算子なので、次のような省略はエラーになります。
//falseの式を省略 5 > 2 ? trueの処理; //trueの式を省略 5 > 2 ? : falseの処理;
この例では、「true」「false」それぞれの式を省略していますが、これはエラーになってしまいます。
他のプログラミング言語では省略可能な「条件(三項)演算子」があったりするのですが、JavaScriptに関しては禁止されているので注意しておきましょう！
nullやundefinedなどの判定について
JavaScriptには、値の中身が「空っぽ」の状態を明示的に表すための「null」や、変数や関数などが定義されていないことを表す「undefined」があります。
この「null」「undefined」を条件式に当てはめた場合、一体どのような動作をするのでしょうか？
次のサンプルでは、「null」「undefined」が含まれた条件式を比較した例です。
//「null」の場合 var result1 = null ? true : false; //「undefined」の場合 var result2 = undefined ? true : false console.log( '【nullの場合】' + result1 ); console.log( '【undefinedの場合】' + result2 );
実行結果
【nullの場合】false 【undefinedの場合】false
実行結果を見ると分かりますが、JavaScriptでは「null」「undefined」を条件式に当てはめるといずれも「False」と判断されてしまいます。
実は、JavaScriptには同じような「false」に判断されてしまう5大条件というのがあります。
・0（数値の0）
・null（値が空であることを示す型）
・NaN（数値ではないことを示すプロパティ）
・undefined（値が未定義であることを示す型）
・""（空の文字列）
上記内容はすべて「false」と判断されるので、条件式を記述する際には注意するようにしましょう！
値をreturn(戻り値)する方法
次に、関数などで「条件(三項)演算子」を組み合わせる場合に、結果をreturn(戻り値)する方法についてご紹介します。
これは、結果を変数に代入する方法とほとんど同じ考え方で実現できます。
次のコード例を見てください。
function getResult() {
return 5 > 2 ? true : false;
}
console.log( getResult() );
実行結果
true
この例では、関数「getResult」を作成してその中に「条件(三項)演算子」をそのままreturnしているのが分かります。
このように、通常の「式」と同じ扱いでreturn(戻り値)すれば基本的には問題ありません。
ちなみにですが、普通のIF文の場合はそのままreturnすることができないため、次のようなコードになります。
function getResult() {
var result;
if(5 > 2) result = true;
return result;
}
console.log( getResult() );
少しコードが増えましたね。
このように、用途や目的に応じて「条件(三項)演算子」を使う方が簡潔にコードが書けることがあるので覚えておくようにしましょう！
処理を改行する方法について
JavaScriptは、コード内における「改行」や「インデント」の自由度が高いのですが、それは条件(三項)演算子についても同じことが言えます。
可読性を高めるためにも、場合によっては次のサンプルのような書き方ができることを覚えておくと良いでしょう！
var item = 'バナナ';
item === 'バナナ'
? console.log('正しいです！')
: console.log('間違ってます！')
実行結果
正しいです！
このサンプルでは、条件式を書いたあとに改行とインデントを入れることで、Trueの処理とFalseの処理が見やすくなっているのが分かります。
少し長いコードであればさらに有効に活用できると思いますので、ぜひ参考にしてみてください！
条件(三項)演算子の応用テクニック
ここまでは、「条件(三項)演算子」の基本的な使い方を学習してきました。
一般的には、簡易的なコードを効率よく記述することでメリットのある「条件(三項)演算子」なのですが、もう少し応用的な使い方をご紹介致します！
目的や用途に応じて、少し複雑なコードを条件分岐させるようなケースで役に立つテクニックなので、ぜひ合わせて学習を進めていきましょう！
処理を入れ子にする方法
これまで条件(三項)演算子を単体で利用していましたが、入れ子構造にして別の条件式を組み合わせることも可能なのでご紹介します。
例えば、次のサンプルを見てください！
var firstItem = 'りんご'; var secondItem = null; //「true」の処理でもう1つの三項演算子を実行している var result = firstItem === 'りんご' ? secondItem ? 'OK' : '2回目NG' : '初回NG' console.log( result );
実行結果
2回目NG
このサンプルでは、まず最初に「firstItem === ‘りんご’」を比較して一致しているのでtrueの処理に移動します。
次に、nullが格納されている「secondItem」を比較しているので、これはfalseの処理に移動するため、最終的に「初回NG」という文字列が出力されているわけです。
先ほど学習した「改行」を入れて見やすくすると次のようになります。
var result = firstItem === 'りんご'
? secondItem ? 'OK' : '2回目NG'
: '初回NG'
trueの処理で、もう1つの条件(三項)演算子が実行されているのがよく分かりますね。
慣れると便利な記述ですが、入れ子の階層が深くなると逆に把握しづらくなるので注意しましょう。
条件式を複数組み合わせる方法
「入れ子構造」は、どちらかと言うと簡易的な処理を行う場合に有効な方法で、複数行のコードが必要になってくると読みづらくなってあまり実用的ではありません。
そこで、解決策としては( )で処理を囲ってしまい、「, （カンマ）」で区切ることで対応することができます。
次のサンプルを見てください！
var item = 50;
item > 35 ? (
//trueの場合
item++,
console.log( item )
) : (
//falseの場合
item--,
console.log( item )
);
実行結果
51
この例では、true・falseそれぞれの処理を( )で囲うことで複数行の処理を見やすく記述できているのが分かりますね。
処理の内容としては、「item > 35」を比較してTrueの処理を実行し、変数「item」をカウントアップしてその中身を出力しています
まとめ
今回は、「IF文」と同じような処理を簡単かつ効率よく記述できる「条件(三項)演算子」について学習しました！
最後に、もう一度ポイントをおさらいしておきましょう！
・条件(三項)演算子は「? :」を使って、3つの値・式をとる演算子である
・「null」「0」「NaN」「undefined」「”」はすべてFalseの処理になる！
・結果を変数へ直接代入したり、returnすることができる
・改行とインデントを入れることで可読性を高めることができる！
・入れ子構造にしたり、( )で複数の処理を同時に実行できる！
上記内容を踏まえながら、ぜひ自分のプログラムにも積極的に取り入れて使いこなせるようになりましょう！
JavaScriptには他にも利用頻度が高い演算子が多くあります。
その他の演算子について知りたい方は以下の記事にまとめていますので参考にしてくださいね。
