beta

Gridsomeで検索ページを作る方法

Gridsomeで検索ページを作ってみたので実装方法や実際の動きの良し悪しについてまとめました。

公開日:2021年3月8日

Gridsome公式の方法

Gridsomeでの検索機能の実装方法は、Gridsomeの公式ドキュメントにも記載されてます。

Add a search to Gridsome

ざっくりと流れをまとめると、

  1. 全てのデータをGraphQLから取得
  2. Vue.jsのdataもしくはcomputedでデータを取得
  3. テンプレートでレンダリング

という感じです。

実装してみる

全件を格納する

まずは検索の元になるデータを格納します。

<static-query>
query Search {
  posts: allPosts{
    edges {
      node {
        id
        title
        path
        img_l
      }
    }
  }
}
</static-query>

動的にパラメータを受け取らないので、クエリはstaticで大丈夫です。

この状態にしておけば、Vueの処理の中で「this.$static.クエリ名」でデータ処理ができます。この場合は、「this.$static.posts」ですね。

GETパラメータを取得する

続いてパラメータ処理をします。

検索の場合、POSTかGETでパラメータ(検索ワード)を取得しますが、Gridsomeは静的サイトなのでPOSTは受け取れません。素直にGETパラメータを使います。

Gridsomeのpage-queryは、$idや$pathくらいしか取得できないので、GETのパラメータをpage-queryに渡すことはできません。しかし、Gridsomeは内部的にはVue Routerを使っているので、Vueのページ処理内で「this.$route」でGETパラメータが取得できます。

取得ポイントは、mountedです。

export default {
  name: 'Search',
  data() {
    return {
      searchPara: ''
    }
  },
  async mounted(){
    this.searchPara = this.$route.query.name;
  }
}

computedで動的に結果を生成する

ここまできたら、あとは結果を整形するだけです。

公式ドキュメントの感じだと、下記のコードになります。

computed: {
  searchResults() {
    return this.$static.allPost.edges.filter(post => {
        return post.node.title.toLowerCase().includes(this.search.toLowerCase().trim())
    })
  }
}

ただの、Vue.jsのcomputed(算出プロパティ)なので、処理は基本なんでも出来ます。dataに格納するよりも、computed(算出プロパティ)の方が動的にサクサク動くのでオススメです。computedにする場合は、検索キーワードは、input要素にv-modelで紐づけておくと、インタラクティブに結果が変わります。

実際に実装してみて

元データの取得が重い

今回は5,000件くらいの検索データで作ってみましたが、元となるデータの容量が700KB以上もあって、ページロード的に現実的ではありませんでした。取得データも4カラムくらいだったのでこれで済みましたが、もっと大きなデータが欲しい場合は、結構ファイルサイズが大きくなりそうです。

感覚的には、1/50くらい、100件くらいの検索ならローカル実装で全く問題ないと思います。2,000件を超えたあたりから、APIを用意してAPIから取得した方が良いかと思います。

実装も動作も簡単で良い

実装はVue.jsの簡単なプログラミングで実装できますし、動作的には一回ロードすればブラウザのJavascript処理をしているだけでなのでサクサクです。

あとは、どれだけユーザーのロードタイムを短くできるかでしょうか。


Gridsomeで検索ページを作る方法でした。

Author

Koji Kadoma
Member of codit.work

新着ノート

新着コード