[JavaScript] 三項演算子(条件演算子)の使い時、変数の値を返すということ

# [JavaScript] 三項演算子(条件演算子)の使い時、変数の値を返すということ
2024/08/01：上書き、コードブロックなど追加
- コード例を書くのではなく構文として記号的に書きたかったので全体像が不完全
- 構文を記号的に書く際の書き方が不十分(ミスってた？不足があった？)

実際に使ってるCODEから汎用性を満たすシンプル構文に書き直す際、書き方がマズかったか不十分だったかで、コメントでご指摘あったように色々不備になってたようです。今回、手直ししたことで不備は解消されたと思います。
## はじめに
三項演算子、条件分岐を行う方法のひとつ。 条件演算子とも言う。
`const A? B: C;` などのやつ。この記事では三項演算子と呼び方を統一することにする。

__重要ポイント__
google検索結果ページの上位のリンク先を見ると、条件分岐で処理をする『if文やswitch文の代わり』だとか『if文の短縮形』だとかはたまた『三項演算子は使うな』関連の記事だとか、そういうのが多いがこの記事は**ソコじゃない**という観点での内容。

:::note
実感として最も体感したコトは

**➡︎ 条件によって値の異なる“変数”を使える**

こと
:::

<font color=darkgray>※↓分かりやすさを目指し色分け</font>　
__三項演算子 の書き方__
const <font color=#B168A8>valueA = true ?</font>　<font color=hotpink>"A" : </font>　　　　　<font color=orange>"B" ;</font>
　　　<font color=#B168A8>条件式 ?</font> 　　<font color=hotpink> trueの時の処理 : </font>　<font color=orange>falseの時の処理;</font>
const <font color=#B168A8>valueA ?</font> <font color=hotpink>"A" : </font><font color=orange>"B" ;</font>  　<font color=darkgray>// こう書くこともできる</font>

__OR演算子 の書き方__　　
const<font color=#B168A8> valueA = </font>　<font color=hotpink>"A" ||</font>　<font color=orange> "B";</font>　<font color=darkgray>// Σ(⁰▿⁰)◜ more省スペース＆シンプル！</font>
※`valueA`は真偽値(`true` / `false`)が返るタイプの条件式が入る

<font color=darkgray>※↓コードブロックで書くとこう</font>
```javascript:JS：三項演算子、記述位置が処理の初めにある場合
//valueAが出てくる 処理の始めの方

// ①三項演算子 の書き方 その１
const valueA = true ? "A" : "B";
    //　条件式 ? Trueの時の処理 : Falseの時の処理;

// ②三項演算子 の書き方 その2
// 前提：この`valueA`は真偽値(true/false)が返るタイプの条件式
const valueA ? "A" : "B";  // こう書くこともできる

// ③OR演算子 の書き方
// 前提：この`valueA`は真偽値(true/false)が返るタイプの条件式
const valueA = "A" || "B"; // Σ(⁰▿⁰)◜ more省スペース＆シンプル！

/*
 〜以降も何らかの処理が続く〜
*/

//※上記の①〜③の３種、どの書き方で書いても結果は同じ↓
console.log(valueA); // => "A";
```

```javascript:JS：三項演算子、記述位置が処理の中頃にある場合 
//valueAが出てくる 処理の始めの方
let valueA = example;

/*
 〜何らかの処理〜
*/

// ①三項演算子 の書き方 その１
valueA = true ? "A" : "B";
    //　条件式 ? Trueの時の処理 : Falseの時の処理;

// ②三項演算子 の書き方 その2
// 前提：この`valueA`は真偽値(true/false)が返るタイプの条件式
valueA ? "A" : "B";  // こう書くこともできる

/*
 〜以降も何らかの処理が続く〜
*/

```

```javascript:JS：三項演算子、処理の終わりに記述が来る場合 
// if文でOK、三項演算子である必要がない

```

__三項演算子 の書き方：true/falseの時の処理を別途`アロー関数`に記述__
<font color=darkgray>※↓分かりやすさを目指し色分け</font>　
const <font color=hotpink>fA</font> = ()=> {`/*2行以上の処理*/` return "A"}
const <font color=orange>fB</font> = ()=> {`/*2行以上の処理*/` return "B"}
const <font color=#B168A8>varie  = 真偽値が返るタイプの式 ?</font>　<font color=hotpink>fA() : </font>　<font color=orange>fB() ;</font>
　　　<font color=#B168A8>条件式 ?</font> 　　<font color=hotpink> trueの時の処理 : </font>　<font color=orange>falseの時の処理;</font>

<font color=darkgray>※↓コードブロックで書くとこう</font>
```javascript:JS：三項演算子、true/falseの時の処理を別途アロー関数に記述
const fA = ()=> {
  /* 2行以上の処理 */
  return "A"
}
const fB = ()=> {
  /* 2行以上の処理 */ 
  return "B"
}

// ※↓この例は、ex というidを持つinputタグ、checkboxまたはradioがON
const varie = ex.checked? fA() : fB(); 

/*
 〜以降も何らかの処理が続く〜
*/
```
<font color=darkgray>※備考：checkboxまたはradioのONは、htmlタグやJS的には`checked`があるかないか</font>

