浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

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

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

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

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

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

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

  • この記事いいね! (0)