ボタンを押した際にページの移動をせずに、表示を切り替える実装方法について

2026年5月19日 2026年5月19日山崎講師

山崎講師

こんにちは、ゆうせいです。

Webサイトやアプリケーションにおいて、ボタンを押した際に画面全体を再読み込み（リロード）させず、現在のページの一部分だけを変化させる手法は、現代のWeb開発において非常に重要な技術です。この仕組みを理解するために、まずは全体像から解説します。

画面全体の読み込みを挟まない表示の切り替えは、主に「JavaScript」と呼ばれるプログラミング言語を用いて実現します。従来のWebページが「新しい本を丸ごと1冊買い直す」ような仕組みだったのに対し、この手法は「今開いているページの付箋やメモだけを貼り替える」ようなイメージです。

具体的な仕組みと、その実装に伴う事実としてのメリット・デメリットを順を追って確認していきましょう。

画面を遷移させずに表示を変化させる2つのアプローチ

この機能を実装するには、大きく分けて2つのアプローチが存在します。

1. あらかじめ用意した要素の表示・非表示を切り替える方法（DOM操作）

HTMLの中に変化後のコンテンツをはじめから隠して埋め込んでおき、ボタンが押された瞬間にJavaScriptを使ってその要素を「見える状態」にする方法です。

高校の文化祭で、ステージに背景の幕を2枚重ねておき、合図とともに手前の幕を引いて後ろの幕を見せる演出に似ています。

2. ボタンが押された後に新しいデータを取得して書き換える方法（非同期通信・Ajax）

ボタンが押されたタイミングで、バックグラウンドでサーバーへ必要なデータだけを要求し、受け取ったデータを使ってページの一部を書き換える方法です。

教室にいながら、スマートフォンで売店の在庫状況を問い合わせ、返ってきた結果を黒板に書き出すようなイメージです。

技術的な実装例

もっとも基本的な「1. 表示・非表示を切り替える方法」のソースコードを示します。ボタンを押すと、隠されていたテキストが現れる仕組みです。

<button id="changeButton">詳細を表示</button>
<p id="targetText" style="display: none;">ボタンが押されたため、このテキストを表示しました。</p>

<script>
const button = document.getElementById('changeButton');
const text = document.getElementById('targetText');

button.addEventListener('click', function() {
    if (text.style.display === 'none') {
        text.style.display = 'block';
        button.textContent = '詳細を閉じる';
    } else {
        text.style.display = 'none';
        button.textContent = '詳細を表示';
    }
});
</script>

この実装では、JavaScriptがボタンのクリック操作を監視し、ボタンが押された際に「targetText」という識別子を持つ要素の表示状態（display属性）を「none（非表示）」から「block（表示）」へと切り替えています。

ページ移動を伴わない画面変化のメリット

事実として確認できる主なメリットは以下の3点です。

サーバー通信量の削減：ページ全体を構成する画像や共通のレイアウトデータを何度も読み直す必要がないため、データ通信量を抑えることができます。
描画速度の向上：書き換える範囲が限定されているため、ユーザーは一瞬で変化した画面を確認できます。
ユーザー状態の保持：ページがリロードされないため、入力フォームに入力途中のテキストや、スクロールした位置が初期化されずにそのまま残ります。

ページ移動を伴わない画面変化のデメリット

一方で、実装する際には以下のデメリットや注意点にも留意する必要があります。

ブラウザの「戻る」ボタンが機能しない：URLが変わらないため、ユーザーがブラウザの戻るボタンを押した際、1つ前の表示状態ではなく、完全に前のページへと戻ってしまいます。
初回読み込み時の負荷（DOM操作の場合）：あらかじめ多くのデータを仕込んでおく場合、最初のページ表示時に読み込むデータ量が増加します。
検索エンジンへの影響：JavaScriptを実行した後に初めて現れるコンテンツは、検索エンジンのロボットに見落とされる可能性があり、SEO（検索エンジン最適化）において不利に働く場合があります。

まとめ：今後の学習ステップ

ボタンを押した際にページを移動させず画面を変化させる方法は、現在のフロントエンド開発における基礎的な技術です。この技術を確実に身につけるために、以下の順序で学習を進めることを推奨します。

基本的なDOM操作の習得：要素を取得する方法（getElementByIdなど）と、イベントを監視する方法（addEventListener）の仕組みを理解してください。
CSSによる状態制御の理解：表示・非表示を切り替えるための「display: none;」や、アニメーションを伴う変化の付け方を学びます。
非同期通信（Fetch APIなど）の学習：ページをまたがずに外部のサーバーからデータを取得し、画面に反映させる発展的な手法へとステップアップしてください。

まずは提示したサンプルコードを自身の環境で動かし、動作の仕組みを体験することから始めてみてください。

グループでは新人エンジニア研修のアシスタント講師を募集しています。

投稿者プロフィール

山崎講師代表取締役

セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。

学生時代は趣味と実益を兼ねてリゾートバイトにいそしむ。長野県白馬村に始まり、志賀高原でのスキーインストラクター、沖縄石垣島、北海道トマム。高じてオーストラリアのゴールドコーストでツアーガイドなど。現在は野菜作りにはまっている。