Web制作をしていると、「ページを更新せずに表示を切り替えたい」という場面はよくあります。
たとえば、バナーの表示・非表示、メニューの開閉、タブの切り替え、ログイン状態に応じた表示変更などです。こうした動きは、JavaScriptを使うことで実現できます。
今回は、リロードなしで表示を切り替える仕組みについて、基本的な考え方を整理してみます。
■ なぜリロードなしが必要なのか
通常のWebページでは、内容を変えるためにページ全体を再読み込みすることがあります。
しかし、毎回リロードが発生すると、ユーザーにとっては待ち時間が生まれ、操作感も重たくなります。
一方、JavaScriptを使って画面の一部だけを書き換えれば、必要な部分だけを切り替えることができます。
この方法なら、ページ全体を再表示する必要がないため、見た目も自然で、使いやすいUIを作ることができます。
■ 基本の考え方
表示切り替えの基本はとてもシンプルです。
JavaScriptで対象のHTML要素を取得し、display: none; を付けたり外したりして、見せる・隠すを制御します。
たとえば、ボタンを押したときにバナーを表示する場合、次のような考え方になります。
- HTMLで表示対象を用意する
- JavaScriptでその要素を取得する
- ボタン操作や条件分岐で表示状態を変更する
この流れを理解すると、さまざまな応用がしやすくなります。
■ シンプルなコード例
以下は、ボタンを押すと表示・非表示を切り替える基本例です。
<button id="toggleBtn">表示切替</button><div id="banner" style="display:none;">
バナーを表示しています
</div><script>
const btn = document.getElementById('toggleBtn');
const banner = document.getElementById('banner'); btn.addEventListener('click', function() {
if (banner.style.display === 'none') {
banner.style.display = 'block';
} else {
banner.style.display = 'none';
}
});
</script>このコードでは、最初はバナーを非表示にしておき、ボタンを押すたびに表示状態を切り替えています。
非常にシンプルですが、「リロードなしで表示を変える」という基本はしっかり押さえられています。
■ 実務ではどう使うのか
実務では、単にボタンで切り替えるだけでなく、外部データと連携して表示を変えることもあります。
たとえば、GASで作成したWebアプリケーションページの情報を定期的に取得し、その値がONなら表示、OFFなら非表示にする、といった使い方です。
この場合は、fetch() を使ってデータを取得し、その内容に応じて表示を制御します。
こうすることで、ユーザーがページを開いたままでも、画面表示を自動で更新できます。
■ WordPressへの応用
この仕組みは、WordPressにも十分応用できます。
たとえば、固定バナーの表示切り替えや、お知らせの自動表示、キャンペーン表示のオンオフなどです。
特に、ユーザーが長時間ページに滞在するサイトでは、リロードなしで状態を更新できることが大きなメリットになります。
ページ更新を待たずに表示が変わるため、よりリアルタイム性の高いサイト運用が可能になります。
■ まとめ
リロードなしで表示を切り替えるJavaScript実装は、ユーザー体験を向上させるための基本技術のひとつです。
仕組み自体はシンプルですが、使い方次第でWebサイトの表現や利便性を大きく高めることができます。
まずはボタンによる表示切り替えのような基本から始めて、慣れてきたら外部データ連携やWordPressへの応用に広げていくと理解が深まります。
「表示を変える」だけでも、JavaScriptの力を実感できるはずです。
