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

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

これまで爆速検索エンジンのAlgoliaに関しては[事例紹介](https://medium.com/@takeshiamano/algoliaã§çéæ¤ç´¢ã®äºä¾-c438fcaead8e)や[Angular + Ionicでの実装ガイド](https://medium.com/@takeshiamano/algoliaã®ã¤ã³ã¹ã¿ã³ãæ¤ç´¢ãå®è£ãã¦ã¿ã-ãã­ã³ãã¨ã³ãç·¨-5cb86f5a8578)などで紹介してきました。

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

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

[Vue InstantSearch > Getting started]
(https://community.algolia.com/vue-instantsearch/getting-started/getting-started.html)

### Vue InstastSearchへようこそ

Vue InstantSearchは[Vue.js](http://vue.js/)と[Algolia](https://www.algolia.com/)を使ってインスタント検索を実現するツールボックスです。

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

まず公式の[vue-cli](https://vuejs.org/v2/guide/installation.html#CLI)とを使って[webpack-simple
template](https://github.com/vuejs/vue-cli#official-templates)を使って新規プロジェクトを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

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

![getting-started-npm-run-dev.png](https://qiita-image-store.s3.amazonaws.com/0/201713/017abff6-1eb3-10d5-8814-115a6cea8e8f.png)

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

### InstantSearchプラグインを使う

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

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

```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](https://community.algolia.com/vue-instantsearch/getting-started/using-components.html)がVueアプリのtemplate内のどこでも使えるようになります。

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

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

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

```html
    <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>
```

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

![first-search-experience.gif](https://qiita-image-store.s3.amazonaws.com/0/201713/432583b3-4bee-77c1-5480-60b5f82f9072.gif)

### 実装の詳細

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

### Index component

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

```html
    <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を設定](https://community.algolia.com/vue-instantsearch/getting-started/search-store.html)することもできます。

### Algoliaのデモ用の認証

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

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

実際に自分のデータでAlgoliaを使ってみたい場合は[Algoliaのアカウントを作成](https://www.algolia.com/users/sign_up)して自分の認証を[Algloliaのdashboard](https://www.algolia.com/api-keys)内にからコピーしてください。

### Search Box component

[Search Box component](https://community.algolia.com/vue-instantsearch/components/search-box.html)は検索用のtext inputをレンダリングします。

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

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

Search Box componentは<form>の中の要素となりresetとsubmitボタンがデフォルトで用意されます。[検索のgood practiceはこちら](https://blog.algolia.com/mobile-search-ux-tips/)から参照ください。

### Results component

[Results component](https://community.algolia.com/vue-instantsearch/components/results.html)はAlgoliaのresponseにある結果をループして表示します。

このcomponentには[default slot](https://vuejs.org/v2/guide/components.html#Single-Slot)があり、これを使うことで結果をカスタムtemplateで定義できます。

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

Results componentsで使われるslotは[scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots)です。

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

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

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

ES6の文法を使った場合は

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

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

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

> 翻訳はここまで

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

[Mediumの元の記事](https://medium.com/@takeshiamano/vue-js%E3%81%AB%E5%AF%BE%E5%BF%9C%E3%81%97%E3%81%9Falgolia%E3%81%AE-vue-instantsearch-e323ebaf17e9)