リアルタイム検索がしたかった ― http://kihara.coresv.com/2018/11/02/52/I log.

リアルタイム検索がしたかった

概要

このブログの検索機能について。
できたようで、なんか不満の残る、でもなんとなくできたようなリアルタイム検索の話です。

使えるか使えないかで言ったら、使えない寄りかもしれない。ので、技術メモではなくエッセイ的な……。

なんなんだ実装エッセイって。

使ったもの

  • WP REST API v2
  • Vue.js(CDN)

リアルタイムな絞り込み

リアルタイムな絞り込みはわりと簡単にできた。

jsonで取得した一覧を、フォームのバインドでフィルターにかけるというものです。(候補、メンテナンスで絞り込むとわかりやすいかと)

問題は、WP REST APIでとれる件数がmax100(デフォルト10)なので、100件以上の記事の中からしか絞り込みができないことでした。

(まだ100件どころか10件以下なのに必要なのか?って感じだけど)

全記事から検索したい

wordpressの検索でもいいんだけど、なんとなくやりたいこととして、ページ遷移せずに検索したいなーっていうのがありました。wordpressの複数条件検索とかはやったことがあったので、他のことがしたいなと。

別のサイトで、REST APIとvue.jsを使って、カテゴリーを絞り込み→クリックでカテゴリー一覧を取得という2段階の絞り込みをやったことがあったので、検索もできるんじゃないかと思いました。

vue.jsの入力フォームバインドで、REST APIで取得するurlを変更しようと。

まあこの思い付きで地獄を見るわけですが。

computed(算出)の中で、axios呼べばいいじゃん★

はい、ここが大きな間違いの始まりでした。

実際やってみると、なんだか思い通りの表示ができてるんですよ。

呼び出すAPIは/wp-json/wp/v2/posts?per_page=100&search=検索ワードで、できた気がした。ローカルのわりに重さも感じない。

しかし、computedはバインドに変更があったときだけ呼び出されるはずなのに、延々とaxiosとechoを繰り返している……。このcodepenページに飛んでいただくとconsole見れるので、見てみてください。

まあ、そういうのじゃないからね。

computedをbeforeUodateに……とか

いろいろ試しましたが、負担が少ない呼び方は見つかりませんでした。

そんなとき見つけたのが公式リファレンスから紹介されていたこのJSFiddleでした。

私はmountedでaxiosを使ってjsonをgetしていましたが、createdでfetchしている…。もしかしてそもそもaxiosもAjaxもいらんのか…?

と、いうわけで、新しい書き方がこちら。検索前には100件表示→100件まで検索。

コンソールも検索するときだけになっていると思います。

このサイトでは、これを使っています。実際は、検索画面の開閉用にmethods追加したりしてもうちょっとぐちゃぐちゃです。

ただ、created時の一覧用と、再表示用にそれぞれliを用意しているのがなんかもにょる。そういうものなのかな?

あと、実際には検索後に表示しているため、最初のcreatedは必要ないなーとreturn;しています。その場合でもcreated用のコンポーネントは必要だし、created:function(){return;}も必要。ここらへんがよくわかってない。

まとめ

そもそも、vue.jsのインスタンスの中で、どのタイミングで呼び出すか、どのタイミングで書き出すか、などがとっても難解。知恵熱出るかと思った。

解明できたら、実装エッセイから実装メモに昇格できるのでは。

vue.jsを使ってみて思ったけど、言語学専攻としては主語述語がわかりにくい言語はやっぱ苦手です。

あと、コンソールを見てほしいからとはいえ、せっかくコード表示特化したテーマ作ったのにcodepenで表示するのはぐぬぬ…って感じ。

参考サイト


categories

実装エッセイ

tags

, , ,

Update log

公開:2018/11/2@23:06