ローディング画面を何度も出していると「煩わしい」と感じますよね。この記事では、
初回の1回のみローディング画面（アニメーション）を出し、ブラウザを閉じない限り、ローディングは発生しなくする
この処理を、「セッション」と「JavaScript」を用いて実装していきます。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
CookieとsessionStrageとlocalStrageの違い
セッションとはなんでしょうか？似たものに、「Cookie」「ローカルストレージ」などがありますので、比べてみます。
データの保存期間が最重要です。
| 特徴 | Cookie | セッションストレージ | ローカルストレージ |
|---|---|---|---|
| データの保存期間 | ブラウザの設定に依存（期限を設定可能） | セッション終了時に消去（ブラウザを閉じると消去） | ユーザーが明示的に消去するまで永続的に保存 |
| 利用目的 | ユーザー設定、トラッキング、認証など | セッション中のデータの一時的な保存 | 永続的なデータの保存、オフラインアプリケーションなど |
| 利用上の制限 | 1ドメインあたりのCookie数に制限あり | 通常はデータサイズが5MB以下に制限される | 通常はデータサイズが5MB以下に制限される |
| 利用場面 | 小規模なデータの保存や短期間の情報保持に適用 | セッション中の情報や一時的な操作の保存に適用 | データの永続的な保存や大規模な情報の保持に適用 |
| データの保存場所 | ブラウザ内のCookieストレージ | ブラウザ内のセッションストレージ | ブラウザ内のローカルストレージ |
今回の場合、
ブラウザを閉じるまではローディング二回目を起こさない。ブラウザを閉じてもう一度アクセスしたら、再度ローディングが発火
こういった仕様なので、JavaScriptでsessionStrageを使用します。
sessionStrageでの処理の流れ
流れとしては、
- sessionStrageのフラグをチェック（sessionStorage.getItem(‘hoge’);）
- もしフラグがない（初回訪問）場合、ローディング処理
- もしフラグがある（二回目以降）場合、ローディングしない
こういった流れがイメージできます。
// セッションストレージからフラグを取得
const isFirstLoad = sessionStorage.getItem('isFirstLoad');
// ページの読み込みが完了したときに実行される関数
window.addEventListener('load', function() {
// フラグがない場合（初回アクセス時）
if (!isFirstLoad) {
// 初回アクセス時の処理を記述
// 例: ローディング画面の表示、セッションストレージへのフラグの保存など
console.log('初回アクセスです');
// セッションストレージにフラグを保存
sessionStorage.setItem('isFirstLoad', true);
} else {
// 2回目以降のアクセス時の処理を記述
console.log('2回目以降のアクセスです');
}
});このコードの中に、ローディング処理を入れていけばいいです。
初回のみローディング画面を出すコード
See the Pen Untitled by samuraibrass (@samuraibrass) on CodePen.
まずHTMLとCSSを見てみますが、ローディング後に出現するコンテンツはdisplay noneにしておき、JS無しのデフォルトではローディング画面が全体を覆い、何も見えないようにしています。
<div class="loading">
<img src="https://shogo-log.com/wp-content/uploads/2024/03/1544077823-1.png" alt="">
</div><!-- /.loading -->
<div class="contents hidden">
<h1>コンテンツ</h1>
</div>.hidden {
display: none;
}
.loading {
position: absolute;
left: 0; top: 0;
width: 100%; height: 100%;
background: #fff;
z-index: 2147483647;
display: grid;
place-content: center;
opacity: 0; /* 初期状態は透明にする */
transition: opacity 0.5s ease; /* アニメーションを適用 */
pointer-events: none; /* 背後のコンテンツにマウスイベントが影響しないようにする */
}
.loading.active {
display: grid;
opacity: 1;
transition: opacity 0.5s ease; /* アニメーションを適用 */
}
img {
width: 312px;
height: 312px;
}
/* JS が無効なときのスタイル */
@media (scripting: none) {
.loading {
display: none;
}
.hidden {
display: block;
}
}次にJavaScriptを見ていきます。
//セッションストレージからフラグを取得:
const isFirstLoad = sessionStorage.getItem('isFirstLoad');ウェブページのセッションストレージから、”isFirstLoad” というキーで保存されている値を取得します。この値は、ページが初回アクセスされたかどうかを示すフラグです。
// ページの読み込みが完了したときに実行される関数:
window.addEventListener('load', function() {
// ここに処理を記述
});
window オブジェクトの load イベントが発生したときに、指定された関数が実行されます。この関数内に、ページの読み込み後に行いたい処理を記述します。
// 初回アクセス時の処理:
if (isFirstLoad !== 'true') {
// 初回アクセス時の処理を記述
} else {
// 2回目以降のアクセス時の処理を記述
}
セッションストレージから取得したフラグが ‘true’ でない場合、つまり初回アクセス時の処理が実行されます。
それ以外の場合、2回目以降のアクセス時の処理が実行されます。
// 初回アクセス時の処理:
const loadingElement = document.querySelector('.loading');
loadingElement.classList.add('active');
ローディング画面を表示するために、loading クラスが付いた要素を取得し、active クラスを追加します。
これにより、CSSでスタイルが適用され、ローディング画面が表示されます。
// ローディング画面の非表示:
setTimeout(function() {
loadingElement.classList.remove('active');
const contentsElement = document.querySelector('.contents.hidden');
contentsElement.classList.remove('hidden');
sessionStorage.setItem('isFirstLoad', 'true');
}, 2000);
setTimeout(function() {
loadingElement.style.display = 'none';
}, 2500);
2秒後に、ローディング画面を非表示にする処理が実行されます。まず、active クラスが削除され、ローディング画面が非表示になります。
その後、さらに0.5秒後に、display: none; スタイルが適用され、要素が完全に非表示になります。
// 2回目以降のアクセス時の処理:
const contentsElement = document.querySelector('.contents.hidden');
contentsElement.classList.remove('hidden');
ページが初回アクセスではない場合、つまり2回目以降のアクセス時には、.contents.hidden クラスを持つ要素を取得し、
hidden クラスを削除してコンテンツを表示します。
このようにして、初回アクセス時にローディング画面を表示し、2秒後にフェードアウトさせて非表示にする処理が実装されています。
意外に使われる一回だけのローディング画面
ローディング画面を都度出すのは煩わしいため、今回の初回のみローディング画面を出す手法は習得しておきたいです。その割にデイトラWeb制作コースのようなプログラミングスクールでも意外に教えられることが無いですし、Web制作を独学している場合は実務まで出くわさないことも多いでしょう。
しょーごログのWeb制作ロードマップで紹介しているコーディング中級Ex課題ではこの仕様を求めているため、ぜひ挑戦してみてください。
超実践編では納期厳守の模擬案件を経験し、スキル面以外にコミュニケーションも徹底レビューを受けることができます。
最近は実案件のノウハウも多いですが、「納期が短い案件の中で、丁寧なコミュニケーションを本当に実践できますか？」
この課題では、極限まで実案件に近い状況で、発注者である私とコミュニケーションを取りながら、
- 見積書提出
- 実装→初稿提出
- レビュー→修正
- 再修正→納品
- 請求書
この流れを実践していただき、最後にzoomであなたに全体レビューを行います。
- 学習はだいたい終わったけど、納期までに納品できるか不安
- 中々継続と紹介で案件が回らない
このような中級者を飛躍させる超実践編、受講には条件がありますので、詳細はリンク先よりご確認下さい。
あなたの挑戦を待っています！！
＼レビューを受けて圧倒的な自信を身につける！／
ご寄付を頂けると今後の更新の励みになります！