## 三項演算子 重要ポイント
実感として最も体感したコトは、

**➡︎ 条件によって値の異なる“変数”を使える**

これです。

:::note
言い換えると

**➡︎ if文と三項演算子の違いは“変数の値”を返すことが出来るかどうか**
:::

if文では そのifによって(=その条件によって)そのあと使う変数の値(またはその変数の値に加工を施すための一手間がかかったもの)を反映させることができない。

## 重要ポイントを体感した体験談
それを痛感した一連のコード群/プロジェクトがコレだ。
以前書いた(紹介した)投稿記事：

https://qiita.com/Reng/items/1db0c798972fc041aff5

この変換動作の 一連のコード群/プロジェクト は、平たく言うと変換処理の挙動は、
1. ローマ字(アルファベットのみ)
2. ひらがなカタカナ漢字の日本語

という**２つのフェーズに進むと処理が分かれている**のだけども、入力欄に入ってる文字列が一つの変数として使用する値であるというのがそもそもの始まり=起点だということ。<font color=darkgray>※入力欄が一つに見えるだけで非表示にしてて実際は３つある、とかそういうことでありません</font>

お分かりいただけるだろうか…？

<font color=darkseagreen>変数として使用する値は一つ、しかし場合によってその後の処理が分かれる(**=条件分岐**)。</font>

この時if文だと 一つの変数を返せない。
### フローチャート
処理の流れをフローチャートで表すと：

```mermaid
flowchart TD

A[入力欄]--> A-1([変数=入力欄の中身<br>※letで再代入化可])-->B
B{アルファベット<br>のみか？}
B -->|【 Yes 】|C
B -->|　【 No 】|D
C[①ローマ字用の変換func]-->E
D[②日本語用の変換func]-->F
E{{①変数=必要な加工処理}}-->|①と②ちがう内容なのに|G;
F{{②変数=必要な加工処理}}-->|①と②ちがう内容なのに|G;

G[✅ ひとつの変数]-->H[③結果を出すfunc<br>ひとつの結果<br>※result]
H-->N[出力欄:3パターン]
N-->I;N-->J;N-->K;
I[IPA出力用func<br>加工処理]==>M
J[ローマ字出力用func<br>加工処理]==>M
K[X-SAMPA出力用func<br>加工処理]==>M
M([入力欄の内容に対して<br>ひとつの変換の総合的な成果])
```

この変換処理の流れを表すチャート図での『①ローマ字用の変換func』と『②日本語用の変換func』で一つの変数(の中身)は別々の加工をされた別のモノになっている。

しかし、その後の｢✅ ひとつの変数｣のカ所で、同じ一つの変数として扱われなければなりません。

『①ローマ字用の変換func』と『②日本語用の変換func』で`return`されるのはひとつの変わらぬ変数でなければならない状況です。

そしてその前段階で、「アルファベットのみか？」でふるいにかける＝絞り込み=フィルタリングして『①ローマ字用の変換func』あるいは『②日本語用の変換func』に進むわけです。

つまりは冒頭で書いた

<font color=darkseagreen>変数として使用する値は一つ、しかし場合によってその後の処理が分かれる(**=条件分岐**)。</font>

の状況になっています。
なんだかフツーにif文使って(変数の値が返らないから)

『処理が進まんな……？？』

エラーでもないのに？？記述ミスでも無いのに？？と思ってイロイロ試行錯誤した末に三項演算子でないと無理やん、というトコロに行きつきました。
その過程で冒頭で書いたように

> 条件分岐で処理をする『if文やswitch文の代わり』だとか『if文の短縮形』だとかはたまた『三項演算子は使うな』関連の記事だとか

ばかりだな…？体感した最も顕著な特徴を書いた記事じゃないな…？と感じたわけです。


## 終わりに

もっとggったら出てくるのかもしれませんが、検索結果ページの1p目にあたる上位にないページということは無いも同じ(=言い過ぎ)。

しかし事実としておそらくは1p目どころかよくクリックされる記事というのは、1pの３番目マデ、あるいは多くてもせいぜい5、6番目の記事マデだと思うのです。となると「無いも同じ(=言い過ぎ)」は検索してる人にしてみればあながち的外れなことではないと言えるかもしれませんね？？

検索結果上位はSEO的に優秀なものが上にクル仕様なので、書く側の用意というか SEO的に用意周到なテンプレ？記事構成を予め有している記事が優位なわけです。その優位性をもった、記事に書く側のトピックとして選ばれなかったからといって、世の中検索結果上位ページの数種の似かよった内容が事実のすべてというわけではもちろんないわけです。


と、いうわけで、この記事が三項演算子の 『if文やswitch文の代わり』、『if文の短縮形』、『三項演算子は使うな』一辺倒ではない、しかし有用な記事になれば、と思って書いたのでした。

ええい、ぶっちゃけgoogle検索結果上位になりたいー！ と思って書いたのでした。

以上です。