概要
Next.js、Elastic Search UI、Fuse.jsを組み合わせた検索アプリケーションの技術構成と実装について説明します。
作成したサイトは以下です。
https://nsf-psi.vercel.app/ja/
GitHubリポジトリは以下です。
https://github.com/nakamura196/nsf
サンプルデータとして、「東京帝國大學本部構内及農學部建物鳥瞰圖（東京大学農学生命科学研究科・農学部）」を使用します。
https://da.dl.itc.u-tokyo.ac.jp/portal/assets/187cc82d-11e6-9912-9dd4-b4cca9b10970
以下はAIが作成しました。
アプリケーション概要
このアプリケーションは、東京大学の建物画像データを対象とした検索システムです。IIIF（International Image Interoperability Framework）プロトコルに対応した建物画像を検索し、地理情報（緯度・経度）やメタデータを表示します。
主な特徴
多言語対応
next-intlによる日本語・英語の多言語対応機能を実装しています。
検索機能
- 簡易検索 : キーワードによる直感的な検索
- 詳細検索 : 複数条件を組み合わせた精密な検索（AND/OR条件）
- ファセット検索 : subject（学部）などカテゴリー別の絞り込み機能
- ソート機能 : スコア、タイトル、属性値での並び替え
- 曖昧検索 : Fuse.jsによる入力ミスに寛容な検索（閾値0.3）
UI/UX
- Tailwind CSSによる洗練されたデザイン
- ダークモード対応
- レスポンシブデザインでモバイルフレンドリー
- React IconsによるアイコンUI
カスタム検索コネクタ
Elastic Search UIとFuse.jsを組み合わせたカスタムコネクタを実装し、フロントエンドのみで全文検索機能を実現しています。
地理情報対応
各建物データには緯度・経度情報が含まれています。
技術スタック
フロントエンド
- Next.js 15 (App Router)
- React 19
- TypeScript
- Tailwind CSS 4.0
検索システム
- Elastic Search UI（検索インターフェース）
- Fuse.js（全文検索エンジン）
- カスタムAPIConnector（独自実装）
国際化
- next-intl
その他
- next-themes (テーマ切り替え)
- React Icons
アーキテクチャの特長
静的サイト生成（SSG）対応
Next.jsのSSG機能を活用し、高速なページ読み込みとSEO最適化を実現しています。
コンポーネント指向設計
再利用可能なコンポーネントによる保守性の高い設計となっています：
- レイアウトコンポーネント（Header、Footer、Breadcrumb）
- 検索機能コンポーネント（SearchBox、Facet、Paging）
- ページ固有コンポーネント（Hero、Results）
データ駆動型検索
JSON形式の構造化データ（title、subject、地理情報、IIIF画像URL等）を活用し、効率的な検索とフィルタリングを実現しています。
パフォーマンス最適化
- CSVデータの事前JSON変換による高速読み込み
- Fuseインデックスの活用による検索性能向上
- ページネーション・ソート機能の最適化
- 完全一致（
in:）と部分一致フィルターの使い分け
技術的な特筆点
カスタムAPIConnectorの実装
Elastic Search UIのAPIConnectorインターフェースを実装し、Fuse.jsとの統合を行っています。
IIIFプロトコル対応
国際標準のIIIF（International Image Interoperability Framework）に準拠した画像配信を実装しています。
適用分野
このアーキテクチャは以下のような用途で利用できます：
- 学術機関のデジタルアーカイブ
- 美術館・博物館のコレクション検索
- 不動産物件検索システム
- 商品カタログ検索
- 地理情報システム（GIS）
まとめ
このアプリケーションは、Next.js、Elastic Search UI、Fuse.jsを組み合わせることで、サーバーサイド処理を必要としない検索システムを実現しています。大量のメタデータと画像を扱うデジタルアーカイブシステムの構築における設計パターンの一例です。