技術系約6分で読めます

ソース解説(3) 旗を折るのではなく、読み込まない

公開 2026年9月26日

クッキー同意のバナーは、置くこと自体は難しくありません。難しいのは、「同意していない人には何も送っていない」と自分で言い切れる形にすることでした。

今回はその部分のコードを読んでいきます。保存する形、版番号を持たせた理由、そして「読み込まない」という選び方です。

連載「ソース解説」（全10回）

第3回。前回：目次は本文から作る　次回：速くしたら、デプロイが止まった（近日公開）

この記事で扱うこと

同意の記録をどう保存しているか、壊れた記録をどう扱うか、離れた部品へどうやって変化を伝えているか、そしてJavaScriptが動かない環境で何をしないことにしたかです。

止めているのは1つだけ

最初に決めたのは、何に対して同意を求めるかです。

このサイトが読み込むものを数えると、外部へ通信するのはタグマネージャー1つでした。書体は自前で配信しているので提供元への通信は起きません。紹介リンクは、押して移動したときに初めて相手へ届きます。問い合わせの送信先は、送信ボタンを押したときだけ呼ばれます。

項目を増やすほど、選んでもらえなくなる

読了状態と明暗の設定も保存していますが、こちらはサイトの中で完結していて外へ出ません。止める理由が無いので、同意の対象に入れていません。

並べるのは、実際に止まるものだけにしています。止まらないものを並べると、選ぶ手間だけが増えます。

保存する形

記録はこの形です。

export type ConsentRecord = {
  analytics: boolean;
  decidedAt: string;
  version: number;
};

保存先はCookieではありません。サーバー側がこの値を使わないからです。Cookieはリクエストのたびに自動で送られますが、送り先に使い道がありません。ブラウザの中だけに置いています。

decidedAt を持っているのは、あとから「いつ同意したか」を示せるようにするためです。

版番号を持たせた理由

version が、この設計でいちばん考えた部分です。

const VERSION = 1;

何に同意を求めるかが変わったら、この数字を上げます。版が違う記録は「まだ答えていない」として扱い、もう一度たずねます。

古い同意を、新しい送信先に流用できない

同意は「そのとき説明されたものに対して」もらっています。

あとから送信先を1つ足したときに、以前の同意をそのまま使い回すと、その人が知らない相手へ黙って送り始めることになります。聞き直す手間より、そちらのほうが問題として大きい。

版番号は、その判断を忘れても実行される形にしたものです。

壊れている記録は、無かったことにする

読み出す側は、自分で書いた値でも疑っています。

const parsed: unknown = JSON.parse(raw);
if (typeof parsed !== "object" || parsed === null) return null;

const record = parsed as Partial<ConsentRecord>;
if (typeof record.analytics !== "boolean") return null;
if (record.version !== VERSION) return null;

型を unknown で受けているのが要点です。保存されている文字列が、こちらの期待する形である保証はありません。古い形式が残っていることも、別のタブで書き換わっていることもあります。

全体が try で囲んであり、保存が使えない環境では例外が出ます。そのときも null、つまり「同意していない」扱いになります。

壊れたときに、どちらへ倒れるか

プライベートモードなどで保存が読めないと、答えが分かりません。

分からないときに送る側へ倒すか、送らない側へ倒すか。ここでは送らない側に倒しています。判断がつかない状態を「同意あり」として扱う理由がありません。

書き込む側も同じ考え方です。保存に失敗しても、そのページのあいだは選んだとおりに動かします。記録が残らないので次に開いたときはまたたずねますが、「保存できないから同意も無かったことにする」よりは筋が通っています。

離れた部品へ、どう伝えるか

記録するのはバナー、それを見て読み込むかどうか決めるのはタグマネージャー側の部品です。2つは画面上の別の場所にあり、親子の関係もありません。

保存の仕組みには「変わったよ」と教えてくれる機能がないので、自分で合図を投げています。

window.dispatchEvent(
  new CustomEvent<ConsentRecord>(CONSENT_CHANGED, { detail: record }),
);

受け取る側は、こう待っています。

useEffect(() => {
  const sync = () => setGranted(readConsent()?.analytics === true);
  sync();
  window.addEventListener(CONSENT_CHANGED, sync);
  return () => window.removeEventListener(CONSENT_CHANGED, sync);
}, []);

最初に1回読んで、そのあとは合図が来るたびに読み直します。最後の return は後片付けで、これを書かないと画面を移動するたびに待ち受けが増え続けます。