【JavaScript】ページ表示からフォーム送信までの経過時間を取得する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでページ表示からフォーム送信までの経過時間を取得する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

ページ表示からフォーム送信までの経過時間の取得方法

JavaScriptでページが表示されてからフォームが送信されるまでの時間（submitされるまでの時間）は下記のイベントプロパティで取得することができます。

submitEvent.timeStamp

戻り値はミリ秒単位のタイムスタンプです。1秒=1000ミリ秒となります。ミリ秒だと扱いずらいな…秒に変換したいな…という場合は1000で除算し、小数点以下を切り捨ててご使用ください。

参考：https://developer.mozilla.org/ja/docs/Web/API/Event/timeStamp

ページ表示からフォーム送信までの経過時間を取得する

ページ表示からフォーム送信までの経過時間を取得してみます。ここではsubmitEvent.timeStampで取得したタイムスタンプ値をp要素のテキストコンテンツに表示してみます。デモを用意していますので、取得したタイムスタンプの値とフォームの動作を確認してみてくださいね。

HTML

<form action="">
    <p></p>
    <button>送信</button>
</form>

JavaScript

const myFunc = ()=>{
    //フォーム取得
    const form = document.forms[0];
    //フォーム内のp要素を取得
    const timeStamp = form.querySelector('p');

    //formのsubmitイベント
    form.addEventListener('submit', (event)=>{

        //submitEventからtimeStampを取得してp要素のテキストコンテンツに代入
        timeStamp.textContent = event.timeStamp + 'ミリ秒経過';

        //(確認用)ページ遷移しないようにイベントキャンセル
        event.preventDefault();
        
    }, false);
};
myFunc();

実行結果

See the Pen 7451 by ryohei (@intotheprogram) on CodePen.

最後に

ページが表示されてからフォームが送信されるまでの経過時間を取得することで、ユーザーがページに訪問してから送信するまでのおおよその滞在時間がわかるようになります。もしそれがフォームだけのページであればユーザーが入力にかかった時間を測ることができます。長く時間がかかっているようであれば入力項目を減らしたり、より使いやすいフォームに改善する目安になります。経過時間はsubmitEvent.timeStampで取得することができますので、フォーム構築で活用していきましょう！

以上、JavaScriptでページ表示からフォーム送信までの経過時間を取得する方法のご紹介でした！