検索サイトElasticsearchで検索の当たり具合などをいろいろ試すために、アドカレ2018で知ったReactivSearchに目をつけました。そこで、ReactiveSearchのVue.js版のアドホックなかつできるだけミニマムな動作例の自分用コピペ元が欲しくなりまして、以下に手順的なものをダンプします。(見てのとおり、全体的に「動けば良い」というスタイルのものなので、その点ご注意ください。Vue.js版の公式Reactivesearchでいい感じの検索SPAを30分ぐらいで作る(j-yamaさん)動かしてみるElasticsearchの準備Elasticsearchに、インデックス(ここでは名前は「rs_index」とします)とデータ(フィールド名はtitle_ja、content_jaとします)を登録。ElasticsearchをCORS対応で起動(elasticsearch.yml)。http://localhost:9200/で起動したとします。my-awesome-searchちなみに、my-awesome-searchのところが、このアプリのブラウザでアクセスした際のtitleになります。App.vueに次をコピペ。奇妙なインデントなのはご容赦。}</style>ラフに起動するだけなら写経のmain.jsmain.jsを次でコピペして上書き。h(App),}).$mount('#app')アプリをひとまず起動して触ってみるプロジェクトのsrcディレクトリで次をタイプ。この例だと、http://localhost:8080/にアクセスすると、アプリの画面へ。※手抜きなので、真っ白です。アプリが動作するところまでは以上の通り。前述のApp.vueを手抜き解説します。今回必要になった(?)例に特化したオプション設定と、それに合わせた説明なので、公式が推しているスタンダードかつ便利な使い方と違うところもあります。興味を持たれた方は、参考文献に示す有識者の方の解説サイトや公式リファレンスを参照ください。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だよねという確認がしたくての、例のための例です。Vue.js版の公式opensource.appbase.io↓こちらを先に読んだ方がわかりやすいかも。opensource.appbase.ioReactivesearchでいい感じの検索SPAを30分ぐらいで作る(j-yamaさん)qiita.com私のこの記事では結果オンリーのオレオレ説明となっていますが、↑こちらのブログでは非常に丁寧な説明がされています。Vue.jsじゃなくてReact.jsだという人はもちろん、仕掛けや仕組みを抑えたい場合は、私のこの記事よりもこちらのブログを参照ください。この記事はこちら↑の続きです。(1)はてなブログをはじめよう!azotarさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。