こんにちは、Ryohei(@ityryohei)です!

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

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でページ表示からフォーム送信までの経過時間を取得する方法のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。