[JavaScript] 表示/非表示にif文を使わない方法
この記事は表示/非表示(あるいは可視/不可視)を実現するJavaScript(JS)についてのメモです。DEMOページは特にありません、あしからず。
HTML x JS x CSS
前提
- アコーディオンやドロワーではない、単純にパッと表示＝可視したり、非表示=不可視になったりするタイプの表示/非表示
- CSSでいう
display:none;、display:block;をJSから操作するタイプ - 以降、この記事で略してfuncと書かれているのはfunctionのこと
JSコード
JSにおいて複数回出てくる頻出値であることを見越して変数化。ついでに配列化。後に出る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文を使わないタイプ
メリット：行が少なく済んでイイ
デメリット：...特に見当たらないが...？
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行で済む：
function openClose(id){
$(id).style.display = dispArr[ele.display.indexOf(nVn) + 1];
}
✅ JSコード：表示/非表示にif文を使うタイプ
メリット：if文の構文や働きについて分かりやすい
デメリット：確か、htmlタグ自体にあらかじめstyle=display:none;などdisplay値を書いておかなければ1クリック分が何も働かなかったような...? =ウロ覚え=
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>タグ
元の省スペース表示に戻すのに｢非表示だった領域内からの操作が出来ない｣という点で、個人的分類としては『単に開/閉モノかな』と。
用途が補足説明であることや、いやむしろそのためのタグ、というのを鑑みると単に“アコーディオン式”と分類するのは、ナンカチガウ気がする。
以上です。