API アクセスの時間を計測する方法

パフォーマンスのボトルネックを特定や、キャッシュ有無の確認に API アクセス時間を計測したいケースはよくあります。そこでこの記事では、performance.now()を使う方法とDateオブジェクトを使う方法を解説します。

performance.now()を使う方法

performance.now()は、高精度のタイムスタンプを提供するメソッドで、特にパフォーマンスの計測に適しています。

以下のコード例では、performance.now()を使用して API アクセスの開始と終了の時間を記録し、その差分から実行時間を計算しています。

// Node.jsではコアモジュールの一部なのでそのまま読み込み可
import { performance } from 'perf_hooks'

const startTime = performance.now()
const res = await axios.get('https://api.example.com/data')
const endTime = performance.now()
const executionTime = endTime - startTime

ちなみに Web ブラウザにおいては performance オブジェクトはグローバルスコープで存在するので import 不要です。

注意点としては、Next.js のページコンポーネントなどサーバーサイドとフロントエンドが混在しているケースにおいては、import するとクライアント側には perf_hooks は存在しないのでエラーになることです。

そのため、以下のようにクライアントサイドとサーバーサイドを分けた関数を作っておくなど対策が必要です。

const performanceNow = (): number => {
  if (typeof window === 'undefined') {
    const { performance } = require('perf_hooks')
    return performance.now()
  }
  return performance.now()
}

Date オブジェクトを使う方法

もう一つの方法として、JavaScript の標準的なDateオブジェクトを使用する方法があります。

以下のコード例では、new Date().getTime()を使用して API アクセスの開始と終了の時間を取得し、その差分から実行時間を計算しています。

// JavaScript組み込みのDateオブジェクトを使う方法
const startTime = new Date().getTime()
const res = await axios.get('https://api.example.com/data')
const endTime = new Date().getTime()
const executionTime = endTime - startTime

上記 2 つの違い

• 精度: performance.now()はマイクロ秒単位での精度があり、より正確な計測が可能です。一方、Dateオブジェクトはミリ秒単位での精度しかありません。
• 使用場所: performance.now()はブラウザ環境と Node.js の両方で利用可能ですが、Node.js ではperf_hooksモジュールをインポートする必要があります。Dateオブジェクトはどの環境でも利用可能で、特別なインポートは不要です。

まとめ

API アクセスの簡単な計測方法としてperformance.now()またはDateオブジェクトを使う方法をご紹介しました。精度が求められる場合はperformance.now()の使用が推奨されますが、大抵の場合は簡単に実装できるDateオブジェクトで良いと思われます。実際、自分もほとんどのケースではDateオブジェクトで書いています。