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の読み込み忘れには注意してください。
よくある質問（FAQ）
Q. ページ読み込み後に一度だけ実行したい処理はどう書きますか？
A. DOMContentLoadedイベントまたはwindow loadイベントのコールバックに書きます。DOMContentLoadedはDOM解析完了後、loadは画像等の全リソース読み込み完了後に発火します。
Q. DOMContentLoadedとwindow.onloadの違いは？
A. DOMContentLoadedはHTMLのDOM解析が完了した時点で発火します。window.onloadは画像・スタイルシート・スクリプト等の全リソースが読み込まれた後に発火します。DOM操作はDOMContentLoadedで十分な場合がほとんどです。
Q. moduleスクリプト（type=”module”）はいつ実行されますか？
A. moduleスクリプトはdefer属性と同様に非同期で読み込まれ、DOMContentLoadedの直前に実行されます。DOMが解析されてから実行されるため、DOMContentLoadedイベントを使わなくてもDOM操作が可能です。
まとめ
| 方法 | 特徴 |
|---|---|
window.onload |
ページ全体の読み込み完了後に実行 |
DOMContentLoaded |
HTML構造の読み込み完了後に実行（高速） |
localStorage併用 |
初回アクセス時のみに制御可能 |
jQueryの$(document).ready() |
jQuery使用時の簡易実装方法 |
JavaScriptでの「一度だけ処理」は、ユーザー体験を向上させるちょっとしたテクニックとして非常に便利です。特定の動作を適切なタイミングで制御し、快適なUIを実現しましょう。
