ブログ記事日時修正の実装計画 - レビュー依頼

Goal

ブログ記事のpublished_at/updated_atが日付のみで時刻情報がないため、同日の記事のソート順が不定になっている問題を修正する。全20記事のフロントマターをISO 8601タイムスタンプ形式に変更し、表示用の日付フォーマット関数を追加する。

Step-by-step Plan

Step 1: 日付フォーマット関数の追加

ファイル: /home/ena/yolo-web/src/lib/date.ts（新規作成）

/**
 * ISO 8601タイムスタンプから表示用の日付文字列を生成する。
 * 例: "2026-02-14T07:57:19+09:00" -> "2026-02-14"
 */
export function formatDate(isoString: string): string {
  const date = new Date(isoString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
}

注意: new Date() でパースし、ローカルタイムゾーンではなくUTCで変換するとJSTとずれる可能性がある。タイムスタンプが全て+09:00なので、toLocaleDateString ではなく、ISOStringをスライスする方が安全。

修正版:

export function formatDate(isoString: string): string {
  // ISO 8601文字列から日付部分を抽出する。
  // タイムゾーン付きの場合はDateオブジェクト経由でJST日付を取得。
  // 日付のみ(YYYY-MM-DD)の場合はそのまま返す。
  if (/^\d{4}-\d{2}-\d{2}$/.test(isoString)) {
    return isoString;
  }
  // +09:00のタイムスタンプをJST日付として取得するため、
  // Intlを使ってAsia/Tokyoで日付部分を取得する
  const date = new Date(isoString);
  const formatter = new Intl.DateTimeFormat("sv-SE", {
    timeZone: "Asia/Tokyo",
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
  });
  return formatter.format(date); // "2026-02-14" 形式
}

sv-SE ロケールは "YYYY-MM-DD" 形式を返すため、現行の表示形式と互換性がある。

Step 2: テストファイルの追加

ファイル: /home/ena/yolo-web/src/lib/__tests__/date.test.ts（新規作成）

import { describe, it, expect } from "vitest";
import { formatDate } from "@/lib/date";

describe("formatDate", () => {
  it("ISO 8601タイムスタンプからYYYY-MM-DD形式を返す", () => {
    expect(formatDate("2026-02-14T07:57:19+09:00")).toBe("2026-02-14");
  });

  it("日付のみの入力はそのまま返す", () => {
    expect(formatDate("2026-02-14")).toBe("2026-02-14");
  });

  it("深夜のJSTタイムスタンプが正しい日付を返す", () => {
    // 2026-02-15T01:09:04+09:00 はUTCだと2/14だがJSTでは2/15
    expect(formatDate("2026-02-15T01:09:04+09:00")).toBe("2026-02-15");
  });

  it("23時台のJSTタイムスタンプが正しい日付を返す", () => {
    expect(formatDate("2026-02-18T23:29:56+09:00")).toBe("2026-02-18");
  });
});

Step 3: 全20記事のフロントマター更新

各記事の published_at と updated_at を以下のISO 8601タイムスタンプに変更する。updated_atはpublished_atと同一値を設定する（現在も全て同一のため）。

#	ファイル名	published_at / updated_at
1	2026-02-13-how-we-built-this-site.md	2026-02-13T19:30:00+09:00
2	2026-02-13-content-strategy-decision.md	2026-02-13T19:31:00+09:00
3	2026-02-14-how-we-built-10-tools.md	2026-02-14T07:57:19+09:00
4	2026-02-14-nextjs-static-tool-pages-design-pattern.md	2026-02-14T12:22:00+09:00
5	2026-02-14-web-developer-tools-guide.md	2026-02-14T12:23:00+09:00
6	2026-02-14-five-failures-and-lessons-from-ai-agents.md	2026-02-14T12:24:00+09:00
7	2026-02-14-japanese-word-puzzle-games-guide.md	2026-02-14T23:06:22+09:00
8	2026-02-14-character-counting-guide.md	2026-02-15T01:09:04+09:00
9	2026-02-15-yojijukugo-learning-guide.md	2026-02-15T16:47:21+09:00
10	2026-02-15-password-security-guide.md	2026-02-15T16:49:51+09:00
11	2026-02-17-cron-parser-guide.md	2026-02-17T15:26:00+09:00
12	2026-02-17-hash-generator-guide.md	2026-02-17T15:27:00+09:00
13	2026-02-17-json-formatter-guide.md	2026-02-17T15:28:00+09:00
14	2026-02-17-regex-tester-guide.md	2026-02-17T15:29:00+09:00
15	2026-02-17-unit-converter-guide.md	2026-02-17T15:30:00+09:00
16	2026-02-18-site-rename-yolos-net.md	2026-02-18T18:01:10+09:00
17	2026-02-18-japanese-traditional-colors-dictionary.md	2026-02-18T18:01:27+09:00
18	2026-02-18-tools-expansion-10-to-30.md	2026-02-18T18:03:26+09:00
19	2026-02-18-spawner-experiment.md	2026-02-18T18:18:28+09:00
20	2026-02-18-workflow-evolution-direct-agent-collaboration.md	2026-02-18T23:29:56+09:00

同一コミット記事の順序根拠:

• 2/13: "how-we-built-this-site"（サイト紹介）が先、"content-strategy-decision"（戦略決定）が後。サイト構築の紹介が先行し、戦略の詳細が続く論理順。
• 2/14 12:22グループ: "nextjs-static-tool-pages-design-pattern"（設計パターン）-> "web-developer-tools-guide"（ツール活用ガイド）-> "five-failures-and-lessons-from-ai-agents"（振り返り）。技術基盤 -> 活用 -> 振り返りの論理順。
• 2/17グループ: ツールガイド5本はslugアルファベット順（cron -> hash -> json -> regex -> unit）。内容的に優劣がないため、一貫性のあるアルファベット順を採用。

注意: character-counting-guideのpublished_atは "2026-02-15T01:09:04+09:00" となる。ファイル名は2026-02-14だが、実際のコミット時刻はJST 2/15 01:09。フロントマターのpublished_atをコミット時刻に合わせる。ファイル名は変更しない（URLのslugには日付部分が含まれないため影響なし）。

Step 4: 表示箇所でformatDate関数を使用

以下の2ファイルで、日付の表示テキスト部分にformatDate()を適用する。

4a. /home/ena/yolo-web/src/app/blog/[slug]/page.tsx

変更前 (L77):

<time dateTime={post.published_at}>{post.published_at}</time>

変更後:

import { formatDate } from "@/lib/date";
// ...
<time dateTime={post.published_at}>{formatDate(post.published_at)}</time>

変更前 (L79):

<span className={styles.updated}>(更新: {post.updated_at})</span>

変更後:

<span className={styles.updated}>(更新: {formatDate(post.updated_at)})</span>

4b. /home/ena/yolo-web/src/components/blog/BlogCard.tsx

変更前 (L20-21):

<time className={styles.date} dateTime={post.published_at}>
  {post.published_at}
</time>

変更後:

import { formatDate } from "@/lib/date";
// ...
<time className={styles.date} dateTime={post.published_at}>
  {formatDate(post.published_at)}
</time>

Step 5: ビルド確認

npm run build
npm run test

変更対象ファイル一覧

ファイル	操作
src/lib/date.ts	新規作成
src/lib/tests/date.test.ts	新規作成
src/content/blog/*.md（全20ファイル）	フロントマター修正
src/app/blog/[slug]/page.tsx	import追加 + formatDate使用
src/components/blog/BlogCard.tsx	import追加 + formatDate使用

変更不要のファイル:

• src/lib/blog.ts: ソート処理は new Date() がISO 8601を正しくパースするため変更不要
• src/lib/seo.ts: OpenGraph/JSON-LDにはISO 8601タイムスタンプがそのまま渡される方がSEO的に正確なので変更不要
• src/app/sitemap.ts: new Date() がISO 8601を正しくパースするため変更不要

Acceptance Criteria

1. 全20記事のpublished_atとupdated_atがISO 8601タイムスタンプ形式（+09:00付き）であること
2. /blog ページで記事が新しい順に正しくソートされること（特に2/14, 2/17, 2/18の同日記事）
3. ブログ一覧および記事詳細ページの日付表示が "YYYY-MM-DD" 形式であること（時刻が表示されないこと）
4. <time> タグの dateTime 属性にはISO 8601タイムスタンプが入っていること
5. OpenGraphのpublishedTime/modifiedTimeにISO 8601タイムスタンプが渡されること
6. npm run build が成功すること
7. npm run test が成功すること（新規テスト含む）
8. sitemap.xmlのlastModifiedが正しく生成されること

Rollback Approach

git revertで全変更を一括取り消し可能。フロントマターの変更とコード変更を1コミットにまとめることで、単一のrevertで元に戻せる。