タグ機能を追加

概要

だいたいのブログについてるタグ機能を実装しました。Claude Codeに書いてもらいました。

ちなみに怠惰駆動開発さんがシンプルながらカッコいいブログなので真似させていただきました。

以下のような要件で実装しました。

/tagsでタグ一覧ページ
/tags/[tag]で各タグのページ（Static Site Generationで生成）
- /blog?tag=hogeという選択肢もありましたが、Dynamicになるため見送りました
記事一覧とタグページを相互にリンク

/blogでタグのリンクを追加すると、キーボード操作でリンクを移動する時にたくさん移動することになって大変だなと思いました。

Next.js blogでも同様の実装ですが、最適な方法は何か気になりました。GitHubのissueページを見ると、listitemで矢印移動が使いやすく実装されていて、なるほどと思いました。

カード UI の入れ子のリンクの問題を解決する Link Area Delegation の提案あたりをちゃんと読めばいいんですが、休日のバイブコーディングなので、また今度。

アクセシビリティを意識しようとするとナニモワカラナイになるのをやめたい。

適当に日本語タグで実装してから気がついたのですが、Claude CodeはencodeURIComponentを使って雑にslugにしてました。流石に微妙かなと思ったので、slugifyを入れたのですが、日本語対応してなかったのでtransliterationを入れてみました。

実装してみたら妙に精度いいな、と思ったら勝手にClaude Codeがカスタム辞書を定義してて、騙されるところでした。危ない。

正直transliterationの結果は結構微妙なので、ここは形態素解析していい感じに変換するか、LLM使うかの自前実装したいなと思いました。

やたらasを使ったり、手続きっぽい書き方だったりして微妙なコードでした。Skillsを導入した方がいいかな。気が向いたらやろう。

lefthookでpre-push時にformatとbuildを実行することにしてみました。いまはvercelにデプロイしててCIをまともに回してないので代わりです。

重複するコードを共通化したり細かいリファクタもしました。

そろそろ自動テストが欲しくなってきた気がする。

タグ機能の実装を通じて、以下のような気づきがありました。

タグ機能ひとつとっても、意外と考えることが多いですね。気軽に1時間くらいで実装しようと思ったのですが、なんだかんだ2時間半くらいかかりました。

タグ機能ができたので、雑にエッセイ記事を書いてもいい気がしてきました。

それではまた。

最終更新: 2026年2月11日