Vue.js版ReactiveSearchのお試しコード例

Elasticsearchで検索の当たり具合などをいろいろ試すために、アドカレ2018で知ったReactivSearchに目をつけました。 そこで、ReactiveSearchのVue.js版のアドホックなかつできるだけミニマムな動作例の自分用コピペ元が欲しくなりまして、以下に手順的なものをダンプします。 (見てのとおり、全体的に「動けば良い」というスタイルのものなので、その点ご注意ください。)

動かしてみる

Elasticsearchの準備

  1. Elasticsearchに、インデックス(ここでは名前は「rs_index」とします)とデータ(フィールド名はtitle_ja、content_jaとします)を登録。
  2. ElasticsearchをCORS対応で起動(elasticsearch.yml)。→ http://localhost:9200/で起動したとします。

Node.jsをインストール

npmをインストール

ReactiveSearchのVue.js版をインストール

npm でreactivesearch-vueをインストール

npm install @appbaseio/reactivesearch-vue

Vue CLI (Vue.jsのcliコマンドラインインタフェース))をインストール

npm install -g @vue/cli

Vue CLIでプロジェクトを作成

vue create my-awesome-search

ちなみに、my-awesome-searchのところが、このアプリのブラウザでアクセスした際のtitleになります。

検索窓と検索結果の宣言(App.vue)

プロジェクトのディレクトリのsrcに移動して 、App.vueに次をコピペ。奇妙なインデントなのはご容赦。

<!-- App.vue  --> 

<template>
  <div id="app">
    <reactive-base app="rs_index" url="http://localhost:9200/" >
    <h5>検索お試しランチャー</h5>

    <data-search
        componentId="myDataSearch"
        :customQuery="myCustQuery"
        placeholder="検索キーワード"
        :dataField="['title_ja']"
        URLParams="true"
        className="data-search"
    />
    <result-card
        componentId="mySearchResult"
        :react='{ or: ["myDataSearch"]  }'
        :renderData="getResultList"
        :from="0"
        :pages="5"
        :pagination="true"
     />
    </reactive-base>
  </div>
</template>

<script>
export default {
  name: "App",
  methods:{
    getResultList( data ) {
        return { title: data.title_ja.slice(0,5), image:"http://localhost:80/" + `${data._id}.png`, description:`<em>${data.title_ja}</em>` };
    },
      myCustQuery(value) {
          return { query:{ multi_match: { query: `${value}`, fields:["title_ja","content_ja"] }}};
    }
  }
};
</script>

<style>
.data-search{ width: 800px; }
</style>

ラフに起動するだけなら写経のmain.js

main.jsを次でコピペして上書き。

// main.js

import Vue from 'vue'
import App from './App.vue'
import ReactiveSearch from "@appbaseio/reactivesearch-vue";

Vue.use(ReactiveSearch);
Vue.config.productionTip = false

new Vue({
    render: h => h(App),
}).$mount('#app')

アプリをひとまず起動して触ってみる

プロジェクトのsrcディレクトリで次をタイプ。

npm run serve

f:id:azotar:20190204001744p:plain

→ この例だと、http://localhost:8080/にアクセスすると、アプリの画面へ。

f:id:azotar:20190204002241p:plain

※手抜きなので、真っ白です。

アプリが動作するところまでは以上の通り。

補足

前述のApp.vueを手抜き解説します。今回必要になった(?)例に特化したオプション設定と、それに合わせた説明なので、公式が推しているスタンダードかつ便利な使い方と違うところもあります。 興味を持たれた方は、参考文献に示す有識者の方の解説サイトや公式リファレンスを参照ください。

f:id:azotar:20190204004723p:plain

  • result-cardのところは、result-listに変えると検索結果がリスト型になります。
  • 「react」のところは、data-searchなど、"リアクト"させる他のコンポーネントのcomponentIdを指定します。
  • ここでは、「:customQuery」を使って、自前のクエリを定義していますが、実はこちらはオプションで必須ではありません。定義しなければ、「:dataField」に指定のフィールドが検索対象になるようです。また、今回は自前のクエリを使いたかったのでこのようにしたのですが、他のコンポーネントを複数並べてできるだけ手間をかけずにそれでもリッチな検索UIを実現したい場合は、無理に「:customQuery」にしない方が(おそらく)得策です。
  • renderData="getResultList"からの、getResultListで、title、image、descriptionに(特にtitleは5桁でチョップ)妙な値を渡しているのは、title、image、descriptionはコンポーネントの約束事として、渡す値はJavaScript、Vue.jsの世界の範囲ならOKだよねという確認がしたくての、例のための例です。

参考文献など

ReactiveSearch Vue.js版の公式

opensource.appbase.io

↓こちらを先に読んだ方がわかりやすいかも。 opensource.appbase.io

Reactivesearchでいい感じの検索SPAを30分ぐらいで作る(j-yamaさん)

qiita.com

私のこの記事では結果オンリーのオレオレ説明となっていますが、↑こちらのブログでは非常に丁寧な説明がされています。 Vue.jsじゃなくてReact.jsだという人はもちろん、仕掛けや仕組みを抑えたい場合は、私のこの記事よりもこちらのブログを参照ください。私は公式のVue.js版のリファレンスよりもj-yamaさんのReact.jsのコード例を見て、上の方に貼り付けたApp.vueの動作確認コードを作成しました!!