【JavaScript】初回訪問時のみ要素を表示する方法

「初めて訪問したユーザーにだけウェルカムメッセージを出したい」——そんなときはlocalStorage に「訪問済み」フラグを保存して判定します。

仕組みはシンプルで、フラグが無ければ表示してフラグを立てるだけです。リセット方法や「一定期間後にまた表示する」応用、ストレージの使い分けまで解説します。

完成イメージ（動くデモ）

↓ このページを初めて開いたときだけメッセージが出ます。「リセット」を押すと初回表示を再現できます（ページを再読み込みすると2回目以降の挙動も確認できます）：

localStorageで初回訪問を判定する（基本）

表示したい要素はCSSで display: none にしておき、初回訪問のときだけ JavaScript で表示します。getItem は値が無いと null を返すので、それで初回かどうか分かります。

<div id="welcome" style="display:none;">ようこそ！初めての訪問ですね。</div>

document.addEventListener("DOMContentLoaded", () => {
  const visited = localStorage.getItem("visited");

  if (!visited) {
    // 初回訪問：要素を表示
    document.getElementById("welcome").style.display = "block";
    // 訪問済みとして記録（次回からは表示されない）
    localStorage.setItem("visited", "true");
  }
});

localStorage はブラウザを閉じても残るため、2回目以降の訪問では表示されません。localStorage の基本操作はlocalStorageの使い方完全ガイドを参照してください。

function isFirstVisit() {
  try {
    if (localStorage.getItem("visited")) return false;
    localStorage.setItem("visited", "true");
    return true;
  } catch (e) {
    return false; // ストレージが使えない環境では出さない
  }
}

if (isFirstVisit()) {
  document.getElementById("welcome").style.display = "block";
}

もう一度表示する・リセットする（removeItem）

動作確認のたびに初回表示を見たいときや、ユーザーの「もう一度表示」操作には、フラグを removeItem で削除します。

// 訪問済みフラグを削除（次回また初回扱いになる）
localStorage.removeItem("visited");

// すべて消すなら localStorage.clear();（他のデータも消えるので注意）

開発中は、ブラウザの開発者ツール（Application → Local Storage）から削除しても確認できます。

「N日後にまた表示」する（期限付き）

キャンペーン告知のように、一定期間が過ぎたら再表示したい場合は、「true」ではなく表示した日時（タイムスタンプ）を保存し、経過時間で判定します。

const KEY = "welcomeShownAt";
const DAY = 24 * 60 * 60 * 1000;
const shownAt = localStorage.getItem(KEY);

// 未表示、または前回表示から7日以上経過していたら表示
if (!shownAt || Date.now() - Number(shownAt) > 7 * DAY) {
  document.getElementById("welcome").style.display = "block";
  localStorage.setItem(KEY, String(Date.now())); // 今の時刻を記録
}

localStorage 自体には有効期限がないため、このようにタイムスタンプを保存して自分で判定します。

応用：「最初の3回まで表示」のように回数で制御したい場合は、true の代わりに回数（数値）を保存します。const n = Number(localStorage.getItem("count") || 0); で読み出し、n < 3 なら表示して localStorage.setItem("count", String(n + 1)) とインクリメントします。

localStorage / sessionStorage / Cookie の使い分け

「初回かどうか」の保存先はいくつかあり、保持期間や用途で選びます。

「同じタブを開いている間だけ」なら sessionStorage、保持期間の詳しい違いはlocalStorageとsessionStorageの違いと使い分け、Cookieの有無で表示を切り替える方法はCookieの有無で要素を表示・非表示する方法を参考にしてください。

よくある質問（FAQ）

まとめ

初回訪問時のみ要素を表示するには、localStorage に訪問済みフラグを保存し、無ければ表示してフラグを立てる、という流れが基本です。リセットは removeItem で行います。

「一定期間後にまた表示」したいなら、タイムスタンプを保存して経過時間で判定します。セッション中だけなら sessionStorage、サーバー側でも判定するなら Cookie、と用途に合わせて使い分けましょう。