JavaScriptでズームリセット！実践コード10選

はじめに
●JavaScriptとズームリセットの基本
- ○JavaScriptとは
- ○ズームリセットの仕組み
●実践！JavaScriptでズームリセットする方法10選
●簡単に注意点を紹介
●カスタマイズのポイント
まとめ

はじめに

本記事では、JavaScriptとズームリセットの基本概念から始まり、実践的なサンプルコードを10種類ご紹介します。

さらに、実装時の注意点や対処法、カスタマイズ方法までを網羅的に説明いたします。

初心者の方々にも理解しやすいよう、丁寧に解説を進めてまいります。

●JavaScriptとズームリセットの基本

JavaScriptとズームリセットについて、その基本的な概念と仕組みを解説します。

当該知識は、ウェブページでのズーム機能を実装する上で不可欠です。

まずはJavaScriptの基本的な特徴から見ていきましょう。

○JavaScriptとは

JavaScriptは、ウェブページに動的要素を追加するために広く使用されているプログラミング言語です。

HTMLとCSSで構築された静的なページに対し、JavaScriptを適用することで、ユーザーとのインタラクションが可能となります。

ズームリセット機能も、JavaScriptを用いることで容易に実現できます。

○ズームリセットの仕組み

ズームリセットとは、ウェブページの表示を拡大・縮小した後、元の表示サイズに戻す機能を指します。

JavaScriptを利用して、ボタンのクリックや特定の操作をトリガーとし、ページのズームレベルを元の状態にリセットすることが可能です。

●実践！JavaScriptでズームリセットする方法10選

ここからは、具体的なJavaScriptコードを使用して、ズームリセット機能を実装する方法を10種類ご紹介します。

このサンプルコードを参考にすることで、様々なシチュエーションに対応したズームリセット機能を実装することができます。

それでは、最も基本的な実装方法から見ていきましょう。

○サンプルコード1：単純なズームリセット

最初に、最もシンプルなズームリセット機能の実装方法をご紹介します。

このサンプルコードでは、ボタンをクリックすることで、ページのズームレベルが100％（元の表示サイズ）にリセットされます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ズームリセットサンプル1</title>
<script>
function resetZoom() {
  document.body.style.zoom = "100%";
}
</script>
</head>
<body>
<p>ズームを変更してから、下記のボタンをクリックしてリセットしてみてください。</p>
<button onclick="resetZoom()">ズームリセット</button>
</body>
</html>

上記のコードでは、resetZoom関数を定義し、その中でdocument.body.style.zoomに”100%”を代入することでズームリセットを実現しています。

ボタンのonclick属性で、クリック時にresetZoom関数を呼び出す設定を行っています。

○サンプルコード2：ズームイン・ズームアウト・リセットの組み合わせ

次に、ズームイン、ズームアウト、リセットの3つの機能をボタンで実装する方法を解説します。

このサンプルコードでは、ユーザーが自由にズームレベルを調整し、必要に応じてリセットすることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ズームリセットサンプル2</title>
<script>
let zoomLevel = 1;

// ズームイン機能
function zoomIn() {
  zoomLevel += 0.1;
  document.body.style.zoom = zoomLevel;
}

// ズームアウト機能
function zoomOut() {
  zoomLevel -= 0.1;
  document.body.style.zoom = zoomLevel;
}

// ズームリセット機能
function resetZoom() {
  zoomLevel = 1;
  document.body.style.zoom = zoomLevel;
}
</script>
</head>
<body>
<p>下記のボタンでズームイン、ズームアウト、リセットができます。</p>
<button onclick="zoomIn()">ズームイン</button>
<button onclick="zoomOut()">ズームアウト</button>
<button onclick="resetZoom()">ズームリセット</button>
</body>
</html>

このコードでは、zoomLevel変数を使用して現在のズームレベルを管理し、それを操作することでズームイン、ズームアウト、リセットの機能を実現しています。

各ボタンのonclick属性で、クリック時に対応する関数を呼び出す設定を行っています。

○サンプルコード3：マウスホイールでのズームリセット

