Pagefindを使って静的Webサイトの検索を実現する

投稿日：2025年7月23日

このブログサイトでは、ヘッダー部の右側に検索窓があり、ブログ記事の内容をキーワード検索（あいまい検索）することができます。この検索はPagefindというライブラリを使って実現しています。今回はこの検索ライブラリPagefingについて紹介します。

ブログの戦略

この自社ブログ（オウンドメディア）では、今後も技術的な内容の記事を多数投稿していく予定です。技術的な内容の記事を投稿していると、どうしてもキーワード検索の機能を付けたくなります。

一般にキーワード検索というと、入力されたキーワードをもとにDBなどから対象のコンテンツを検索し、検索結果の一覧を表示するような、動的なWebアプリケーションを想像します。

一方、このブログサイトはWordPress + Astroという技術構成で開発しており、サイト自体はAstroによる完全な静的Webサイトとしてデプロイされています。

なぜこのような構成にしたかというと、

というのが主な理由です。

静的Webサイトとしてデプロイしているブログに対して、検索結果のページだけ動的なサイトにするのはちょっと避けたい（技術的できない訳ではないですが）。

ということで、静的Webサイトでありながら、サイト内の検索ができる方法がないかを探っていたところ、開発メンバーの一人がPagefindというライブラリを見つけてくれました。

そして、別のメンバーが早速そのライブラリを組み込んで検索機能を実装してくれました。（つまり私は実質なにもしていない。。）

その結果実現したのが、ヘッダー部にある検索窓での検索です。

詳細な仕組みや導入方法などは公式サイトをご覧ください。

ざっくりの導入手順は以下。

Astroと組み合わせる場合は、`astro build`を実行してWebページを生成した後に、Pagefindのindex作成コマンドを実行することで、検索が可能になります。

PagefindのindexはHTMLファイルに対してしか作成されないため、一般的な動的Webアプリケーションや、SPAでは使用できません。

（他のメンバーがかなり実装してくれましたが、、）思ったよりも簡単に実装できた印象です。

導入時、何も設定をしていない状態だと、全てのページが検索対象になってしまったので記事の一覧が並んでいるトップページも検索対象となっていましたが、検索対象外にしたい要素にも特定の属性を付けることで簡単に検索対象から外すことができました。

UIに関してはライブラリが用意されたものを使用する形になりますが、`PagefindUI`に多数のプロパティが用意されており、ある程度カスタマイズすることは可能です。

CSSに関しては上書きで適用するのに多少苦労しましたが、ディベロッパーツールで要素を解析しながら調整することでデザインも調整可能でした。

個人的には全体的にハードルが低くて扱いやすい印象でした。

個人的な話になりますが、私は以前プログラミング講師をしていた時期があります。その時に、教材となるテキストをマークダウンファイルで作成し、スクリプトでHTMLに変換してWebサイトとして教材を展開していた時期があります。

この時も、テキストの量が多くなって検索機能を付けたくなりました。ただ、そのころは静的Webサイトとしてコンテンツを検索する良い方法が分からず、結局RDBにコンテンツを全て格納してSQLであいまい検索する方法を取りました。

この時はまだPagefindのライブラリはリリースされていなかったと思いますが、あの時期にPagefindに出会っていれば検索の実現が格段に楽だったのになーと思わずにはいられませんでした。

システム開発に関するご依頼・お問い合わせはこちらから。

株式会社テクノコアは、1999年創業のIT教育・ITサービス企業です。未経験からでも成長できる環境で、新しい挑戦をしませんか？

===========

新人研修に関するご依頼・お問い合わせはこちらから。

株式会社テクノコアは、1999年創業のIT教育・ITサービス企業です。未経験からでも成長できる環境で、新しい挑戦をしませんか？

============

採用に関するご応募はこちらから。

株式会社テクノコアは、1999年創業のIT教育・ITサービス企業です。未経験からでも成長できる環境で、新しい挑戦をしませんか？