JavaScriptでミリ秒操作！初心者向け10選の使い方とサンプルコード

はじめに
●JavaScriptでミリ秒を操作する基本
- ○Dateオブジェクトを使ったミリ秒操作
●JavaScriptでミリ秒操作の使い方とサンプルコード
●注意点と対処法
●カスタマイズの方法と応用例
まとめ

はじめに

この記事を読めば、JavaScriptでミリ秒を操作する方法が身につき、Webサイト制作の幅が広がります。

初心者向けに、ミリ秒操作の基本から応用まで詳しく解説していきます。

●JavaScriptでミリ秒を操作する基本

○Dateオブジェクトを使ったミリ秒操作

JavaScriptでミリ秒を操作する際には、Dateオブジェクトを使用します。

Dateオブジェクトは、日付や時刻を取得・操作するためのオブジェクトです。

ここでは、Dateオブジェクトを使ったミリ秒操作の基本を紹介します。

// 現在の日時を取得する
let now = new Date();

// 現在のミリ秒を取得する
let millis = now.getTime();
console.log(millis); // 出力例: 1649554279367

上記のサンプルコードでは、Dateオブジェクトを生成して現在の日時を取得し、getTime()メソッドを使って現在のミリ秒を取得しています。

console.log()でミリ秒を表示しています。

●JavaScriptでミリ秒操作の使い方とサンプルコード

○サンプルコード1：現在のミリ秒を表示する

現在のミリ秒を表示する方法です。

DateオブジェクトのgetTime()メソッドを使用します。

// 現在のミリ秒を取得して表示する
let now = new Date();
let millis = now.getTime();
console.log(millis); // 出力例: 1649554279367

○サンプルコード2：指定したミリ秒後に処理を実行する

指定したミリ秒後に処理を実行する方法です。

setTimeout()関数を使用します。

// 1000ミリ秒後に処理を実行する
setTimeout(() => {
  console.log("1秒後に実行されました");
}, 1000);

上記のサンプルコードでは、setTimeout()関数を使って1000ミリ秒（1秒）後にコンソールにメッセージを表示しています。

○サンプルコード3：ミリ秒単位でのカウントダウンタイマー

ミリ秒単位でカウントダウンするタイマーを作成する方法です。

// カウントダウンするミリ秒数
const countdownMillis = 5000;

// カウントダウン開始時刻を取得
const startTime = new Date().getTime();

// カウントダウン処理
const countdown = () => {
  const currentTime = new Date().getTime();
  const remainingMillis = countdownMillis - (currentTime - startTime);

  if (remainingMillis > 0) {
    console.log(`残り${remainingMillis}ミリ秒`);
    setTimeout(countdown, 100);
  } else {
    console.log("カウントダウン終了");
  }
};

// カウントダウンを開始
countdown();

上記のサンプルコードでは、まずカウントダウンするミリ秒数を設定し、カウントダウン開始時刻を取得しています。

次に、カウントダウン処理を実装する関数countdownを定義し、カウントダウン開始時刻からの経過時間をミリ秒単位で取得しています。

そして、残り時間が0ミリ秒以上の場合は、残りミリ秒を表示し、setTimeout()関数で100ミリ秒ごとにカウントダウン処理を繰り返しています。

○サンプルコード4：経過時間をミリ秒で表示する

経過時間をミリ秒で表示する方法です。

次のサンプルコードでは、ボタンをクリックした際に経過時間をミリ秒で表示します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>経過時間をミリ秒で表示</title>
</head>
<body>
  <button id="startButton">開始</button>
  <button id="endButton">終了</button>
  <p id="elapsedMillis">経過ミリ秒: -</p>

  <script>
    const startButton = document.getElementById('startButton');
    const endButton = document.getElementById('endButton');
    const elapsedMillis = document.getElementById('elapsedMillis');

    let startTime;

    startButton.addEventListener('click', () => {
      startTime = new Date().getTime();
    });

    endButton.addEventListener('click', () => {
      const endTime = new Date().getTime();
      const elapsedTime = endTime - startTime;
      elapsedMillis.innerText = `経過ミリ秒: ${elapsedTime}`;
    });
  </script>
</body>
</html>

上記のサンプルコードでは、開始ボタンと終了ボタンを用意し、それぞれのボタンをクリックした際に経過時間をミリ秒単位で表示します。

開始ボタンがクリックされると、現在時刻を取得し、終了ボタンがクリックされると、再度現在時刻を取得して、その差を計算して表示します。

○サンプルコード5：ミリ秒単位でアニメーションを制御する

ミリ秒単位でアニメーションを制御する方法です。

次のサンプルコードでは、ミリ秒単位で要素のアニメーションを制御しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ミリ秒単位でアニメーションを制御する</title>
  <style>
    #movingElement {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="movingElement"></div>

  <script>
    const movingElement = document.getElementById('movingElement');
    const duration = 2000; // アニメーション時間（ミリ秒）
    const startPosition = 0;
    const endPosition = 300;

    let startTime;

    // アニメーション関数
    function animate(timestamp) {
      if (!startTime) startTime = timestamp;
      const progress = timestamp - startTime;

      // 位置を計算
      const position = startPosition + ((endPosition - startPosition) * progress) / duration;
      movingElement.style.left = `${position}px`;

      // アニメーションが完了するまで繰り返す
      if (progress < duration) {
        requestAnimationFrame(animate);
      }
    }

    // アニメーション開始
    requestAnimationFrame(animate);
  </script>