3つ目のサンプルでは、マウスホイールを使ってページを拡大・縮小し、特定のキー（ここではCtrlキー）を押しながらホイール操作を行うことでズームリセットを実現する方法を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ズームリセットサンプル3</title>
<script>
let zoomLevel = 1;

// マウスホイール操作時の処理
function handleMouseWheel(event) {
  event.preventDefault();

  if (event.ctrlKey) {
    resetZoom();
  } else {
    zoomLevel += event.deltaY > 0 ? -0.1 : 0.1;
    document.body.style.zoom = zoomLevel;
  }
}

// ズームリセット機能
function resetZoom() {
  zoomLevel = 1;
  document.body.style.zoom = zoomLevel;
}

document.addEventListener("wheel", handleMouseWheel);
</script>
</head>
<body>
<p>マウスホイールでズーム操作を行い、Ctrlキーを押しながらホイール操作でリセットができます。</p>
</body>
</html>

このサンプルコードでは、handleMouseWheel関数を作成し、event.deltaYを使用してホイールの回転方向を判定し、ズームイン・ズームアウトを行います。

また、event.ctrlKeyを使用してCtrlキーが押されているかどうかを判定し、押されている場合はズームリセットを実行します。

document.addEventListener("wheel", handleMouseWheel)で、マウスホイール操作時にhandleMouseWheel関数が呼び出されるよう設定しています。

○サンプルコード4：タッチ操作でのズームリセット

4つ目のサンプルでは、ピンチイン・ピンチアウトでズーム操作を行い、ダブルタップでズームリセットを実現する方法を解説します。

このサンプルは、主にモバイルデバイスでの利用を想定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ズームリセットサンプル4</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
let zoomLevel = 1;
let lastTouchEnd = 0;
let touchDistance = 0;

function handleTouchStart(event) {
  if (event.touches.length === 2) {
    touchDistance = Math.hypot(
      event.touches[0].pageX - event.touches[1].pageX,
      event.touches[0].pageY - event.touches[1].pageY
    );
  }
}

function handleTouchMove(event) {
  if (event.touches.length === 2) {
    event.preventDefault();
    const newTouchDistance = Math.hypot(
      event.touches[0].pageX - event.touches[1].pageX,
      event.touches[0].pageY - event.touches[1].pageY
    );
    zoomLevel += (newTouchDistance - touchDistance) * 0.01;
    touchDistance = newTouchDistance;
    document.body.style.zoom = zoomLevel;
  }
}

function handleTouchEnd(event) {
  const currentTime = new Date().getTime();
  if (currentTime - lastTouchEnd < 300) {
    event.preventDefault();
    resetZoom();
  }
  lastTouchEnd = currentTime;
}

function resetZoom() {
  zoomLevel = 1;
  document.body.style.zoom = zoomLevel;
}

document.addEventListener("touchstart", handleTouchStart, { passive: false });
document.addEventListener("touchmove", handleTouchMove, { passive: false });
document.addEventListener("touchend", handleTouchEnd, { passive: false });
</script>
</head>
<body>
<p>ピンチイン・ピンチアウトでズーム操作を行い、ダブルタップでリセットができます。</p>
</body>
</html>

このサンプルコードでは、handleTouchStart関数でタッチ開始時に2本指でタッチされているかを判定し、2本指のタッチ距離を計算します。

handleTouchMove関数で2本指のタッチ距離が変化した際にズーム操作を行い、handleTouchEnd関数でダブルタップが行われたかを判定し、リセットを実行します。

○サンプルコード5：スライダーを使ったズームリセット

5つ目のサンプルでは、スライダーを使用してズームレベルを調整し、ズームリセットを行う方法を紹介します。

このサンプルは、ユーザーが直感的にズームレベルを調整できるインターフェースを提供します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ズームリセットサンプル5</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
function handleSliderChange(event) {
  // スライダーの値に基づいてズームレベルを変更
  const zoomLevel = event.target.value;
  document.body.style.zoom = zoomLevel;
}

