JavaScriptで要素の表示・非表示を切り替える方法（display・visibility）を完全解説

1. JavaScriptのDOM操作とは？

1. JavaScriptのDOM操作とは？

JavaScriptのDOM操作とは、HTMLで作られたWebページの内容を、あとから自由に変更する仕組みのことです。DOMとは「Document Object Model」の略で、Webページを部品の集まりとして考えたものです。

たとえば、文章、画像、ボタンなどはすべて部品として扱われます。JavaScriptを使うと、それらの部品を取得して、表示したり隠したり、文字を変えたりできます。

難しく考えず、「画面の中のパーツを操作するための仕組み」と覚えておけば大丈夫です。

2. 要素の表示・非表示を切り替える目的

2. 要素の表示・非表示を切り替える目的

JavaScriptで要素の表示・非表示を切り替える理由はたくさんあります。たとえば、説明文を必要なときだけ表示したり、ボタンを押したらメニューを開いたりするためです。

最初からすべて表示してしまうと画面がごちゃごちゃしますが、必要な情報だけを見せることで、見やすく使いやすいWebページになります。

このような動きを実現するために、JavaScriptのDOM操作とCSSの設定を組み合わせて使います。

3. displayプロパティで表示・非表示を切り替える

3. displayプロパティで表示・非表示を切り替える

displayは、HTML要素を画面に表示するか、完全に消すかを決めるCSSの設定です。JavaScriptからこの値を変更することで、要素の表示・非表示を切り替えられます。

displayを「none」にすると、その要素は存在しないかのように扱われ、画面から完全に消えます。元に戻すときは「block」や「inline」などを指定します。

const text = document.getElementById("sample");

text.style.display = "none";   // 非表示
text.style.display = "block";  // 表示

ここでは「style」とは見た目の設定、「display」は表示方法を意味します。「none」は表示しないという意味だと覚えてください。

4. visibilityプロパティの特徴

4. visibilityプロパティの特徴

visibilityも要素の表示・非表示を切り替えるためのCSS設定ですが、displayとは少し動きが違います。

visibilityを「hidden」にすると、要素は見えなくなりますが、そこにあった場所はそのまま残ります。つまり、透明になったようなイメージです。

const box = document.getElementById("box");

box.style.visibility = "hidden"; // 見えなくする
box.style.visibility = "visible"; // 再表示

displayは「席ごと消す」、visibilityは「席はあるけど姿が見えない」と考えると理解しやすいです。

5. displayとvisibilityの違いを理解しよう

5. displayとvisibilityの違いを理解しよう

displayとvisibilityはどちらも非表示にできますが、使いどころが違います。

画面のレイアウトを詰めたい場合はdisplay、場所はそのままで一時的に隠したい場合はvisibilityを使うと便利です。

初心者のうちは「完全に消したいならdisplay」「透明にしたいならvisibility」と覚えておけば問題ありません。

6. 実際のHTMLと組み合わせた例

6. 実際のHTMLと組み合わせた例

ここでは、HTMLとJavaScriptを組み合わせて、文字の表示・非表示を切り替える簡単な例を紹介します。

<p id="message">ここに表示されるメッセージ</p>
<button onclick="toggle()">切り替え</button>

function toggle() {
  const msg = document.getElementById("message");

  if (msg.style.display === "none") {
    msg.style.display = "block";
  } else {
    msg.style.display = "none";
  }
}

ボタンを押すたびに、文字が表示されたり消えたりします。条件分岐を使って、今の状態に応じて動きを変えています。

7. 初心者がつまずきやすいポイント

7. 初心者がつまずきやすいポイント

JavaScriptで表示・非表示を切り替えるとき、「なぜ動かないのか分からない」と感じることがあります。その多くは、idの指定ミスや、displayの値の書き間違いが原因です。

英単語はすべて小文字で書くこと、要素のidがHTMLと一致していることを、落ち着いて確認するようにしましょう。

ゆっくり一つずつ確認すれば、必ず理解できるようになります。