JavaScript querySelectorで劇的変化！10選の使い方とサンプルコード

はじめに
●JavaScript querySelectorとは
- ○querySelectorの基本
●querySelectorの使い方
●querySelectorの応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScript querySelectorで劇的に変わる10選の使い方とサンプルコードが身につきます。

初心者でも分かりやすい徹底解説で、すぐに活用できるスキルを身につけていきましょう！

●JavaScript querySelectorとは

querySelectorは、JavaScriptでHTML要素を簡単に取得できるメソッドです。

CSSセレクタを使って要素を指定し、ページ内から該当する要素を取得することができます。

これにより、要素のスタイルや内容の変更、イベントの追加など、さまざまな操作が可能になります。

○querySelectorの基本

querySelectorを使う場合、次のような構文を使用します。

const element = document.querySelector('CSSセレクタ');

ここで、’CSSセレクタ’には、取得したい要素を指定するCSSセレクタを記述します。

そして、該当する最初の要素が取得され、elementに代入されます。

●querySelectorの使い方

ここでは、querySelectorの基本的な使い方を4つのサンプルコードで紹介します。

○サンプルコード1：HTML要素の取得

このコードでは、id属性が’sample’の要素を取得しています。

この例では、idが’sample’の要素を取得し、elementに代入しています。

const element = document.querySelector('#sample');
console.log(element);

○サンプルコード2：複数の要素を取得する

このコードでは、querySelectorAllを使って、すべての’class-name’クラスを持つ要素を取得しています。

この例では、すべての’class-name’クラスを持つ要素を取得し、elementsに代入しています。

const elements = document.querySelectorAll('.class-name');
console.log(elements);

○サンプルコード3：クリックイベントの追加

このコードでは、idが’button’の要素を取得し、クリックイベントを追加しています。

この例では、idが’button’の要素を取得し、クリックされたときに’Hello, World!’と表示するイベントを追加しています。

const button = document.querySelector('#button');
button.addEventListener('click', () => {
  alert('Hello, World!');
});

○サンプルコード4：要素の属性値を操作する

このコードでは、idが’text’の要素を取得し、テキスト内容を変更しています。

この例では、idが’text’の要素を取得し、そのテキスト内容を’こんにちは、世界！’に変更しています。

const text = document.querySelector('#text');
text.textContent = 'こんにちは、世界！';

●querySelectorの応用例

querySelectorを活用することで、さまざまなWebページの機能を実装できます。

ここでは、応用例として6つのサンプルコードを紹介します。

○サンプルコード5：タブ切り替え機能の実装

このコードでは、タブをクリックすると、対応するコンテンツが表示されるタブ切り替え機能を実装しています。

この例では、タブ要素とコンテンツ要素をquerySelectorを使って取得し、クリックイベントを設定しています。

const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.content');

tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    tabs.forEach(t => t.classList.remove('active'));
    tab.classList.add('active');
    contents.forEach(c => c.classList.remove('active'));
    contents[index].classList.add('active');
  });
});

○サンプルコード6：フィルタリング機能の実装

このコードでは、リストから特定の条件に一致するアイテムを表示するフィルタリング機能を実装しています。

この例では、フィルタ条件を入力するテキストボックスと、リストアイテムを取得して、条件に一致するアイテムを表示しています。

const filterInput = document.querySelector('#filter-input');
const listItems = document.querySelectorAll('.list-item');

filterInput.addEventListener('input', () => {
  const filterValue = filterInput.value.toLowerCase();
  listItems.forEach(item => {
    const itemText = item.textContent.toLowerCase();
    if (itemText.includes(filterValue)) {
      item.style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  });
});

○サンプルコード7：アコーディオンメニューの実装

このコードでは、クリックするとコンテンツが開閉するアコーディオンメニューを実装しています。

この例では、メニュータイトル要素とコンテンツ要素を取得し、クリックイベントでコンテンツを開閉させています。

const accordionTitles = document.querySelectorAll('.accordion-title');

accordionTitles.forEach(title => {
  title.addEventListener('click', () => {
    const content = title.nextElementSibling;
    content.classList.toggle('active');
  });
});

○サンプルコード8：モーダルウィンドウの実装

このコードでは、ボタンをクリックした際にモーダルウィンドウが表示され、閉じるボタンを押すとウィンドウが消える機能を実現しています。

この例では、モーダルウィンドウを表示するボタンと、閉じるボタンをquerySelectorを使って取得し、クリックイベントを設定してモーダルウィンドウを開閉しています。

const openModalButton = document.querySelector('#open-modal');
const closeModalButton = document.querySelector('#close-modal');
const modal = document.querySelector('.modal');

openModalButton.addEventListener('click', () => {
  modal.classList.add('show');
});

closeModalButton.addEventListener('click', () => {
  modal.classList.remove('show');
});

○サンプルコード9：ドラッグアンドドロップ機能の実装

このコードでは、要素をドラッグして別の場所にドロップできる機能を実装しています。

この例では、ドラッグ対象の要素とドロップエリアの要素を取得し、ドラッグイベントとドロップイベントを設定しています。

const draggable = document.querySelector('.draggable');
const dropzone = document.querySelector('.dropzone');

draggable.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', draggable.id);
});

dropzone.addEventListener('dragover', (e) => {
  e.preventDefault();
});

dropzone.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  const draggedElement = document.getElementById(id);
  dropzone.appendChild(draggedElement);
});

○サンプルコード10：簡単なスライダーの実装

このコードでは、簡単な画像スライダーを実装しています。

この例では、スライダー内の画像要素を取得し、次へボタンと前へボタンのクリックイベントで画像を切り替えています。

const sliderImages = document.querySelectorAll('.slider-image');
const prevButton = document.querySelector('#prev');
const nextButton = document.querySelector('#next');
let currentIndex = 0;

function showImage(index) {
  sliderImages.forEach(image => image.classList.remove('active'));
  sliderImages[index].classList.add('active');
}

prevButton.addEventListener('click', () => {
  currentIndex--;
  if (currentIndex < 0) {
    currentIndex = sliderImages.length - 1;
  }
  showImage(currentIndex);
});

nextButton.addEventListener('click', () => {
  currentIndex++;
  if (currentIndex >= sliderImages.length) {
    currentIndex = 0;
  }
  showImage(currentIndex);
});

●注意点と対処法

querySelectorを使用する際には、いくつかの注意点があります。

ここでは、それらの注意点と対処法を説明します。

要素が存在しない場合のエラー

querySelectorで存在しない要素を取得しようとすると、nullが返されます。
この状態で操作を行おうとすると、エラーが発生します。
対処法としては、要素がnullでないことを確認してから操作を行うようにしましょう。

const element = document.querySelector('#nonexistent-element');
if (element !== null) {
  // 要素が存在する場合の処理
} else {
  console.log('要素が見つかりませんでした。');
}

複数の要素を取得する際の注意

querySelectorAllで複数の要素を取得した場合、NodeListというオブジェクトが返されます。
NodeListはArrayと似ていますが、Arrayのメソッドが一部使えないため、注意が必要です。
対処法としては、Array.from()を使ってNodeListをArrayに変換してから操作を行うと便利です。

const elements = document.querySelectorAll('.example');
const elementsArray = Array.from(elements);
elementsArray.forEach(element => {
  // 各要素に対する処理
});