function resetZoom() {
  // ズームレベルをリセットし、スライダーの値も更新
  document.body.style.zoom = 1;
  document.getElementById("zoomSlider").value = 1;
}
</script>
</head>
<body>
<p>スライダーを操作してズームレベルを調整し、リセットボタンでズームリセットができます。</p>
<input type="range" id="zoomSlider" min="0.1" max="3" step="0.1" value="1" onchange="handleSliderChange(event)">
<button onclick="resetZoom()">リセット</button>
</body>
</html>

このサンプルコードでは、スライダーの値が変更されたときにhandleSliderChange関数が呼び出され、その値をもとにズームレベルを変更します。

また、リセットボタンが押されたときにresetZoom関数が呼び出され、ズームレベルをリセットし、スライダーの値も更新します。

○サンプルコード6：画像ギャラリーのズームリセット

6つ目のサンプルでは、画像ギャラリー内の画像をクリックするとズームインし、再度クリックするとズームリセットを行う方法を解説します。

このサンプルは、写真やイラストのギャラリーサイトなどで活用できます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ズームリセットサンプル6</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .gallery {
    display: flex;
    flex-wrap: wrap;
  }
  .gallery img {
    width: 100px;
    height: 100px;
    margin: 5px;
  }
</style>
<script>
function handleClickImage(event) {
  const image = event.target;
  // 画像のズームレベルを切り替え
  if (image.style.zoom === "1" || image.style.zoom === "") {
    image.style.zoom = 2;
  } else {
    image.style.zoom = 1;
  }
}
</script>
</head>
<body>
<div class="gallery">
  <img src="image1.jpg" alt="画像1" onclick="handleClickImage(event)">
  <img src="image2.jpg" alt="画像2" onclick="handleClickImage(event)">
  <img src="image3.jpg" alt="画像3" onclick="handleClickImage(event)">
</div>
</body>
</html>

このサンプルコードでは、画像がクリックされたときにhandleClickImage関数が呼び出され、画像のズームレベルを切り替えます。

画像がズームインされていない状態でクリックされると、ズームインします。

ズームインされた状態でクリックされると、ズームリセットが実行されます。

○サンプルコード7：Googleマップのズームリセット

7つ目のサンプルでは、Googleマップのズームリセット機能を実装する方法を紹介します。

このサンプルは、地図アプリケーションやロケーションベースのサービスで活用できます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ズームリセットサンプル7</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  #map {
    width: 100%;
    height: 400px;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script>
let map;

function initMap() {
  const initialZoom = 12;
  const center = { lat: 35.6895, lng: 139.6917 }; // 東京の座標
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: initialZoom,
    center: center,
  });
}

function resetZoom() {
  const initialZoom = 12;
  map.setZoom(initialZoom);
}

window.addEventListener("DOMContentLoaded", initMap);
</script>
</head>
<body>
<div id="map"></div>
<button onclick="resetZoom()">ズームリセット</button>
</body>
</html>

このサンプルコードでは、initMap関数でGoogleマップを初期化し、ズームリセットボタンがクリックされたときにresetZoom関数が呼び出されるよう設定しています。

resetZoom関数では、マップのズームレベルを初期値に戻す処理を行っています。

○サンプルコード8：特定の範囲だけズームリセット

8つ目のサンプルでは、特定の範囲内でのみズームリセットが可能となるよう実装する方法を解説します。

このサンプルは、ウェブページ内の特定のセクションや要素にのみズーム機能を適用したい場合に有用です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ズームリセットサンプル8</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .container {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
  }
  .zoom-area {
    width: 100%;
    height: 100%;
  }
  img {
    width: 100%;
    height: 100%;
  }
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
  const container = document.querySelector(".container");
  const zoomArea = document.querySelector(".zoom-area");
  const img = document.querySelector("img");

  // ホイールイベントを追加
  container.addEventListener("wheel", (event) => {
    // イベント発生源がzoomArea以外なら処理をスキップ
    if (!zoomArea.contains(event.target)) return;

    event.preventDefault();
    const zoomLevel = parseFloat(img.style.zoom || 1);

    if (event.deltaY < 0) {
      img.style.zoom = zoomLevel + 0.1;
    } else {
      img.style.zoom = zoomLevel - 0.1;
    }
  });
});
</script>
</head>
<body>
<div class="container">
  <div class="zoom-area">
    <img src="path/to/your/image.jpg" alt="サンプル画像">
  </div>
