楽天トラベルランキングAPIをJavascriptで叩いてサンプルページを作ってみる

スポンサーリンク

このページではソースコードの一部分を簡単な解説をしています。

作成したサンプルページはコチラから
完成品のソースコードはgithubにあります

スポンサーリンク

概要

APIを叩く練習として、楽天APIを利用してサンプルページを作成しました。 楽天APIにはいろいろなAPIがあるのですが、今回は楽天トラベルランキングAPIを利用して温泉宿TOP10のページを作ってみました。

Fetch APIで楽天トラベルランキングAPIからデーターを取得する

callApi関数はAPIを叩きデーターを取得しjsonを返す関数です。

callApi関数は二つの引数を必要とします。一つ目の引数urlにはAPIエンドポイントを渡します。今回はこちらのページに記載されているリクエストURLを引数urlとして渡しています。二つ目の引数paramasには先ほどと同じページに記載されている入力パラメーターから必要なパラメーターを連想配列で渡します。下記のようにして引数を設定しました。

入力パラメーターapplicationIdは必須項目になりますこちらのページから各自取得をお願い致します。もう一つの 入力パラメーターgenreには取得したいランキングのジャンルを指定しています。今回は温泉宿のランキングを取得したかったのでonsenとしています。

引数paramsはURLSearchParamsインターフェイスでクエリパラメータを作成してurlと一緒にfetchAPIPへ渡し、jsonメソッドでjsonを取得しています。非同期処理にはasync/awaitを使っています。

DOM操作を行いページに表示させる

renderHtml関数はcallApi関数から受け取ったデータをhtmlにレンダリングする関数です。

callApi関数から受け取ったデータの中から必要なパラメーターをDOM操作で表示させています。

最後までお読みいただきありがとうございました。

タイトルとURLをコピーしました