Warning: Undefined array key "steps" in /home/bubudoufu/bubudoufu.com/public_html/wp-content/plugins/amp/src/ReaderThemeSupportFeatures.php on line 501
JavaScriptライブラリのaxiosを使用して楽天商品ランキングAPIを叩いてみる - プログラミングを学習中の私が、アウトプットするためのサイト
サイトアイコン プログラミングを学習中の私が、アウトプットするためのサイト

JavaScriptライブラリのaxiosを使用して楽天商品ランキングAPIを叩いてみる

作成したプログラムのコードはgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります。

スポンサーリンク

概要

JavaScriptライブラリのaxiosを使用して楽天商品ランキングAPIから年代別・性別の売り上げランキングを取得し表示をするページを作成してみました。JavaScriptフレームワークVue.js、cssフレームワークはBulamaを使用しています。このページでは楽天商品ランキングAPIからaxiosを使用してランキングを取得する方法をすこし解説しています。

axiosを導入する

npmでインストールする場合

CDNで読み込む場合

楽天商品ランキングAPIからランキングを取得する

↓のコードはaxiosのgetメソッドを使用して楽天商品ランキングAPIからランキングを取得する例です。パラメータのapplocationIdにご自身で取得したアプリIDを入力して実行するとコンソールログにJSONオブジェクトでランキングが表示されます。

第1引数にAPIのurlを指定し、第2引数にはパラメータを指定し渡します。パラメータのapplocationIdは楽天商品ランキングAPIを利用するにあたり必須のパラーメータとなります。IDはコチラか取得できます。elementsを指定すると指定された出力パラメータのみを返却します。この例では順位と商品名と商品のurlを指定しています。性別は男性は0女性は1、年齢は10,20,30,40,50のいずれかを渡すとその年代別のランキングが返ってきます。データは返ってきたresponseのresponse.dataにあります。

最後までお読みいただきありがとうございました。
作成したプログラムのコードはgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります。

モバイルバージョンを終了