</div>
<button onclick="resetZoom()">ズームリセット</button>
<script>
function resetZoom() {
  const img = document.querySelector("img");
  img.style.zoom = 1;
}
</script>
</body>
</html>

このサンプルコードでは、DOMContentLoadedイベントでホイールイベントリスナを追加し、特定の範囲（zoom-area）内でのみズームリセットが可能となるよう設定しています。

範囲外でホイール操作が行われても、ズームが変更されないよう制御しています。

○サンプルコード9：複数の要素に対応するズームリセット

9つ目のサンプルでは、複数の画像要素が存在する場合に、それぞれに対してズームリセットを行える実装方法を紹介します。

このサンプルは、画像ギャラリーやポートフォリオサイトなどで活用できます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ズームリセットサンプル9</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .zoom-area {
    width: 45%;
    height: 300px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  img {
    width: 100%;
    height: 100%;
  }
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
  const container = document.querySelector(".container");

  // ホイールイベントを追加
  container.addEventListener("wheel", (event) => {
    const img = event.target.closest("img");
    if (!img) return;

    event.preventDefault();
    const zoomLevel = parseFloat(img.style.zoom || 1);

    if (event.deltaY < 0) {
      img.style.zoom = zoomLevel + 0.1;
    } else {
      img.style.zoom = zoomLevel - 0.1;
    }
  });
});
</script>
</head>
<body>
<div class="container">
  <div class="zoom-area">
    <img src="path/to/your/image1.jpg" alt="サンプル画像1">
  </div>
  <div class="zoom-area">
    <img src="path/to/your/image2.jpg" alt="サンプル画像2">
  </div>
</div>
<button onclick="resetZoom()">ズームリセット</button>
<script>
function resetZoom() {
  const images = document.querySelectorAll("img");
  images.forEach((img) => {
    img.style.zoom = 1;
  });
}
</script>
</body>
</html>

このサンプルコードでは、DOMContentLoadedイベントでホイールイベントリスナを追加し、複数の画像要素に対してズームリセットが行えるよう設定しています。

ズームリセットボタンを押すと、すべての画像要素のズームが一斉にリセットされます。

○サンプルコード10：カスタマイズ可能なズームリセット

最後のサンプルでは、ズームリセットの実装をカスタマイズしやすいよう関数化する方法を解説します。

このアプローチにより、他の要素やイベントに対応させる際に容易にカスタマイズが可能となります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ズームリセットサンプル10</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .container {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
  }
  img {
    width: 100%;
    height: 100%;
  }
</style>
<script>
// ズームリセット関数を定義
function resetZoom(element) {
  element.style.zoom = 1;
}

document.addEventListener("DOMContentLoaded", () => {
  const container = document.querySelector(".container");
  const image = container.querySelector("img");

  // ホイールイベントを追加
  container.addEventListener("wheel", (event) => {
    event.preventDefault();
    const zoomLevel = parseFloat(image.style.zoom || 1);

    if (event.deltaY < 0) {
      image.style.zoom = zoomLevel + 0.1;
    } else {
      image.style.zoom = zoomLevel - 0.1;
    }
  });

  // ダブルクリックイベントを追加
  container.addEventListener("dblclick", () => {
    resetZoom(image);
  });
});
</script>
</head>
<body>
<div class="container">
  <img src="path/to/your/image.jpg" alt="サンプル画像">
</div>
<button onclick="resetZoom(document.querySelector('img'))">ズームリセット</button>
</body>
</html>

このサンプルコードでは、resetZoom関数を定義し、その関数を利用してズームリセットを行うよう設計しています。

また、ダブルクリックイベントも追加し、画像上でダブルクリックすることでもズームリセットが行えるよう実装しています。