【コピペで簡単｜JavaScript】ローディングを初回アクセス時のみ表示させる（ライブラリ不要）

2023/01/24 追記
「sessionStorage」の場合、別タブで開いた時にデータを渡せないことに気がついたので「localStorage」での方法をおすすめします🙇‍♀️ （今度記事直しておきます！）

Webサイトのコーディングをしていると、ローディングを表示させたいという要件はわりとあります。

ページ数の少ないホームページなどであればページ読み込みの度にローディングが表示されても気になりませんが、メディアサイトなどだと毎回はちょっと邪魔に感じます。

こちらの記事では、初回アクセス時のみローディングを表示させたい！というときに使えるコードをご紹介します。

※
「初回アクセス時に処理を実行させる」というものなので、ローディング以外でも応用できます

概要｜JavaScriptを使って初回アクセス時のみ処理を実行させる

ライブラリなどを読み込まずに実現することができるため、今回はJavaScriptの「sessionStorage」を使っていきます。

sessionStorageってなに？

sessionStorageとは、ブラウザに元々ある保存領域のこと。
JavaScriptでデータを保存・取得・削除・初期化することができます。

ちなみに「セッション」とは、Webサイトにアクセスされてからアクセス終了までの一連の通信のこと。

別のページに移動してもそれは1つのセッションとみなされます。
ウィンドウを閉じたり、同じページを長時間開いたままにしているとセッションが切れます。

参考：Window.sessionStorage – Web API | MDN

実装する

デモ

codepenおいておきます。デモはこんな感じ。

2秒でローディング画面がフェードアウトしていき、その後はセッションが続いている場合は表示されません。

再度確認したい場合は、Chromeのゲストモードなどで開くと確認できると思います！

ポイント解説していきます〜

HTML：ローディング用

今回はローディング画面をアクセス時のみ表示させるので、ローディングのHTMLを記述します。

CSSは.loadingにbackground-imageで背景画像設置するイメージ！

<div id="js-loading" class="loading">
	<p>loading</p>	
</div>

JavaScript：今回のきも！初回のみ実行させるコード

if文を使って、初めてのアクセスの時のみ実行させる処理を書きます。

sessionStorage.setItem(sessionKey, sessionValue);でデータを保存してアクセスの跡を残すのがポイント。

else以降は、確認用に書いているだけなので実際はなくても◎

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

if (!sessionStorage.getItem(sessionKey)) {
	//1回だけ実行させたい処理を書く（今回はローディングの処理）
	setTimeout(function(){
	$('#js-loading').fadeOut();
	},2000);

	//sessionStorageに保存
	sessionStorage.setItem(sessionKey, sessionValue);
}else{	
	console.log('アクセス済みだよ')
}

sessionStorageうまく使えましたか？

いろいろゴニョゴニョしないとだめかなと思ったら、「sessionStorage」があるおかげでだいぶシンプルに実装することができました。

このためにライブラリ読み込むのもなって感じなので、使えるときはsessionStorageおすすめです。

• sessionStorageの使い方参考：
  https://b-risk.jp/blog/2021/07/sessionstorage/