【JavaScript】ページ読み込み後に一度だけ実行される処理の書き方

Web制作の中で「ページを開いたときにだけ実行したい処理」が必要になることはよくあります。例えば、初回だけモーダルを表示したり、アニメーションを流したりするケースです。この記事では、JavaScriptでページ読み込み時に一度だけ処理を実行する基本的な方法を解説します。

基本的な書き方 window.addEventListener(“load”)

ページのすべてのリソース（画像やCSSなど）が読み込まれた後に処理を実行したい場合は、loadイベントを使います。

window.addEventListener("load", function () {
  console.log("ページの読み込みが完了しました。");
  // 実行したい処理をここに書く
});

この処理はページ読み込み時に1回だけ実行されます。

より早く処理したい場合 DOMContentLoaded

document.addEventListener("DOMContentLoaded", function () {
  console.log("DOMの構築が完了しました。");
  // DOM要素の取得や表示切り替えなど
});

フォームやUI初期化など、リソース読み込みを待たずに処理したい場合に有効です。

初回アクセス時のみ実行するには？

ユーザーが同じページを再訪問したときに処理を再実行したくない場合は、localStorageやsessionStorageを併用することで制御できます。

例：初回アクセス時のみモーダルを表示

document.addEventListener("DOMContentLoaded", function () {
  if (!localStorage.getItem("visited")) {
    alert("ようこそ、初めての訪問ですね！");
    localStorage.setItem("visited", "true");
  }
});

このコードでは、初回アクセス時にのみalertが表示され、以降のアクセスでは表示されなくなります。

jQueryを使った例

jQueryを使っている場合も、同様に$(document).ready()を利用できます。

$(document).ready(function () {
  console.log("jQueryでページ読み込み完了");
});

シンプルですが、jQueryの読み込み忘れには注意してください。

まとめ

JavaScriptでの「一度だけ処理」は、ユーザー体験を向上させるちょっとしたテクニックとして非常に便利です。特定の動作を適切なタイミングで制御し、快適なUIを実現しましょう。