Gatsby.js + Contentfulに爆速な検索フォームを実装する！

小西諒

2021.01.22

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Gatsby.jsで構築したJamstackなウェブサイトに、検索フォームを埋め込みます。

今回はバックエンドにヘッドレスCMSのContentfulを使っていて、Contentfulで入稿した記事をフロントから全検索できるような機能を目指します。

やろうとしてること

よくあるような、検索ボタンをタップして、モーダル内で記事をテキスト検索できるフォームを、SaaSを利用せず自前で実装します。

Gatsbyアプリではビルドする際にContentfulから全記事を読み込み済みなので、検索フォームのonChangeイベントを検知して、リアルタイムで（=フロント側のみで）検索結果を書き換えるため、爆速で記事を表示できます。

Contentful+Gatsbyアプリの立ち上げ

Contentfulでの記事投稿、Gatsbyアプリの立ち上げについては以前記事を書いていますので、詳しくは下記の「1. Contentfulの準備」&「2. Gatsbyアプリの立ち上げ」」をご参照ください。

CircleCI × Contentful × S3で作るJamstackなブログ環境。

今回は検索機能のみですので、アプリを立ち上げるのはローカルだけでOKです。

モーダルの実装

上記の立ち上げとセットアップが終わった段階で http://localhost:8000 を立ち上げると、トップページに記事の一覧が表示されていると思います（スタイルはご容赦ください）。

このページに、まずはモーダルウインドウとその呼び出しボタンを組み込みます。

Reactでモーダルウインドウを簡単に実装できるパッケージ'react-modal'をインストールします。

$ npm install react-modal

次にcomponents配下にファイルを新規作成します。

import React from 'react';
import Modal from 'react-modal';
import Search from "./search";

Modal.setAppElement('#___gatsby')  //public/htmlのid参照
class ModalWindow extends React.Component {
  constructor() {
    super();
    this.state = {
      modalIsOpen: false
    };
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }
  openModal() {
    this.setState({modalIsOpen: true});
  }
  closeModal() {
    this.setState({modalIsOpen: false});
  }
  render() {
    return (
      <div className="modalWrapper">
        <button onClick={this.openModal}>検索する</button>
        <Modal
          isOpen={this.state.modalIsOpen}
          onRequestClose={this.closeModal}
          contentLabel="Seach Modal"
          className="modalSearchWindow"
          overlayClassName="modalSearchOverlay"
        >
          <Search />
          <button onClick={this.closeModal}>閉じる</button>
        </Modal>
      </div>
    );
  }
}
export default ModalWindow;

※あとで作る検索コンポーネントもすでに呼び出しているので、この時点でアプリをbuildしてもエラーになります。

上記、Modal.setAppElement('#___gatsby')のid部分は適宜読み替える必要があります。Gatsbyの場合は#___gatsbyで良いかと思いますが、一応public/htmlのidを参照してください。

次に、トップページ（index.js）でmodalSearchコンポーネントを呼び出します。

import ModalSeach from "../components/modalSearch";

で、好きな場所に呼び出しタグを記述します。

<ModalSeach />

CSSはこんな感じで適当です。必要最低限なので適宜スタイリングしてあげてください。

.modalWrapper{
  text-align: center;
  padding: 20px 0;
}
.modalWrapper button,
.modalSearchWindow button{
  padding: 10px 20px;
  font-family: helvetica;
}
.modalSearchOverlay{
  z-index: 960;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.75);
}
.modalSearchWindow{
  z-index: 965;
  background: #fff;
  margin: 4vw auto 0;
  margin-right: -50%;
  padding: 40px;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  border: 1px solid rgb(204, 204, 204);
  overflow: auto;
  border-radius: 4px;
  outline: none;
  width: 750px;
  height: 600px;
}

検索機能コンポーネントの実装

検索機能を実装します。

再びcomponents配下にファイルを新規作成します。

import React, { useState } from "react"
import { useStaticQuery, graphql } from "gatsby"

const SearchResult = props => {
	const tempData = useStaticQuery(graphql`
			query SearchData {
				allContentfulSamplePostsForSeach: allContentfulSamplePosts( sort: {fields: createdAt, order: DESC}) {
				  edges {
				    node {
				      title
				      slug
				      createdAt(formatString: "YYYY-MM-DD")
				    }
				  }
				}
		}
	`)

	const className = useState("")
	const allPosts = tempData.allContentfulSamplePostsForSeach.edges
	const emptyQuery = ""
	const [state, setState] = useState({
	  filteredData: [],
	  query: emptyQuery,
	})
	const handleInputChange = event => {
	  console.log(event.target.value)
	  const query = event.target.value
	  const posts = tempData.allContentfulSamplePostsForSeach.edges || []

	  const filteredData = posts.filter(post => {
	    const title = post.node.title
	    return (
	      title.toLowerCase().includes(query.toLowerCase())
	    )
	  })
	  setState({
	    query,
	    filteredData,
	  })
	}
	const { filteredData, query } = state
	const hasSearchResults = filteredData && query !== emptyQuery
	const result = hasSearchResults ? filteredData : allPosts

	return (
		<div className={className}>
			<div className="result-inner">
				<input
					type="text"
					aria-label="Search"
					placeholder="検索ワードを入力..."
					onChange={handleInputChange}
				/>
				<div className="result-inner__res">
					{query !== "" ?
						query + " の検索結果: " + result.length + "件"
						: result.length + "件の記事があります"
					}
				</div>
				<ul className="result-inner__search">
					{result && result.map(({ node: post }) => {
						return (
							<li key={post.slug}>
								<a href={`/post/${post.slug}/`}>
									<div className="result-inner__title">
										{post.title}
									</div>
									<div className="result-inner__info">
										<div className="result-inner__info-date">{post.createdAt}</div>
									</div>
								</a>
							</li>
						)
					})}
				</ul>
			</div>
		</div>
	)
}

export default SearchResult

inputフィールドの検索値の変更をトリガーに、各記事のタイトルに対して都度フィルタリングを実施しています。デフォルトでは記事を全件表示し、検索ワードに合わせて検索結果件数も同時に更新されます。

今回の検索コンポーネントは特定のページではなく、モーダルを呼び出してコンポーネントの中から記事を呼び出す想定なので、useStaticQueryを利用し、ページコンポーネント以外からクエリを叩けるようにしています。

また、allContentfulSamplePostsも各自ご利用中のContentfulでのコンテンツタイプ名に合わせてください。

これで準備は完了です。

TOPページで検索ボタンからモーダルを開き、検索を実行してみてください。

Contentfulとは通信を行なっておらず、フロントのjs側で検索機能が完結しているため、ほぼリアルタイムで検索結果が表示される爆速仕様で実装できました。