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

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

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

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

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