Cookieレスで状態を保持する：window.nameを使った初回処理制御テクニック

「同一タブで初回のみ処理したい」という要件とは

WebサイトやWebアプリケーションでは、「何度も実行されると困る処理」が少なくありません。特に近年は、疑似的なページ遷移や動的なコンテンツ更新が増え、「同じタブで何度もページを行き来する」ケースが一般的になっています。

代表的なユースケースは次のようなものです。

• 初回表示時のみローディングアニメーションやヒーローアニメーションを再生したい
• 初期化処理やライブラリのセットアップを一度だけ行いたい
• 計測・ログ送信を同一タブ内で一度だけ実行したい
• SPA的な挙動の中で、最初の1回だけ特別な処理をしたい

このような要件では、「ページをリロードしたか」「別タブかどうか」を意識した状態管理が必要になります。

CookieやlocalStorageを使わずに状態管理したい理由

初回判定と聞くと、CookieやlocalStorageを使う方法を思い浮かべる方も多いでしょう。しかし、これらの手段は今回の要件に対して必ずしも最適とは限りません。

Cookieの場合、同意管理（CMP）の対象になりやすく、技術的には単純な初回制御であっても、法的・運用的な配慮が必要になることがあります。また、有効期限の設計や削除タイミングの管理も避けられません。

localStorageやsessionStorageは、JavaScriptから手軽に扱える一方で、同一オリジン内で共有されるという特性があります。そのため「同一タブ限定」で状態を管理したい場合には過剰であり、意図せず別タブにも影響が及ぶことがあります。

今回のように「同一タブ内でのみ有効で、タブを閉じたら自然に消えてほしい」という用途では、より軽量で限定的な仕組みが求められます。

window.nameとは何か（基本仕様と挙動）

window.name は、ブラウザの window オブジェクトが持つプロパティの一つで、文字列を保持できます。

console.log(window.name); // 初期状態では空文字列

一見すると古いAPIに見えますが、次のような特徴を持っています。

• 同一タブ内でページ遷移しても値が保持される
• ページをリロードしても値が保持される
• タブを閉じると値がリセットされる
• 保存できるのは文字列のみ

これらの挙動は、「同一タブ内だけで状態を保持したい」という要件と非常に相性が良いものです。

window.nameが「同一タブ限定の初回制御」に向いている理由

window.name の最大の特徴は、「タブに紐づいて状態が保持される」点にあります。CookieやlocalStorageのようにブラウザ全体やオリジン単位で共有されることがなく、タブを閉じることで自動的に状態が破棄されます。

この性質により、

• 同一タブでは一度きり
• 別タブでは影響しない
• 明示的な削除処理が不要

という、初回処理制御にとって理想的な挙動を自然に実現できます。特別なライブラリや複雑な管理ロジックを用意する必要がない点も、大きなメリットです。

window.nameを使った初回処理制御の基本パターン

最もシンプルな実装例は次の通りです。

<script>
if (window.name !== 'initialized') {
  // 初回のみ実行したい処理
  console.log('初回処理を実行');

  window.name = 'initialized';
}
</script>

このコードでは、window.name に特定の値が入っているかどうかで初回か否かを判定しています。

• ページ初回表示：処理が実行される
• リロード：再実行されない
• 同一タブ内でのページ遷移：再実行されない
• タブを閉じて再度開く：再び実行される

「このタブで一度だけ実行したい」という条件を、非常にシンプルに満たすことができます。

複数の初回処理を管理する応用パターン

実務では、初回処理が1つだけとは限りません。その場合は、window.name に JSON 文字列を保存して管理すると柔軟に対応できます。

let state = {};

try {
  state = window.name ? JSON.parse(window.name) : {};
} catch (e) {
  state = {};
}

if (!state.firstAnimation) {
  runAnimation();
  state.firstAnimation = true;
}

if (!state.firstLog) {
  sendLog();
  state.firstLog = true;
}

window.name = JSON.stringify(state);

このようにすることで、初回アニメーション、初回モーダル表示、初回計測など、複数の「一度きり処理」を同一タブ内でまとめて管理できます。

window.nameを使う際の注意点と設計上のポイント

window.name は便利な反面、用途を誤ると問題の原因にもなります。

まず、保存できるのは文字列のみであり、大きなデータや複雑な構造の管理には向いていません。また、別ドメインへ遷移した場合でも値が保持されるため、機密情報や個人情報を保存するべきではありません。

向いていないケースとしては、ユーザー識別、ログイン状態の管理、長期間にわたる状態保持、複数タブ間での同期などが挙げられます。あくまで「軽量・一時的・同一タブ限定」という条件を満たす用途に絞って使うことが重要です。

まとめ：window.nameを使った初回処理制御の考え方

window.name を活用することで、CookieやlocalStorageに頼らず、同一タブ内に限ったシンプルな状態管理が可能になります。ページ遷移やリロードをまたいでも状態を保持しつつ、タブを閉じれば自然にリセットされるという特性は、「初回のみ処理したい」という要件に非常に相性が良いと言えます。

一方で、window.name は万能ではなく、永続的なデータ管理やユーザー識別には向いていません。用途を限定し、適切な場面で使うことが重要です。

Cookie規制や同意管理を避けたい場面、軽量に初回処理を制御したい場面では、window.name は今でも十分に実用的な選択肢です。状態管理の引き出しの一つとして、ぜひ活用してみてください。