Ateam LifeDesign Advent Calendar 2024 14日目を担当します、加能です 
フロントエンド実装3年目、3年目とは思えないくらいまだまだへっぽこですが頑張っています。
これは何？
HTMLの要素が削除されないWebサイト実装において、要素の非表示にしたい時はどうするべきか？の理解が浅かったので考えをまとめています。
要素を非表示にする方法は2つ
要素の非表示をする方法は2つの選択肢があるかと思います。
- style属性で
display:noneを付与する- jQueryで
hide()/show()を使うのもこちらに当たります
- jQueryで
-
display:noneが付いたクラスを用意して付与する-
Bootstrapの
d-noneなどもこちらに当たります
-
Bootstrapの
どちらが良いのか
下記の観点から、「CSSのクラスを用意して付与する」方が良いのでは考えました。
セマンティクスの分離
一番はこれかと思ってます。
HTMLは文書の構造であるべきなはずなのに、直接style属性でスタイルを当てて変更をするのは本来の意図と反しています。CSSにスタイルを書く方が意味的にあっています。
特異性
style属性で当てると、その状態で表示したい場合に詳細度を考慮する必要が出てきます。
クラスが当たっている状態よりも調整がしづらいです。
クラス名をどうするか
以下のようなパターンがパッと思いつくかと思います。
- ①非表示の時だけクラスを付与する：
hiddenやis-hiddenなど - ②表示の時にもクラスを付与する：
hide/showなど
下記の例からメリットデメリットを考え、①が最適かと考えています。
①非表示の時だけクラスを付与する
## 表示
<p class="text">テキスト</p>
## 非表示
<p class="text hidden">テキスト</p>
- メリット
- textが隠れていることは直感的にわかる
-
display:blockじゃない時（flexやgridなど）の場合はこちらの方が扱いやすい- ↑これがいちばんのメリットだなと思ってます
- デメリット
- textが動的に隠れる要素かは判断できない
②表示の時にもクラスを付与する
## 表示
<p class="text show">テキスト</p>
## 非表示
<p class="text hide">テキスト</p>
- メリット
- textの表示が切り替わることを想像しやすい
- デメリット
- displayプロパティの重複（打ち消し）が起きやすい
- 実際のロジックではクラス名の付け外しを同時にしなければいけないのでコードが冗長になる
-
display:flexのものには別のクラスを用意しないといけないのでコードが冗長になる- ↑これが一番のデメリットと思ってます
まとめ
要素の非表示の切り替えは、
「display: noneが付いたクラスを用意して、非表示の時に付与する」が良いのかな？と考えました。
hidden と is-hidden など細かいクラス名に悩みそうですが、
チームとしてよりわかりやすい方を選ぶで良いのではと思ってます。
Ateam LifeDesign Advent Calendar 2024では、その他にもたくさんの記事を投稿しています。
ぜひご覧ください。ではまた！ 