タイトル：39記事目の検索革命。静的サイトに「Pagefind」で爆速検索窓をつける

カーリングの試合結果に一喜一憂している間に、ブログの記事数がもうすぐ40件に届こうとしている。 ここまで増えると、執筆者である私自身も「あれ？ 虚数の話ってどの記事に書いたっけ？」と迷子になることが増えてきた。

そこで、フィギュアスケートの選手たちに負けないくらいの 「爆速検索機能」 を実装することにした。

選んだ武器：Pagefind

Astroのような静的サイトジェネレーター（SSG）と相性抜群なのが、 Pagefind というツールだ。 これの凄いところは、 「データベースもバックエンドサーバーも不要」 という点だ。

1. npm run build で記事（HTML）が生成された後に、
2. PagefindがそのHTMLを解析して「検索インデックスファイル」を作り、
3. ブラウザ（JavaScript）がそのインデックスを読み込んで検索する。

つまり、検索処理がすべて利用者のブラウザ内で完結する。だから爆速なのだ。

実装手順（3ステップ）

1. インストール

npm install @pagefind/default-ui pagefind

2. ビルド設定の変更

ビルドが終わった直後にインデックスを作らせるため、package.json を書き換える。

"scripts": {
  "build": "astro build && pagefind --site dist"
}

これで、ビルドするたびに検索用データも自動更新されるようになった。

3. コンポーネント作成

あとは検索窓を置くだけ。

<div id="search"></div>
<script>
  window.addEventListener("DOMContentLoaded", async () => {
    const { PagefindUI } = await import("@pagefind/default-ui");
    new PagefindUI({ element: "#search", showSubResults: true });
  });
</script>

罠：プレビューが動かない？

実装は完璧だ。しかし、動作確認のために npm run preview を叩くとエラーが出た。 検索窓以前に、ローカルサーバーがうまく立ち上がらない。

原因は 「Cloudflare Adapter」 だ。 私のブログはCloudflare Pages向けに設定されているため、通常のNode.js環境でのプレビューではなく、Cloudflareの環境を模倣（エミュレート） してやる必要があったのだ。

解決策：Wrangler の導入 ここでもAI（Antigravity）に助けを求めたところ、即座に修正案が返ってきた。

Wrangler（Cloudflare純正CLIツール） をインストール。

プレビューコマンドを以下のように修正。

"scripts": {
  "preview": "wrangler pages dev dist"
}

これで、ローカルにいながら本番環境（Cloudflare）とほぼ同じ状態で動作確認ができるようになった。 検索窓に「アリア」と打ち込むと、入力し終わる前に検索結果がズラリと並ぶ。

これにて、ブログの「インフラ整備」は完了だ。 明日からは、いよいよ愛車アリアのデータを可視化する「デジタルツイン計画」に着手しようと思う。

（金メダル級の快適さを手に入れた！）

（執筆協力：Gemini / 編集・監修：古老）