ショッピング情報取得APIを利用してYahooショッピングの検索キーワードランキングと売上総合ランキングを同時に表示してみる

/**
 * APIからJSONを取得するクラス
 * 
 * @var string $url  APIのエンドポイントurl
 * @var array $query リクエストパラメータを'パラメータ' => '値'の連想配列
 */
class GetJson{
    public string $url;
    public array $query;

    public function __construct(string $url, array $query)
    {
        $this->url = $url;
        $this->query = $query;
    }
    /**
     * APIからjsonを取得するメソッド
     * 
     * @return string jsonファイル
     */
    public function getJson(){
        $query = $this->query;
        $url = $this->url;
        // クエリ文字列を生成してURLに追加
        $url .= http_build_query($query);
        try {
            // jsonを取得
            $response = file_get_contents($url);
            // jesonをエンコード
            $json = json_encode($response, true);
    
            return $json;
        } catch (Exception $e) {
            
        }       
    }
}

// APIエンドポイント
$keywordUrl = 'https://shopping.yahooapis.jp/ShoppingWebService/V2/queryRanking?'; 
// リクエストパラメータ
$keywordQuery = [
    'appid' => '', // <-- ここにあなたのアプリケーションIDを設定してください。
];

$keyword = new GetJson($keywordUrl, $keywordQuery); // クラスGetJsonのインスタンスを作成
$keywordJson = $keyword->getJson(); // getJsonメソッドを実行してAPIからjsonを取得する

// 検索キーワードランキングをhtmlにレンダリングする
function showKeywordRanking() {
  const keywordRanking = JSON.parse(keywordJson).keyword_ranking.ranking_data; // PHPで取得したjsonをパースして変数に格納する
  const data = JSON.parse(keywordJson).keyword_ranking.meta.end_date; // 集計日を取得
  document.querySelector(".data").textContent = <code>集計日：${data};
  const fragment = document.createDocumentFragment(); // 空のDocumentFragmentを作成する
  const template = document.getElementById("keywordTemplate"); // template要素を取得
  // jsonファイルをfor文で回して必要な項目を取得する
  for (let i = 0; i < keywordRanking.length; i++) {
    const clone = template.content.cloneNode(true); // templateタグのコンテンツを取得し複製する
    let png;
    // 順位横の矢印の選択
    switch (keywordRanking[i].vector) {
      case "up":
        png = "./img/up.png";
        break;
      case "down":
        png = "./img/down.png";
        break;
      case "stay":
        png = "./img/stay.png";
        break;
    }
    // DOM操作でhtmlに反映させる
    clone.querySelector(".rank span").textContent = keywordRanking[i].rank; // 順位
    clone.querySelector(".rank img").src = png; // 矢印
    clone.querySelector(".keyword > a > p").textContent = // 検索キーワード
      keywordRanking[i].query;
    clone.querySelector(".keyword a").href = keywordRanking[i].url; // URL
    clone.querySelector(".pre_rank p").textContent = keywordRanking[i].pre_rank; // 前回順位
    clone.querySelector(".score p").textContent = keywordRanking[i].score; // スコア

    fragment.appendChild(clone); // DocumentFragmentへ一時保管
  }
  document.querySelector(".keywordTable").appendChild(fragment); // ループを抜けたらまとめてappendChildする
}