三項演算子 returnできない時の対処法

実務でTSを書いている時に、「三項演算子使お！」と思って書いてみたのですが、初歩的なミスをしてしまい、
少し忘れたら嫌なので、メモとして残します！
（対処法だけ見たい方は最後のセクションをみましょう！）

流れ

1. 三項演算子とは
2. returnできないエラー
3. 対処法

1. 三項演算子とは

簡単に言うと、if文をかなり省略した式です。
実際に通常のif文と三項演算子を比較してみるとわかりやすいと思います。

React(ts)内で記述した三項演算子

index.tsx

let style = disabled ? { backgroundColor: 'gray' } : {}

通常のif文

index.tsx

let style
if(disabled) style = { backgroundColor: 'gray' }
else style = {}

（このコードは、ReactのStyleの指定方法を用いて、背景色の設定をオブジェクトで返します。）
若干行数が増えますね〜！
この行数を削減したり、TorFしかない時に使うのが三項演算子です。
（この条件以外だとそんなに利点ないです。
三項演算子もネストもできますが、ネストすると、可読性Down💦）

三項演算子の公式的な書き方は以下の通りです。

条件式 ? Trueの時の式 : Falseの時の式

2. returnできないエラー

先ほど学んだ三項演算子ですが、早速Reactの関数（実質tsの関数）で使ってみましょう！

index.tsx

const returnDisableStyle = (disabled: boolean) => {
  disabled ? return { backgroundColor: 'gray' } : return {}
}

if文の時の雰囲気からして、こんな感じで書くのでは！と思いましたが、
エラーが出て、実行できません、、、😭
if文と若干違うところがあるのが、三項演算子の難しいポイントです、、、

3. 対処法

先ほど、エラーが出ましたが、以下のように記述すれば、解決できます🙌

index.tsx

const returnDisableStyle = (disabled: boolean) => {
  return disabled ? { backgroundColor: 'gray' } : {}
}

関数などで、returnと三項演算子を組み合わせる場合は、

return 三項演算子

としましょう。
これは、三項演算子が式であることに由来します。
プログラミング言語では、関数の引数として、計算式を渡したり
条件式を変数に代入できたりして、式と値がほぼ等価な価値観の世界です。
（コンパイラの勉強をすれば、言語処理がわかるので、もう少し理解できるかもしれません）
そんな世界なので、三項演算子（条件式）を値として考えて、returnできます。

以上で、returnできない三項演算子の対処法を終わります！
JSのフレームワークの記法によっても変わってくるので、要注意です！

補足

複数行書きたい時は以下のように書きます（素のJS、バニラJS）
コンマをつける＋（）をつければOKです！

条件 ? (
    コード,
    コード２,
) : (
    コード3,
    コード4,
)

可読性が下がるので、あまりお勧めはしませんが、、、😅
どうしても必要な時は使ってください！
（ここまでするのであれば、if文の方が良いので、なるべく避けましょう）

参考文献