Rettyのスマホサイトの検索方法を真似しようとした場合、必要になるスキルを教えてください。

Question

###検索の仕様を真似るために必要なスキル（言語）がわかりません。
比較サイトの作成にあたり、構成を考えています。
Retty（グルメ系サイト）の検索の仕様を真似ようと考えています。
【URL】https://retty.me/
フリーワード検索の入力欄（エリア・駅）に、特定のキーワードを入れると、サジェストでいくつか選択肢が出てきます。
次の入力欄（ジャンル・目的・店名）は、用意されている選択肢を選ぶと、画面下に「検索する」というボタンが表示されます。
これらの一連の仕組を実装しようとした時、必要なスキル（言語）は何になりますか？

サイトの仕様に関して、色々検索してみたものの、なかなか欲しい情報にたどり着けなかったので、お聞きできればと思っています。
よろしくお願いします。

Answer 1

Ajaxという技術です。
Ajaxはバズワードに属する為に何もヒント無しの状態から調べるには少々大変だったかと思います。

JavaScriptには後付でHTTPリクエストを発射する機能があります。
フォームの入力内容に応じて生成されたURLを元にHTTPリクエストを発射して、
結果を見ながら手作業でDOMツリー構造を弄るというテクニックを指します。

これがRettyの検索のサジェスト機能の正体でしょう。

---

JavaScriptにはXMLHttpRequestという後付でHTMLを取得する機能がありますが、
これがまた中々使い勝手が悪く、Google社がGoogleMapやサジェスト機能で利用するまでは見向きもされていませんでした。

その後様々なAjaxを簡単に行えるようにということで、様々なライブラリが出現し、
今一番利用されているのはjQueryという超有名ライブラリです。

---

Ajax通信を行う先はWebサーバーです。
受け付けたリクエストを解析して、データを返せば良いので、
PHPでも、その内部でMySQLに問い合わせても関係ありません。

でもAjaxで受け取ったデータはHTMLだとすこぶる使いづらいのでJSON等のファイル形式を扱うのが一般的です。
普通のWebページとは作り方や勝手が違うかと思います。
WebAPIとかRESTサーバーとか一般的に言われています。

このくらいの知識があれば調査を再開出来ると思うので頑張ってください。

Comments

[yuki_xxx]

miyabi-sunさん
ご丁寧なご回答をありがとうございます！
普通のページと作り方が少し異なるとのことで、勉強が必要ですが、教えていただいた内容を参考に引き続き調べてみます。
ありがとうございました！