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

2024/08/01：上書き、コードブロックなど追加

コード例を書くのではなく構文として記号的に書きたかったので全体像が不完全
構文を記号的に書く際の書き方が不十分(ミスってた？不足があった？)

実際に使ってるCODEから汎用性を満たすシンプル構文に書き直す際、書き方がマズかったか不十分だったかで、コメントでご指摘あったように色々不備になってたようです。今回、手直ししたことで不備は解消されたと思います。

はじめに

三項演算子、条件分岐を行う方法のひとつ。条件演算子とも言う。
const A? B: C; などのやつ。この記事では三項演算子と呼び方を統一することにする。

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

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

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

こと

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

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

※↓コードブロックで書くとこう

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";

JS：三項演算子、記述位置が処理の中頃にある場合

//valueAが出てくる 処理の始めの方
let valueA = example;

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

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

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

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

JS：三項演算子、処理の終わりに記述が来る場合

// if文でOK、三項演算子である必要がない

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

※↓コードブロックで書くとこう

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(); 

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

※備考：checkboxまたはradioのONは、htmlタグやJS的にはcheckedがあるかないか

三項演算子重要ポイント

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

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

これです。

言い換えると

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

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

重要ポイントを体感した体験談

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

この変換動作の一連のコード群/プロジェクトは、平たく言うと変換処理の挙動は、

ローマ字(アルファベットのみ)
ひらがなカタカナ漢字の日本語

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

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

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

この時if文だと一つの変数を返せない。

フローチャート

処理の流れをフローチャートで表すと：

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

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

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

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

つまりは冒頭で書いた

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

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

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

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

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

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

終わりに

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

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

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

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

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

以上です。