こんにちは、私はシニアフルスタック開発者のHaroonです。今日は、ほぼすべてのプロジェクトで使用できる、非常に便利な JavaScript 関数をいくつか紹介します

1. ビューポート内の要素の可視性を追跡します。

このユーティリティは、Intersection Observer API を使用して、ビューポート内の要素の可視性を追跡します。要素が表示されるかどうかを示すブール値を使用してコールバック関数を呼び出します。

function onVisibilityChange(element, callback) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => callback(entry.isIntersecting));
  });
  observer.observe(element);
}

// Example usage:
const targetElement = document.querySelector('#target');
onVisibilityChange(targetElement, (isVisible) => {
  console.log(`Element is ${isVisible ? 'visible' : 'not visible'}`);
});

2. リアクティブビューポートブレークポイント

このユーティリティを使用すると、ブレークポイントを定義し、ビューポートの幅がこれらのブレークポイントを越えたときに通知を受け取ることができます。現在のブレークポイント値を使用してコールバック関数を呼び出します。

function onBreakpointChange(breakpoints, callback) {
  const mediaQueries = breakpoints.map(bp => window.matchMedia(`(max-width: ${bp}px)`));

  function checkBreakpoints() {
    const breakpoint = breakpoints.find((bp, i) => mediaQueries[i].matches);
    callback(breakpoint || 'default');
  }

  mediaQueries.forEach(mq => mq.addListener(checkBreakpoints));
  checkBreakpoints();
}

// Example usage:
onBreakpointChange([600, 900, 1200], (breakpoint) => {
  console.log(`Current breakpoint: ${breakpoint}`);
});

3. リアクティブクリップボード API

このユーティリティはコピー イベントをリッスンし、コピーされたテキストをクリップボードから読み取り、コピーされたテキストでコールバック関数を呼び出します。

function onClipboardChange(callback) {
  document.addEventListener('copy', async () => {
    const text = await navigator.clipboard.readText();
    callback(text);
  });
}

// Example usage:
onClipboardChange((text) => {
  console.log(`Copied text: ${text}`);
});

4. リアクティブ画面方向 API

このユーティリティは、画面の向きの変化をリッスンし、現在の向きのタイプでコールバック関数を呼び出します。

function onOrientationChange(callback) {
  window.addEventListener('orientationchange', () => {
    callback(screen.orientation.type);
  });
}

// Example usage:
onOrientationChange((orientation) => {
  console.log(`Current orientation: ${orientation}`);
});

5. マウスがページから離れたかどうかを示す反応状態

このユーティリティは、マウスがページを離れるとき、またはページに入るときを追跡し、マウスがページから離れたかどうかを示すブール値を使用してコールバック関数を呼び出します。

function onMouseLeavePage(callback) {
  document.addEventListener('mouseleave', () => {
    callback(true);
  });

  document.addEventListener('mouseenter', () => {
    callback(false);
  });
}

// Example usage:
onMouseLeavePage((hasLeft) => {
  console.log(`Mouse has ${hasLeft ? 'left' : 'entered'} the page`);
});

これらの各ユーティリティは、イベント リスナーと最新の API を利用して、JavaScript アプリケーションにリアクティブな動作を提供します。

これらの強力な JavaScript ユーティリティを一緒に探索するために時間を割いていただきありがとうございます。皆さんも私と同じように便利で刺激的なものだと感じていただければ幸いです。プロジェクトでこれらの関数を自由に試して、開発プロセスをどのように強化できるかを確認してください。ご質問がある場合、または独自のヒントを共有したい場合は、コメントに書き込んでください。コーディングを楽しんでください!