</body>
</html>

上記のサンプルコードでは、アニメーションの時間（duration）を2000ミリ秒（2秒）として、要素を左から右に移動させます。

アニメーション関数（animate）では、経過時間を計算し、要素の位置を更新しています。

アニメーションが完了するまで、requestAnimationFrameを使ってアニメーション関数を繰り返し呼び出します。

○サンプルコード6：ミリ秒を日時や時刻に変換する

このサンプルコードでは、ミリ秒を日時や時刻に変換する方法を示しています。

// ミリ秒を日時や時刻に変換する関数
function convertMillisToDateTime(millis) {
  const date = new Date(millis);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const seconds = date.getSeconds().toString().padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

// 使用例
const millis = 1628864709000;
console.log(convertMillisToDateTime(millis)); // "2021-08-13 22:38:29" (タイムゾーンによって結果が異なる)

上記のサンプルコードでは、convertMillisToDateTime関数を使って、ミリ秒を日時や時刻に変換しています。

この関数では、Dateオブジェクトを使用して、年、月、日、時、分、秒を取得し、適切なフォーマットで結果を返します。

○サンプルコード7：2つの日付のミリ秒差を求める

このサンプルコードでは、2つの日付のミリ秒差を求める方法を示しています。

// 2つの日付のミリ秒差を求める関数
function getMillisDifference(date1, date2) {
  const millis1 = date1.getTime();
  const millis2 = date2.getTime();

  return Math.abs(millis1 - millis2);
}

// 使用例
const date1 = new Date('2021-08-13 12:00:00');
const date2 = new Date('2021-08-14 14:00:00');

console.log(getMillisDifference(date1, date2)); // 91800000

上記のサンプルコードでは、getMillisDifference関数を使って、2つの日付のミリ秒差を求めています。

この関数では、getTime()メソッドを使って、2つの日付をミリ秒に変換し、その差を計算して絶対値を返します。

○サンプルコード8：ミリ秒を利用した簡易ストップウォッチ

このサンプルコードでは、ミリ秒を利用した簡易ストップウォッチの作成方法を示しています。

// 簡易ストップウォッチのクラス
class SimpleStopwatch {
  constructor() {
    this.startTime = null;
    this.elapsedTime = null;
  }

  // スタート
  start() {
    this.startTime = new Date().getTime();
  }

  // ストップ
  stop() {
    if (this.startTime === null) {
      console.error('ストップウォッチは開始されていません。');
      return;
    }
    this.elapsedTime = new Date().getTime() - this.startTime;
    this.startTime = null;
  }

  // 経過時間を取得（ミリ秒）
  getElapsedMillis() {
    return this.elapsedTime;
  }
}

// 使用例
const stopwatch = new SimpleStopwatch();
stopwatch.start();
setTimeout(() => {
  stopwatch.stop();
  console.log(stopwatch.getElapsedMillis()); // 経過時間（ミリ秒）が表示される
}, 3000);

上記のサンプルコードでは、SimpleStopwatchというクラスを定義しています。

このクラスには、start、stop、getElapsedMillisというメソッドがあります。

startメソッドでストップウォッチを開始し、stopメソッドでストップウォッチを停止すると、その間の経過時間がミリ秒単位でgetElapsedMillisメソッドで取得できます。

○サンプルコード9：ミリ秒を使ったデバウンス処理

このサンプルコードでは、ミリ秒を使ったデバウンス処理の方法を示しています。

// デバウンス関数
function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

// 使用例
const debouncedFunction = debounce(() => {
  console.log('デバウンスされた関数が実行されました。');
}, 500);

window.addEventListener('resize', debouncedFunction);

上記のサンプルコードでは、debounce関数を定義しています。

この関数には、デバウンス処理を行いたい関数（func）と、実行を遅延させる時間（wait）を引数として渡します。

debounce関数は、新しい関数を返すので、その関数をイベントリスナーに渡すことで、デバウンス処理が適用されます。

例として、ウィンドウのリサイズイベントにデバウンス処理を適用しています。

○サンプルコード10：ミリ秒を使ったthrottle処理

このサンプルコードでは、ミリ秒を使ったthrottle処理の方法を示しています。

// ソロットル関数
function throttle(func, limit) {
  let lastCall = 0;
  return function (...args) {
    const now = new Date().getTime();
    if (now - lastCall >= limit) {
      lastCall = now;
      func.apply(this, args);
    }
  };
}

// 使用例
const throttledFunction = throttle(() => {
  console.log('ソロットルされた関数が実行されました。');
}, 1000);

window.addEventListener('scroll', throttledFunction);

上記のサンプルコードでは、throttle関数を定義しています。この関数には、throttle処理を行いたい関数（func）と、実行の間隔を制限する時間（limit）を引数として渡します。

throttle関数は、新しい関数を返すので、その関数をイベントリスナーに渡すことで、throttle処理が適用されます。

例として、ウィンドウのスクロールイベントにthrottle処理を適用しています。