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

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

はじめに

JavaScriptでミリ秒を操作する技術は、Webサイト制作において非常に重要な役割を果たします。

この記事では、初心者の方々にもわかりやすく、ミリ秒操作の基本から応用まで詳しく解説していきます。

ミリ秒操作の習得により、より洗練されたWebサイトの制作が可能になります。

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

JavaScriptでミリ秒を操作する基本的な方法について説明します。

ミリ秒操作は、時間に関連する処理を行う際に非常に重要です。

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

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

JavaScriptにおいてミリ秒を操作する際には、Dateオブジェクトが欠かせません。

Dateオブジェクトは日付や時刻の取得・操作を行うための優れたツールです。

ここからは、Dateオブジェクトを活用したミリ秒操作の基本的な方法をご紹介します。

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

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

上記のコードでは、まずDateオブジェクトを生成して現在の日時を取得します。

そして、getTime()メソッドを使用して現在のミリ秒を取得しています。

最後に、console.log()を使ってミリ秒を表示しています。

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

ここからは、実際のプログラミングでよく使用されるミリ秒操作の具体的な使い方とサンプルコードをいくつか紹介します。

この例を参考にすることで、ミリ秒操作の実践的な活用方法を学ぶことができます。

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

現在のミリ秒を表示する方法は、Webアプリケーションの開発において頻繁に使用されます。

この操作には、DateオブジェクトのgetTime()メソッドを利用します。

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

このコードを実行すると、コンソールに現在のミリ秒が表示されます。

この値は、1970年1月1日午前0時（UTC）からの経過ミリ秒数を表しています。

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

特定の時間が経過した後に処理を実行する機能は、多くのWebアプリケーションで必要とされます。

JavaScriptでは、setTimeout()関数を使用してこの機能を実現できます。

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

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

この機能は、ユーザーへの通知やアニメーションの制御など、様々な場面で活用できます。

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

ミリ秒単位で正確にカウントダウンするタイマーは、オンラインゲームやオークションサイトなど、時間を厳密に管理する必要があるWebアプリケーションで重要な役割を果たします。

次のコードは、そのようなタイマーを実装する方法を表しています。

// カウントダウンするミリ秒数
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：経過時間をミリ秒で表示する

ユーザーの操作に対する反応時間や、特定のプロセスの実行時間を計測する場合、経過時間をミリ秒で表示する機能が役立ちます。

次のHTMLとJavaScriptのコードは、ボタンのクリックによって経過時間をミリ秒で表示しています。

<!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つの日付をミリ秒に変換し、その差を計算して絶対値を返します。

結果は、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という3つのメソッドがあります。

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関数は新しい関数を返すため、その関数をイベントリスナーに渡すことでデバウンス処理が適用されます。

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

これで、リサイズイベントが連続して発生した場合でも、最後のイベントから500ミリ秒経過後にのみ処理が実行されるため、不要な処理を削減し、パフォーマンスを向上させることができます。

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

throttle処理は、デバウンス処理と似ていますが、一定時間ごとに必ず処理を実行する点が異なります。

この方法は、スクロールイベントの処理や、API呼び出しの頻度制限などに適しています。

次のコードは、ミリ秒を使った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処理を適用しています。

これにより、スクロールイベントが頻繁に発生しても、1000ミリ秒（1秒）ごとにしか処理が実行されないため、過剰な処理を防ぎ、スムーズなスクロール体験を提供することができます。