開発日記: 2026年1月12日 - エピソードと用語集をつなぐ自動リンク機能

今日の作業

昨日作成した用語集ページをより活用しやすくするため、エピソードカードに関連用語タグを自動表示する機能を実装しました。

エピソードのタイトルに含まれる専門用語を自動検出し、用語集ページへのリンクとして表示する機能です。

実装内容:

用語リンカーユーティリティ (src/lib/glossary-linker.ts)
- 用語集のJSONデータから全用語のパターンを生成
- 英語名（“Tesla”）、カタカナ名（“テスラ”）、略語（“FSD”）すべてに対応
- 長い用語から順にマッチングして誤検出を防止
エピソードページへの適用
- 各エピソードカードの下部に「用語」セクションを追加
- タイトルから最大3つの専門用語を検出してタグ表示
- タグをクリックすると用語集の該当箇所へ直接ジャンプ

ビフォー・アフター:

これにより、テスラジオのバリューである「難しくて専門的な話を面白く身近に」をサイト全体で体現できるようになりました。

HTMLの構造上、<a>タグの中に別の<a>タグを入れることはできません。エピソードカード全体がYouTubeへのリンクになっているため、タイトル内に直接用語リンクを埋め込むことはできませんでした。

そこで、カードの下部に独立した「用語タグセクション」を設けることで、この問題を解決しました。結果的に、用語が視覚的に明確になり、ユーザビリティも向上しました。

用語マッチングの順序が重要: 「SpaceX」と「Space」のような用語がある場合、長い用語から先にマッチングしないと「Space」だけがマッチしてしまう
複数表記への対応: 同じ用語でも「Tesla」「テスラ」など複数の表記があるため、パターンを配列で管理することで柔軟に対応できる
HTML構造の制約を活かす: <a>タグの入れ子ができない制約を逆手に取り、独立したセクションにすることでUIが改善された

この記事はClaude Codeによって自動生成されました。