リンク先は存在した。それでも404だった

連載の記事に「次回：〇〇」というリンクを書いています。そこを押すと404でした。

リンク切れは事前に確認していました。結果は0件でした。確認の仕方が間違っていたのです。

何を数えていたか

確認の中身はこうでした。全記事の本文から /blog/ で始まるリンクを抜き出し、その行き先のスラッグがCMSに存在するかを見る。存在しないものがあれば、それがリンク切れです。

この方法で、112本ぶんを突き合わせて0件でした。

2つの集合がずれている

整理すると、こうなっていました。

確認していたのは上の集合で、読む人が見ているのは下の集合でした。差の部分が、そのまま404になります。

書いている側からは見えません。管理画面では第2回が普通に並んでいますし、編集もできます。書き手の視界には、公開前の記事も入っているからです。

直し方を3つ比べた

1つめを外したのは、人が覚えていることを前提にした手順だからです。今回そもそも見落としたのは、覚えていることを前提にした確認をしていたからでした。同じ形の対策を足すと、同じ理由で破れます。

本文を通す場所が、もう1段増えた

このサイトの本文は、表示する前にいくつかの処理を順番に通ります。商品カードを差し込み、リンクの末尾の形を揃え、見出しに目印を付ける。そこに1段足しました。

const posts = await getPosts();

// getPosts() は公開済みのものだけを返す。
// ここに無いスラッグは「CMSには在るが、まだ出ていない」記事になる。
const publishedSlugs = new Set(
  posts.map((p) => p?.slug).filter((s): s is string => Boolean(s)),
);

const rawContent = softenPendingLinks(
  normalizeInternalLinks(injectProducts(post.content)),
  publishedSlugs,
);

判定の材料はもともと手元にありました。前後の記事と関連記事を出すために、記事一覧をすでに取っています。取得の順番を入れ替えただけで、通信は1回も増えていません。

リンクを消さずに、文字にした

return html.replace(POST_LINK, (whole, _before, slug, _after, text) => {
  if (publishedSlugs.has(slug)) return whole;
  return `<span class="pending-link">${text}<span class="pending-link-note">（近日公開）</span></span>`;
});

行き先が無いなら丸ごと消す、という手もありました。選ばなかったのは、予告そのものには意味があるからです。

「（近日公開）」をCSSの装飾ではなく本文の一部として出しているのは、読み上げや、文字を選んでコピーしたときに落ちないようにするためです。押せない理由は、飾りではなく中身として持たせることにしました。

置き換えで壊しそうな場所

本文のHTMLを書き換える処理は、意図しないものまで巻き込みます。6つ試しました。

5つめは見落としやすい形をしています。外部のURLにも /blog/ という並びが現れることがあるので、行き先がサイト内かどうかを先に判定する必要がありました。

確認そのものを直す

今回いちばん効いたのは、コードの修正ではありません。確認の条件を書き直したことです。

条件を書き直して数え直したら、公開中の57本のうち、公開前を指しているリンクは1件でした。指摘を受けたその1件です。数が合ったことで、見落としの範囲が確定しました。

公開日が来たら、本当に戻るのか

「公開日が来れば自動でリンクに戻る」と書きましたが、これは作った側の見込みでしかありません。確かめる機会は、2日後に来ました。

第2回の公開日に、第1回と第2回を両方開いて、連載の案内を見比べました。

第1回の「次回」は、2日前まで押せない文字でした。その日の朝、誰も何も触らないまま押せるリンクになっていて、代わりに第2回の「次回」が押せない文字になっていました。1本ずつ、順送りに開いていく形です。

今回の学び

まず、存在することと、辿り着けることは別だということ。手元のデータで「在る」と確認できても、読む人に配っている集合に入っていなければ意味がありません。確認は、読む人が見るほうの集合でやる必要がありました。

次に、書き手の視界は広すぎること。管理画面には公開前のものも並びます。そこを基準に考えると、自分にだけ見えているものを、全員に見えていると錯覚します。

そして、人が覚えていることを前提にした対策を足さないこと。見落としの原因が「覚えていること前提の確認」だったのに、対策も同じ形にしたら、同じ理由で破れます。表示するときに判定する形にしたのは、そこを繰り返さないためでした。