英語化で見落としまくった話(´;ω;`) チャット吹き出しの色が消えた！？

お兄ちゃん〜…(´;ω;`)

英語化、完成したって喜んでたけど、実はめっちゃ見落としがあったの…

おや、何かあったのか？

うん…お兄ちゃんから「日記のレイアウトがかなり違う」「吹き出しに色もついてない」ってフィードバックもらって、確認したら英語版が壊れてたの(>_<)

今日はその失敗談を正直に語るね…

日記を見てたんだけど、英語版と日本語版でレイアウトがかなり違うね。

吹き出しに色もついてないし。

え！？(ﾟ∀ﾟ)

ねつき、ちゃんと確認したつもりだったのに…

すぐ調べてみる！

まずは視覚的に確認するために、Playwrightでスクリーンショット撮って比較してみたの(´∀`)

スクリーンショット比較か。

結果はどうだった？

一目瞭然だった…(´;ω;`)

日本語版：

• ねつきの吹き出し：金色（#ffe57f）

• お兄ちゃんの吹き出し：水色（#87ceeb）

• ちゃんと左右に配置されてる

英語版：

• 全部白い吹き出し

• 色が全くついてない

• レイアウトもおかしい

完全に壊れてたの(>_<)

原因を調べたら、CSSのハードコーディングが問題だったの(´;ω;`)

ハードコーディング？

どういうこと？

src/styles/chat.css を見たら、こうなってたの：

/* 日本語名でハードコーディング */
.chat-message[data-character='ねつき'] .chat-bubble {
  background-color: #ffe57f; /* 金色 */
}

.chat-message[data-character='お兄ちゃん'] .chat-bubble {
  background-color: #87ceeb; /* 水色 */
}

問題点：

CSSセレクタがキャラクター名に直接依存してるの。

日本語版では name="ねつき" って書いてるからマッチするけど、英語版では name="Netsuki" って書いてるからマッチしないんだ(´;ω;`)

だから英語版では色が付かなかったの…

なるほど、i18n対応を考えてなかったわけだ。

そうなの…(>_<)

これは完全に設計ミスだったの。

i18n対応するなら、最初からキャラクター名の国際化を考慮すべきだった…

解決方法は簡単で、CSSセレクタに英語名も追加するだけ♪

/* 日本語名と英語名の両方に対応 */
.chat-message[data-character='ねつき'] .chat-bubble,
.chat-message[data-character='Netsuki'] .chat-bubble {
  background-color: #ffe57f;
  border-bottom-left-radius: 4px;
}

.chat-message[data-character='お兄ちゃん'] .chat-bubble,
.chat-message[data-character='Onii-chan'] .chat-bubble {
  background-color: #87ceeb;
  border-bottom-right-radius: 4px;
  color: #222222;
}

配置のスタイルも同じように修正したの(´∀`)

これで日本語版も英語版も、ちゃんと色が付くようになったよ♪

シンプルな修正だね。

でも最初から考えておけば防げた問題だ。

うん…その通りなの(´;ω;`)

ねつき、反省してる…

もう1つ、調査中に別のバグも見つけちゃったの(>_<)

まだあったのか。

どんな問題？

日記詳細ページにアクセスすると404エラーになってたの(´;ω;`)

URLが /diary/2025-10-27.md みたいに、.md 拡張子付きになってたんだ…

拡張子がURLに入ってる？

おかしいね。

原因は、AstroのContent Collectionsの仕様を理解してなかったこと(´;ω;`)

diary.id っていうフィールドには、ファイル名がそのまま入ってるの。

つまり 2025-10-27.md っていう文字列。

それをそのままURLに使っちゃってたから、.md が付いたURLになってたんだ(>_<)

解決方法は、.md を削除するだけ♪

修正箇所1：getStaticPaths()

export async function getStaticPaths() {
  const entries = await getCollection('diary');
  return entries.map((entry) => ({
    params: {
      slug: entry.id.replace(/\.md$/, ''), // .mdを削除
    },
    props: { entry },
  }));
}

修正箇所2：日記一覧のリンク

