【JavaScript】GitHubの検索のサジェスト機能のロジックが API サーバーに優しくユーザーにも程よく便利

 よく何かを入力すると自動で入力中の文字列から検索結果を表時する機能があります。例えば Amazon の検索のサジェスト(オートコンプリート)機能は次の様に動いています。

 この機能はうまく運用できれば便利なのですが素直に「一文字入力する度に API を叩いてデータベース内を検索する」と作ると自前でwebサーバーやデータベースが許容できない負荷の原因を埋め込むことに繋がりかねません。そうなった場合、レスポンスが遅くなりユーザーにとってもうれしくない機能になります。とはいえ都度データベース内の検索ができれば便利なのは確かです。これを膨大なデータに対してそれを実現できている Amazon はすごいです。一方でよくある案件では マシンスペック、データ構造、アルゴリズム、通信速度、使用可能な技術、単に実力不足などの都合で都度検索の実現が困難な場合もあります。この様な場合 GitHub のサジェスト機能のつくりが省エネかつ便利で参考になります。

 GitHub の検索のサジェスト機能は次の様に動作します。

 都度計算するのではなく、検索ボックスクリック時にあらかじめサジェスト候補を全て持ってきて、後は JavaScript 上で候補内から表示するサジェストを絞り込んでいます。この方法であれば使用する計算資源は小さく済みます。

 GitHub のサーバー側の中身はわかりませんし、最小化された JavaScript ファイルを読むほどの根気もありませんが、メモリ上で扱える程度の数の重要そうなサジェスト候補を取得、JavaScript上で候補内を検索、という抽象化された部分は大いに参考になります。例えば、最近使われたもの、よく検索されているものを優先的にサジェスト候補にするだけでもなかなか便利そうです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG