「今月の産地」が古くならないように、作り直した

先日、自主制作の「旅暦珈琲」を見直していて、おかしなことに気づきました。9月に入っているのに、トップの「今月の産地」が、8月のインドネシアのままだったのです。

旅暦珈琲は、毎月15日に産地が切り替わる横浜の焙煎所、という設定で作ったサイトです。架空のお店ですが、この種の間違いは、実際のお店のサイトでも起きます。

何が起きていたか

産地のデータには、「いまはこれ」という印を、手で付けていました。

// 一部を抜粋
{ id: "aceh", monthNum: "2026.08", isCurrent: true }

新しい月の産地を追加するとき、前の月の印を外し忘れる。あるいは、追加そのものを忘れる。どちらの場合も、サイトはエラーを出さずに、古い情報を出し続けます。気づけるのは、誰かが画面を見たときだけです。

直し方：印をやめて、日付を持たせる

印の代わりに、各産地に発表日（startDate）を持たせました。そして、いまの日付から「発表日を過ぎているものの中で、いちばん新しいもの」を選ぶようにしました。

const started = sorted.filter((o) => new Date(o.startDate) <= today);
const current = started[started.length - 1];

これで、産地のデータを追加さえすれば、15日を迎えた時点で表示が切り替わります。追加を忘れたときも、「先月のまま止まって見える」だけで、間違った情報にはなりません。

古い月は、見せない

産地暦のカードは、直近3か月分だけを出すようにしました。データは残したまま、表示するのは新しい3件だけです。1年たっても、ページが長くなり続けません。カードの色も、表示の順番から自動で決まるようにして、月ごとに手で指定するのをやめました。

ついでに直したこと

• 小さな文字の色を、WCAGのAA基準（通常の文字でコントラスト比4.5:1）に届くまで濃くした。目で見て判断せず、数値を測って確かめた
• アイコン、シェアされたときの画像、robots.txt、サイトマップを追加した

学んだこと

営業時間の「本日」、キャンペーンの「開催中」、ブログの「新着」。お店のサイトには、同じ作りにできる場所がたくさんあります。日付と、日付から答えを出すルールだけを持たせておけば、更新の手間が減るだけでなく、「更新し忘れ」というミスの種類そのものが消えます。