検索体験は、サイトの「賢さ」を決める

開発者向けドキュメントやモダンなWebアプリケーションを使っていて、最も心地よい瞬間のひとつ。 それは Cmd+K (Ctrl+K) を押した瞬間です。

画面中央にスッと現れる検索窓。 キーボードから手を離さずに、欲しい情報へ瞬時にアクセスできる体験。

これが個人のブログにもあれば、過去の知見を探すのがもっと楽しくなるはずです。 今回は、Pagefind というライブラリを使って、このブログに「賢い」検索機能を実装した話を紹介します。

なぜ Pagefind なのか？

静的サイト生成 (SSG) における検索機能の実装には、いくつかの選択肢があります。 Algoliaなどの外部サービスを使うか、Fuse.jsなどでクライアントサイド検索を自作するか。

今回 Pagefind を選んだ理由はシンプルです。

1. バックエンド不要: ビルド時に静的なインデックスファイルを生成するだけ。
2. とんでもなく軽い: 必要なインデックスだけを分割してロードするため、初期ロードへの影響がほぼゼロ。
3. セットアップが簡単: npx pagefind --site dist と叩くだけ。

まさにAstroのような静的サイトとの相性が抜群なのです。

実装のポイント: 誰でも使える「コマンドパレット」

単に検索バーを置くだけでは面白くありません。目指したのは、VS CodeのコマンドパレットのようなUIです。

1. グローバルなキーボードショートカット

サイトのどこにいても、アイデアが浮かんだ瞬間に検索を開始できるようにしました。

// Cmd+K (Mac) または Ctrl+K (Windows) を監視
document.addEventListener('keydown', (e) => {
  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
    e.preventDefault(); // ブラウザデフォルトの挙動を抑制
    openModal();
  }
});

2. モーダルUIの設計

検索窓は「常に表示」されている必要はありません。必要な時だけ現れ、用が済んだら消える。これが画面を広く使うコツです。 <dialog> タグを使えばアクセシビリティ（フォーカス管理など）もブラウザに任せやすくなりますが、今回はデザインの自由度を優先してカスタムなオーバーレイを実装しました。

3. Pagefindの統合

実装は驚くほどシンプルです。Pagefindはビルド後に生成されるため、動的インポートで読み込みます。

// 開発環境では動作しないため、プロダクションビルド後のみロード
const pagefind = await import('/pagefind/pagefind.js');
await pagefind.init();

// 検索実行
const search = await pagefind.search('Astro');
const results = await Promise.all(search.results.map(r => r.data()));

課題と解決: H1タグ問題

検索結果には記事のタイトルを表示したいですが、Pagefindはデフォルトで <h1> タグをページのタイトルとして認識します。 以前の記事で、SEO上の理由から複数の <h1> が存在していた問題を修正しましたが、これが検索精度の向上にも繋がりました。正しいHTML構造は、SEOだけでなく検索機能にも効いてくるのです。

まとめ

「たかがブログの検索機能」ですが、こだわればこだわるほど、サイトへの愛着が湧いてきます。 Cmd+K を押すたびに、「お、いいサイトだな」と自分でも思える体験。 皆さんもぜひ、自分のサイトに実装してみてください。

🤖 Antigravity Prompt

この記事の成果物を作成するために、実際に使用した（または推奨される）プロンプトです。

あなたはモダンWebアプリケーション開発者です。Astroで構築した静的ブログサイトに、サーバーサイド無しで動作する全文検索機能を導入したいです。
要件:
- ライブラリ: Pagefind
- UI: 「Cmd+K」で開くモーダルインターフェース
- 機能: 日本語対応、インクリメンタルサーチ
実装手順と、必要なAstroコンポーネントのコードを提示してください。