if else を使った条件分岐は理解できました。
三項演算子という、条件分岐をもっとすっきり書く方法があるようです。
早速勉強して使ってみました。
1行で書けるのはかっこいいですが、意味は分かりにくいですね。
何回も書いていけば慣れるかもしれないので、積極的に使っていきましょう。
90点以上なら合格、それ以外は不合格というコードを紹介するので、三項演算子の使い方をチェックしてください。
if-else
まずはif-elseを使って条件分岐コードを書きます。
function judgeScore(value) {
if (value >= 90) {
return '合格';
} else {
return '不合格';
}
}
const score = 92;
console.log(`${score}点：${judgeScore(score)}`);scoreが90以上なら合格、それ未満なら不合格を判定する関数です。
今回はscoreを92にしているので、コンソールに【92点：合格】と表示されます。
このif-else文を三項演算子を使って1行で書くと次のようになります。
if文をおさらいしたい方はこちら👇
三項演算子
同じ意味のコードを三項演算子を使って書きます。
function judgeScore(value) {
return score >= 90 ? '合格' : '不合格';
}
const score = 92;
console.log(`${score}点：${judgeScore(score)}`);scoreが90以上の場合は合格を返し、それ以外の場合は不合格を返します。
こちらもscoreを92にしているので、結果はif-else文と同じで、【92点：合格】とコンソールに表示されます。
scoreを85にすれば【85点：不合格】となります。
三項演算子「?」と「:」の解説
このコードの ? と : は、それぞれ以下のような役割を持つ区切り記号だと考えてください。
1. ?（疑問符）の役割
? の前にある「条件式」に対して、「もし、この条件が正しかったら、答えは何ですか？」という疑問を投げかける区切りです。
score >= 90(条件式)?(この条件が真なら、次へ)
2. :（コロン）の役割
: は、条件が正しくなかった場合の「別の答え」を示す区切りです。
?の直後に書かれた答え（真の場合）と、その後の答え（偽の場合）を分けます。- 「もし、そうじゃなかったら、答えは何ですか？」という区切りだと考えると分かりやすいです。
3. 全体の構造
このコードは、以下の図のような構造になっています。
条件式 ? 真の場合の答え : 偽の場合の答え
ルールとして、以下のようになります。
?の 前 には、判定したい 条件式 を書きます。?の 後 には、条件に 一致していた場合 の 処理（答え） を書きます。:の 後 には、条件に 一致しなかった場合 の 処理（答え） を書きます。
if-elseと三項演算子、どっちを使ったらいいの？
処理が簡単であれば三項演算子、複雑ならif-elseが無難というイメージです。
if-elseを使った方がいい場合
- 処理が複数行になったり、条件分岐が複雑な場合。
- コードの可読性や将来的な保守性を重視する場合。
- 複数の処理を実行したい場合や、あとで処理を追加する可能性がある場合。
三項演算子を使った方がいい場合
- 条件分岐がシンプルで、結果を返すだけの短い処理の場合。
- コードを簡潔に記述したい場合。
三項演算子を使ったミニアプリの作り方を解説👇
