楽天トラベルランキングAPIをJavascriptで叩いてサンプルページを作ってみる - プログラミングを学習中の私が、アウトプットするためのサイト

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

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

概要
Fetch APIで楽天トラベルランキングAPIからデーターを取得する
DOM操作を行いページに表示させる

概要

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

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

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

// APIを叩く
async function callApi(url, params) {
// URLSearchParamsは連想配列からクエリパラメータを作成してくれる標準APIです。
  const query = new URLSearchParams(params); 
  const response = await fetch(url + query);
  const data = await response.json();

  return data;
}

// APIを叩く

async function callApi(url, params) {

// URLSearchParamsは連想配列からクエリパラメータを作成してくれる標準APIです。

const query = new URLSearchParams(params);

const response = await fetch(url + query);

const data = await response.json();

return data;

}

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

　const url =
    "https://app.rakuten.co.jp/services/api/Travel/HotelRanking/20170426?";
  const params = {
    applicationId: "ご自身のアプリIDを入力してください", // アプリID
    genre: "onsen", // ジャンル指定
  };

　const url =

"https://app.rakuten.co.jp/services/api/Travel/HotelRanking/20170426?";

const params = {

applicationId: "ご自身のアプリIDを入力してください", // アプリID

genre: "onsen", // ジャンル指定

};

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

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

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

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

// callApi関数から受け取ったデータをhtmlにレンダリングする
async function renderHtml() {
  const url =
    "https://app.rakuten.co.jp/services/api/Travel/HotelRanking/20170426?";
  const params = {
    applicationId: "ご自身のアプリIDを入力してください", // アプリID
    genre: "onsen", // ジャンル指定
  };
  const data = await callApi(url, params);
  const fragment = document.createDocumentFragment();
  const template = document.getElementById("template");

  for (let i = 0; i < data.Rankings[0].Ranking.hotels.length; i++) {
    const hotel = data.Rankings[0].Ranking.hotels[i].hotel;
    const clone = template.content.cloneNode(true);

    clone.querySelector("h3").textContent =
      hotel.rank + "位" + "  " + hotel.middleClassName; // 順位 + 施設の所在都道府県
    clone.querySelector("img").src = hotel.hotelImageUrl; // 施設画像URL
    clone.querySelector("a").textContent = hotel.hotelName; // 施設名
    clone.querySelector("a").href = hotel.hotelInformationUrl; // 施設情報ページURL
    clone.querySelector("p").innerHTML = hotel.userReview; // お客様の声

    fragment.appendChild(clone);
  }
  document.querySelector("ul").appendChild(fragment);
}

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

async function renderHtml() {

const url =

"https://app.rakuten.co.jp/services/api/Travel/HotelRanking/20170426?";

const params = {

applicationId: "ご自身のアプリIDを入力してください", // アプリID

genre: "onsen", // ジャンル指定

};

const data = await callApi(url, params);

const fragment = document.createDocumentFragment();

const template = document.getElementById("template");

for (let i = 0; i < data.Rankings[0].Ranking.hotels.length; i++) {

const hotel = data.Rankings[0].Ranking.hotels[i].hotel;

const clone = template.content.cloneNode(true);

clone.querySelector("h3").textContent =

hotel.rank + "位" + " " + hotel.middleClassName; // 順位 + 施設の所在都道府県

clone.querySelector("img").src = hotel.hotelImageUrl; // 施設画像URL

clone.querySelector("a").textContent = hotel.hotelName; // 施設名

clone.querySelector("a").href = hotel.hotelInformationUrl; // 施設情報ページURL

clone.querySelector("p").innerHTML = hotel.userReview; // お客様の声

fragment.appendChild(clone);

}

document.querySelector("ul").appendChild(fragment);

}

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

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