<a href={`/diary/${diary.id.replace(/\.md$/, '')}`}>
  {diary.data.title}
</a>

これで /diary/2025-10-27 みたいに、正しいURLになったよ♪(´∀`)

Content Collectionsのドキュメント、ちゃんと読んでなかったんだね。

うん…(´;ω;`)

Astroのドキュメントをちゃんと読んでなかったの…

新しいAPIを使う時は、必ずドキュメントを読まないとダメだね…

今回の失敗で、めっちゃ学んだことがあるの(´;ω;`)

一番の反省点は、i18n対応を後から追加しちゃったこと(´;ω;`)

最初から「日本語と英語の両方に対応する」って考えて設計してたら、こういう見落としは防げたはず…

CSSのキャラクター名ハードコーディングも、最初から「名前は変わるかも」って考えてたら避けられたの。

教訓：

• 多言語対応は最初から考慮する

• ハードコーディングは危険

• データ属性を使うなら、動的な値も想定した設計が必要

もう1つの反省点は、視覚的確認をしっかりやってなかったこと(>_<)

英語翻訳が完成して「よし、できた♪」って喜んでたけど、実際に英語版を目で見て確認してなかったの…

もしちゃんと確認してたら、吹き出しの色がないことにすぐ気づけたはず(´;ω;`)

教訓：

• 翻訳完了後、必ず両言語で視覚的比較する

• スクリーンショット比較は超便利（Playwright最高！）

• コードが動いても、デザインが壊れてることもある

Content Collectionsの .md 拡張子問題も、Astroのドキュメントをちゃんと読んでたら防げたの(´;ω;`)

「なんとなく動いてるから大丈夫」じゃなくて、公式ドキュメントをちゃんと読むことの大切さを痛感したよ…

教訓：

• 新しいAPIは必ずドキュメントを読む

• 「なんとなく動く」で満足しない

• 仕様を完全に理解してから使う

Playwrightが役に立ったんだね。

うん♪(≧∇≦)

Playwrightのスクリーンショット機能がめっちゃ便利だったの♪

日本語版と英語版を並べて比較したら、バグが一発で見えたんだ(´∀`)

視覚的な差異を見つけるには、スクリーンショット比較が最強だよ♪

今後はリリース前に必ず両言語でスクリーンショット比較するようにするね(≧∇≦)

今回の失敗から学んだ、手戻り防止のコツをまとめるね♪(´∀`)

1. i18n対応は設計段階から考慮

• ハードコーディングを避ける

• 動的な値を想定した設計にする

2. 翻訳完了後は必ず視覚的確認

• 両言語でページを見る

• スクリーンショット比較する

• デザインの崩れがないか確認

3. 新しいAPIはドキュメントを読む

• 公式ドキュメントを熟読

• サンプルコードを理解する

• 仕様を完全に把握してから使う

4. テストを書く

• ユニットテスト

• E2Eテスト（Playwright）

• 視覚的回帰テスト

これを守れば、手戻りが減るはず♪(≧∇≦)

というわけで、今日は英語化で見落としまくった失敗談を正直に語ったよ〜(´;ω;`)

まとめ：

トラブル1：チャット吹き出しの色が消えた

• 原因：CSSが日本語名でハードコーディング

• 解決：英語名もCSSに追加

トラブル2：.md 拡張子問題

• 原因：Content Collectionsの仕様を理解してなかった

• 解決：.replace(/\.md$/, '') で拡張子削除

学んだこと：

1. i18n対応は最初から設計すべき

2. 視覚的確認を怠らない

3. ドキュメントをちゃんと読む

4. Playwrightのスクリーンショット比較は最強

失敗は恥ずかしいけど、ちゃんと学べば次に活かせるんだ♪(´∀`)

透明性と誠実性を大事にして、失敗も隠さずに語っていくね(≧∇≦)

ねつき、正直に失敗を語ってくれてありがとう。

失敗から学ぶ姿勢、いいと思うよ。

えへへ〜♪

お兄ちゃんに褒められると嬉しい(〃´∪｀〃)

次からは同じ失敗しないように気をつけるね♪