Vue.jsに対応したAlgoliaの Vue InstantSearch

Vue.jsに対応したAlgoliaの Vue InstantSearch

これまで爆速検索エンジンのAlgoliaに関しては事例紹介やAngular + Ionicでの実装ガイドなどで紹介してきました。

最近天野が良くさわっているVue.jsにAlgoliaが対応したVue InstantSearchがあります。Vue InstantSearchを使うことで、Vueのtemplate内に<ais-で始まるタグを使うことでAlgoliaの検索ボックスや検索結果の表示を行うことができるようになります。

今日は以下のページの翻訳を中心に紹介します。

Vue InstantSearch > Getting started

Vue InstastSearchへようこそ

Vue InstantSearchはVue.jsとAlgoliaを使ってインスタント検索を実現するツールボックスです。

新規のVueのプロジェクトのセットアップ

まず公式のvue-cliとを使ってwebpack-simple
templateを使って新規プロジェクトをbootstrapします。

$ npm install --global vue-cli
$ vue init webpack-simple vue-instantsearch-getting-started

インストールの際に出てくる質問には全てEnterを押して進めてもらえればいいです。

その後必要なモジュールをインストールしましょう。

$ cd vue-instantsearch-getting-started
$ npm install

vue-instantsearchのインストール

npm経由でVue InstantSearchのモジュールもインストールします。

$ npm install --save vue-instantsearch

開発環境の実行

vue-cliでプロジェクトをbootstrapするとdevのようなnpmスクリプトも含まれますのでそれを実行します。

$ npm run dev

これで以下のような画面がブラウザ内に表示されます。

devスクリプトは実行したままにしておくとコードに変更があった場合ははブラウザが自動でリロードされます。

InstantSearchプラグインを使う

ここでVueにVue InstantSearchプラグインを使うように設定をして、全てのサーチcomponentがtemplate内で使えるようにします。

src/main.jsを開いて、コードを以下で置き換えます。

    import Vue from 'vue';
    import App from './App.vue';
    import InstantSearch from 'vue-instantsearch';

    Vue.use(InstantSearch);

    new Vue({
      el: '#app',
      render: h => h(App)
     });

これでVue InstantSearch componentsがVueアプリのtemplate内のどこでも使えるようになります。

最初の検索を実装してみる

まず簡単な検索インターフェースを作ってみましょう。

src/App.vueを開いて、<template></template>タグの間を以下のコードで置き換えます。

    <template>
      <ais-index
        app-id="latency"
        api-key="3d9875e51fbd20c7754e65422f7ce5e1"
        index-name="bestbuy"
      >
        <ais-search-box></ais-search-box>
        <ais-results>
          <template slot-scope="{ result }">
            <h2>
              <ais-highlight :result="result" attribute-name="name"></ais-highlight>
            </h2>
          </template>
        </ais-results>
      </ais-index>
    </template>

これを保存するとブラウザ内で以下の様な検索ができます。ちょっと遊んでみてくださいね。

実装の詳細

このセクションではコードの詳細について紹介します。

Index component

全ての検索componentはindex componentの中にある必要があります。

    <ais-index
      app-id="latency"
      api-key="3d9875e51fbd20c7754e65422f7ce5e1"
      index-name="bestbuy"
    >
    <!-- Search components go here -->
    </ais-index>

Index componentの中でapplication IDとAPI search only keyの設定を行います。

Index componentは検索の状態を保つために使われ、child componentに対してそれらを伝えるために使われます。

Server Side Renderingをサポートするためにsearc storeを設定することもできます。

Algoliaのデモ用の認証

デモのためには以下の認証を設定することで使えるようになります。

• app-id: latency
• search-key: 3d9875e51fbd20c7754e65422f7ce5e1
• index-name: bestbuy

実際に自分のデータでAlgoliaを使ってみたい場合はAlgoliaのアカウントを作成して自分の認証をAlgloliaのdashboard内にからコピーしてください。

Search Box component

Search Box componentは検索用のtext inputをレンダリングします。

text inputに入る値は検索のクエリとして使われます。

クエリが変わるたびにリアルタイムでAlgoliaに問い合わせが行われ、検索結果が返ってきます。

Search Box componentは

Results component

Results componentはAlgoliaのresponseにある結果をループして表示します。

このcomponentにはdefault slotがあり、これを使うことで結果をカスタムtemplateで定義できます。

Defaultではslotが設定さない場合は全ての結果のobjectIDが表示されます。

Results componentsで使われるslotはscoped slotです。

Scoped slotはslotに送られたデータを扱えるtemplateです。

以下のコードの例を見てください。

    <template slot-scope="parameters">
      <h1>{{ parameters.result.name }}</h1>
    </template>

ES6の文法を使った場合は

    <template slot-scope="{ result }">
      <h1>{{ result.name }}</h1>
    </template>

このやり方でresultを扱えるようにして、template内のhtmlのカスタマイズを行います。

この上の例では結果の名前がハイライトされています。

翻訳はここまで

今天野の方でVue MaterialなどVue.js用のUIライブラリを使って実装を行っていますので、次回は実際にUIライブラリとAlgolia検索を組み合わせた実装の紹介をします。

Mediumの元の記事