【JavaScript】performance.now()の使い方について解説！

どうも、こんにちは！ピコっそです。
JavaScriptで作品を制作している中で、最近とくによく使っている関数があります。
それが performance.now() です。

この関数は少しクセがありますが、使い方を理解すれば「処理速度の計測」や「パフォーマンスの最適化」など、さまざまな場面で活用できるとても強力な関数です。

特に、ゲーム制作やアニメーションのように“ミリ秒単位の精度”が求められる場面では欠かせません。

今回はそんな performance.now() の基本的な使い方から、活用のコツまで分かりやすく解説していきます。ぜひ最後まで読んでみてください！

performance.now()とは
performance.now()の使い方
1. 使い方例（基本）
2. 使い方例（応用）
まとめ
最後に

performance.now()とは

performance.now() は、ページの読み込み（またはリロード）からの経過時間を、ミリ秒単位（小数点以下も含む高精度）で取得する関数です。

イメージとしては「ストップウォッチ」を思い浮かべると分かりやすいでしょう。
たとえば、あなたが50m走を走るとき、「よーい、ドン！」の合図でストップウォッチの計測が始まり、ゴールした時点でタイムが記録されますよね。

performance.now() も同じように、ページを読み込んだ瞬間を“スタート”として時間を記録し続ける関数です。
そのため、「ページを開いてから何ミリ秒経ったか？」を正確に知ることができます。

特にJavaScriptでは、プログラムの処理速度やアニメーションの動きを正確に測定するため、この関数を使いことが多いです。

performance.now()の使い方

続いて、performance.now()の基本的な使い方を解説します。

performance.now()の基本構文は、

performance.now();

このまま。

この構文を使って、プログラムの処理速度やアニメーションの動きを正確に行うコードを書いていく流れになります。

使い方例（基本）

ではperformance.now()の使い方について、見ていきましょう。

const time = performance.now();
console.log(time);

出力：

12.34567890123456

このコードはページを読み込んでからの時間を取得するコードとなっており、出力された数値は、「ページを読み込んでから約12.34ミリ秒経過した」という意味になります。

ポイント
・performance.now()はミリ秒まで正確に取得する

・定数timeの代入時にページ読み込み時間が取得される

・console.log(time)はあくまで取得したデータをそのまま出力するだけ

使い方例（応用）

続いて、中級者の方が使うperformance.now()のコード例を解説します。

<body>
    //inputでボタンを設定
    <input type="button" id="btn" value="ボタン">
　　//結果を表示させるresultを用意
    <p><span id="result"></span></p>
    
    <script>
　　　　//DOM操作でIDをそれぞれ取得
        const btn = document.getElementById("btn");
        const result = document.getElementById("result");

        // 計測開始時間を保持する変数
        let start;

        // ボタンがクリックされたときの処理
        btn.addEventListener('click', () => {
        // スタートが押されていない場合（1回目のクリック）
        if (!start) {
            start = performance.now(); // 現在の時間（ミリ秒）を取得
            result.textContent = "スタート！"; // メッセージを表示
        } else {
            // 2回目のクリックで経過時間を計算
            const end = performance.now();// 現在の時間を再取得
            // 経過時間を秒に変換して小数点2桁に丸める
            const total = ((end - start) / 1000).toFixed(2);
            result.textContent = total + '秒';// 結果を表示
            start = null; // 次の測定に備えてリセット
            }
        });
    </script>
</body>

出力例：