[JavaScript] 表示/非表示にif文を使わない方法

この記事は表示/非表示(あるいは可視/不可視)を実現するJavaScript(JS)についてのメモです。DEMOページは特にありません、あしからず。
HTML x JS x CSS

前提

アコーディオンやドロワーではない、単純にパッと表示＝可視したり、非表示=不可視になったりするタイプの表示/非表示
CSSでいうdisplay:none;、display:block;をJSから操作するタイプ
以降、この記事で略してfuncと書かれているのはfunctionのこと

JSコード

JSにおいて複数回出てくる頻出値であることを見越して変数化。ついでに配列化。後に出るfuncで共通。

共通func

共通：可視/不可視func

// id取得短く書く用
const $ =(id)=>{ return document.getElementById(id) };

// 可視/不可視の変数化と配列化
const blAk = "block";
const nVn = "none";
const dispArr = [nVn,blAk];

※「id取得短く書く用」については下記を参照
[JavaScript] 頻出document.getElementByIdを短く書く

✅ JSコード：表示/非表示にif文を使わないタイプ

メリット：行が少なく済んでイイ
デメリット：...特に見当たらないが...？

可視/不可視func①

function openClose(id){
  if (!id) return;
  const ele = $(id).style;
  ele.display = dispArr[ele.display.indexOf(nVn) + 1];
}

解説
1行目：引数で指定のidが無ければそこで終了(無くても成立する)
2行目：styleまでを変数化(無くても成立する)
3行目：表示/非表示の働きを設定だか指定だかしてるカ所

と、いうわけで、1行目を省いて2行目も変数化しないなら下記のように1行で済む：

可視/不可視func①, 1行でもOK

function openClose(id){
  $(id).style.display = dispArr[ele.display.indexOf(nVn) + 1];
}

✅ JSコード：表示/非表示にif文を使うタイプ

メリット：if文の構文や働きについて分かりやすい
デメリット：確か、htmlタグ自体にあらかじめstyle=display:none;などdisplay値を書いておかなければ1クリック分が何も働かなかったような...? =ウロ覚え=

可視/不可視func②

function openClose(id){
  const ele = $(id);
  const disp =ele.style.display;
  if (disp === 'block' || !disp) {
    ele.style.display = nVn;
  }
  else {
    ele.style.display = blAk;
  }
}

解説
1行目：id取得によるターゲット要素を変数化
2行目：style.displayまでを変数化
3行目以降：表示/非表示の働きを設定だか指定だかしてるカ所

最初のif：表示(display:block)なら非表示、もしくはdisplay設定が(html側の)タグに無かったら非表示
そうじゃなければ=非表示(display:none)なら表示

『表示/非表示』の種類

アプリの操作やサイト上には (≒ 普段見るHPには ≒ 普段操作するウェブアプリには)、いくつかの種類の表示/非表示効果があります。

イメージ共有のため『表示/非表示』の種類について整理して書き出したのが下記。

アコーディオン式の表示/非表示

２〜３行文ほど表示して末尾に｢もっと読む｣などがあり
続きがある事を透過グラデなど視覚的にも表現していて
｢もっと読む｣をクリックなどすると(上→下方向に)ヌルっと全文表示
イメージしやすい例：
- YouTubeの説明欄
- その他たくさんのシーン

ドロワー式の表示 / 非表示

サイドバーなど、左側(or右側)からヌルっと領域表示
実際は範囲外からの左→右(or左→右)エフェクト付きの位置移動
イメージしやすい例：
- サイドバーメニュー、左→右の移動エフェクト付き表示
- スマホアプリのメニュー(サイドバーメニュー)
- その他たくさんの例

(単に)表示 / 非表示：

非表示だったモノ(領域)が、パッと表示になったりパッと非表示なったり
イメージしやすい例：
- いわゆるポップアップ(PopUp)、モーダルウィンドウ類＠webページ
- 環境設定で呼び出す設定画面＠アプリ類
- ミニメニュークリックで表示される簡易設定(サイドバーの一種)＠ブラウザ

📎備考１
個人的認識としては、ヌルっと表示(/非表示)されるのがアコーディオン式やドロワー式。

もう一つ特徴を言うと、(元の)画面を全部覆わないのがドロワー(≒サイドバータイプ)で、全部覆うのがアコーディオン式の表示/非表示。

アコーディオン式はスマホやiPadなど小さい画面の媒体(のユーザー率がPCやノートPCユーザー)以上に世間で増えたなぁ、と認識できる頃に、一気に一般的になったような気がします。ドロワー式は、使われ方No1のサイドバーメニューの表示/非表示という性質上、webページのメニュー表示に使われていた印象。

📎備考２
アコーディオン式の１種？に入るのかどうか、というのがhtmlの<details>タグ。Qiitaでもお馴染みの開/閉するやつ。装飾なしだと何とも味気ないがcssで装飾すればアコーディオン式みたいに装うことも可能。

<details>タグ
元の省スペース表示に戻すのに｢非表示だった領域内からの操作が出来ない｣という点で、個人的分類としては『単に開/閉モノかな』と。

用途が補足説明であることや、いやむしろそのためのタグ、というのを鑑みると単に“アコーディオン式”と分類するのは、ナンカチガウ気がする。

以上です。