【Javascript】簡単に初回アクセス時に処理を実行をさせよう！

はじめに
- この記事の概要
- 対象となる方
jQueryを使用する方法
- jQueryとjquery.cookie.jsの読み込み
- 実装
sessionStorageを使用する方法
- 実装
まとめ

はじめに

この記事の概要

こんにちは。エンジニア（コーディング）のタクヤです。
今回はJavascriptで初回アクセス時にのみ特定の処理を実行させる方法をご紹介します。
今回紹介する方法は、jQueryを使用する方法とJavascriptでsessionStorageを利用する方法の２つです。

今回はよくありそうな、「初回アクセス時のみポップアップを表示させる」を例に説明します！

対象となる方

Javascriptを勉強中の方
Web制作でコーディングをしている方
初回アクセス時にのみ特定の処理を実行させる方法を知りたい方
ポップアップを初回アクセス時のみ表示させたい方

jQueryを使用する方法

最初に、jQueryを使用して初回アクセス時のみポップアップを表示させる方法をご紹介します。
jQueryはjavascriptのライブラリで、簡単な記述方法や使いやすさから多くのWebサイトで使用されています。

今回は、jQueryと派生ライブラリのjquery.cookie.jsを使用します。

参考
jQueryhttps://jquery.com/

jQueryとjquery.cookie.jsの読み込み

まず何よりも先にライブラリを読み込まなくてははなりません。
どちらもCDNがありますのでそれを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

実装

CDNを読み込んだので、処理を実行させるためのコードを書いていきます。

HTML

<div class="c-modal l-modal">
  <div class="c-modal__text">
    <p class="">初回アクセス時のみ表示されます。<br />（OKを押してリロードすると表示されません）</p>
  </div>
  <div class="c-modal__btn">
    <button class="c-btn">OK</button>
  </div>
</div>

CSS

.c-modal {
  background-color: #eeeeee;
  border-radius: 4px;
}

.c-modal__text {
  padding: 40px 20px;
  text-align: center;
}

.c-modal__btn {
  background-color: #cfcfcf;
  border-radius: 0 0 4px 4px;
  padding: 12px 40px;
}

.c-btn {
  background-color: #e45f2a;
  border: none;
  border-radius: 4px;
  color: #ffffff;
  display: block;
  margin: auto;
  padding: 12px 40px;
}

.l-modal {
  left: 50%;
  margin: auto;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
}

jQuery

$(function(){
	$(".overlay").show();
    $.cookie('btnFlg') == 'on'?$(".overlay").hide():$(".overlay").show();
    $(".btn_area button").click(function(){
    	$(".overlay").fadeOut();
        $.cookie('btnFlg', 'on', { expires: 30,path: '/' }); //cookieの保存
	});
});

こんな感じに表示されます↓↓↓

OKボタンを押してリロードすると表示されません。
chromeのデベロッパーツールのアプリケーション＞ストレージ＞ Cookie を確認してください。
btnFlgというキーに”on”というバリューがあるかどうかで初回アクセスかどうかを判別しています。
これで簡単に初回アクセス時のみ処理を実行をさせることができました。

sessionStorageを使用する方法

次に、sessionStorageを使用して初回アクセス時のみポップアップを表示させる方法をご紹介します。

sessionStorageは、Webページのセッションが続いている間データを保存しておけるものです。
localStorageに保存されたデータには期限がないのに対して、sessionStorageに保存されたデータはページのセッションが終了するときに消去されます。
sessionStorageを使うと、ページを閉じてもそのブラウザウィンドウもしくはタブを閉じない限り情報を保持し続けることができます。

参考
sessionStoragehttps://developer.mozilla.org

実装

今回はライブラリは使わず生のJavascriptを使うのでCDNの読み込みは必要ありません。
そのままHTMLとJavascriptのコードを書いていきます。（CSSは先程使用したものをそのまま使います。）

HTML

<div id="modal" class="c-modal l-modal" style="display: none">
　　<div class="c-modal__text">
　　　　<p class="">初回アクセス時のみ表示されます。<br />（OKを押してリロードすると表示されません）</p>
　　</div>
　　<div class="c-modal__btn">
　　　　<button id="btn" class="c-btn">OK</button>
　　</div>
</div>

Javascript

const sessionKey = "accesed";
const sessionValue = true;

//sessionStorageにsessionKeyというデータの有無を判別
if (!sessionStorage.getItem(sessionKey)) {
  //初回アクセス時の処理
  document.getElementById("modal").style.display = "block";
  document.querySelector(".c-btn").addEventListener("click", () => {
    document.getElementById("modal").style.display = "none";
    //sessionStorageにデータを追加
    sessionStorage.setItem(sessionKey, sessionValue);
  });
} else {
  //ここに通常アクセス時の処理
  console.log("アクセス済み");
}

OKボタンを押してリロードすると表示されません。

chromeのデベロッパーツールのアプリケーション＞ストレージ＞セッションストレージを確認してください。
sessionStorageのaccessedというキーがtrueかどうかで初回アクセスかどうかを判別しています。
ポップアップのOKボタンを押したときに、sessionStorageにデータを追加しています。

これでJavascriptで初回アクセス時のみ処理を実行をさせることができました。