【JavaScript】初回読み込み（アクセス）時にのみ処理を実行する

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

本記事では、JavaScriptで初回読み込み（アクセス）時にのみ処理を実行する方法をご紹介しています。

初回読み込み時（アクセス）時にのみ処理を実行させる方法は色々あると思いますが、本記事では比較的導入しやすいCookieとWeb Storage APIを使用した方法を3パターンご紹介しています。

最初はユーザーに視認してもらいたいけれど、ずっと表示しておく必要がないコンテンツ……例えばローディングアニメーションやオーバーレイで表示するキャンペーンバナーといったものに有効かと思います。

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

Cookieにアクセス履歴を残して判定する方法

Cookieにユーザーが訪問した履歴を残しておき、アクセス時に初回訪問か、訪問済みのユーザーかを判定します。

下記の例では、初回アクセス時にCookieにvisited: trueのキーと値のペアを追加し、アクセス時にCookieを確認することで、訪問状況を判定しています。

function setCookie(key, value){
    document.cookie = key+'='+value+';';
}

function getCookie(key){
    
    const cookies = document.cookie;
    const cookiesAry = cookies.split(';');
    
    for(let i = 0; i < cookiesAry.length; i++){
        let cookie = cookiesAry[i].split('=');
        if( cookie[0] === key){
            return cookie;
        }
    }
}

const keyName= 'visited';
const keyValue= true;
const cookie = getCookie(keyName);

if(typeof cookie === 'undefined' || cookie[1] !== keyValue){
    //Cookieをセットする
    setCookie(keyName, keyValue);

    //ここに初回アクセス時の処理
    console.log("初めての訪問です");

} else {
    //ここに通常アクセス時の処理
    console.log("訪問済みです");

}

sessionStorageにアクセス履歴を残して判定する方法

sessionStorageはセッションが続く間、値を保持しておくことができるWeb Storage APIです。Cookieのようにキーと値のペアで保存することができます。Cookieのように有効期間等の設定はできませんが、APIで削除、もしくはブラウザを閉じたタイミングでデータをクリアしたい場合に有効です。

const keyName = 'visited';
const keyValue = true;

if (!sessionStorage.getItem(keyName)) {
    //sessionStorageにキーと値を追加
    sessionStorage.setItem(keyName, keyValue);

    //ここに初回アクセス時の処理
    console.log("初めての訪問です");

} else {
    //ここに通常アクセス時の処理
    console.log("訪問済みです");

}

localStorageにアクセス履歴を残して判定するく方法

localStorageは有効期限を設けずに永続的に値を保持しておきたい場合に有効なWeb Storage APIです。sessionStorageと同様にキーと値のペアで保存することができます。一度アクセスしてユーザーがlocalStorageのデータを削除するか、APIで削除するまで保持しておきたい場合に有効な方法です。

const keyName = 'visited';
const keyValue = true;

if (!localStorage.getItem(keyName)) {
    //localStorageにキーと値を追加
    localStorage.setItem(keyName, keyValue);

    //ここに初回アクセス時の処理
    console.log("初めての訪問です");

} else {
    //ここに通常アクセス時の処理
    console.log("訪問済みです");

}

最後に

本記事でご紹介した3パターンの方法は、それぞれ用途が異なるものです。基本的にCookieに有効期限を設定しておくことが使いやすいかと思いますが、sessionStorageやlocalStorageの方が直感的で使いやすいので、案件によっては採用しても良いかもしれませんね。

以上、JavaScriptで初回読み込み（アクセス）時にの処理を実行する方法のご紹介でした！