【Nuxt.js】API：Rakuten Developersで商品情報を取得してみた

🎈 この記事はWP専用です
https://wp.me/pc9NHC-YU

#前置き

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/9f479de3-b4bd-5ec5-c376-a9a821bf900b.png)

[楽天商品検索API](https://webservice.rakuten.co.jp/api/ichibaitemsearch/)を使ってみます💫
登録してアプリIDを発行するだけで
すぐに商品情報が取得できます✨

商品は完全に見た目の可愛さで選びました❤️笑
(見るだけならタダだし…)

参考: https://qiita.com/mgr/items/f2193fd21765be1d34c2

#登録
[Rakuten Developers](https://webservice.rakuten.co.jp/)に登録
アプリIDを発行するだけです🌟
1分で終わります😁笑

規約はこちら
[楽天ウェブサービス規約](https://webservice.rakuten.co.jp/guide/rule)
普通に登録して個人的に使う分には
特別注意する問題はないですね💡

#使い方
##APIテストフォーム
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/63263754-12aa-8616-1834-cdc301b22ace.png)

テストを用意してくれているので
すぐに確認ができます✨🙆‍♀️
パタメータを入力し、
GETを押して
Itemsが表示されればOKです！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/bc3bab09-2897-e157-26d9-df10fa543e0f.png)

##リクエストURLとパラメータ
テストで表示されるURLの仕組みはこちらです。
ベースとなるリクエストURLに
パラメータを追加しています。

```
https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?[paramet
```

**parameter**
設定必須のパラメーター
🌟アプリID(applicationId)
🌟検索キーワード、ジャンルID、商品コード、ショップコードのいずれか

これらのパラメーターを
先頭に&をつけて連結させます。
検索キーワード(keyword)と
ソート(sort)は**value**の分類で、
ここのみエンコードが必要みたいですね💡

###例
キーワードは「ピンク」
ショップは「tiarassic」
にしてみました。
formatはデフォルトのjsonが入っています。

```
https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?format=json&keyword=[エンコードされたキーワード]&shopCode=lassic&applicationId=[自分のアプリのID]'
```

####ショップコード
URLには2種類ありますが、
どちらのパターンでも
アスタリスクの部分がショップコードです。
「http://www.rakuten.ne.jp/gold/***/」
「http://www.rakuten.co.jp/***/」

#コード
##まずはconsoleで表示

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/ab800077-023b-ac44-45fb-0681daa24c3e.png)

まずはURLのみで
情報の取得がきちんとできるか確認します。
出力パラメータのmediumImageUrlsなどが
あるので大丈夫そうですね✨🙆‍♀️

非同期通信、API通信については
こちらをご覧ください👀
[【Nuxt.js】Nuxt文法編：非同期通信やasyncDataの使い方](https://qiita.com/aLiz/items/cf861393e2461721a085)
[【Nuxt.js】axios導入編：かんたん・お手軽API通信](https://qiita.com/aLiz/items/122ee6d16b212dc316f8)

```index.vue
<template>
  <div class="page">
  </div>
</template>


<script>
import axios from 'axios'

export default {
  data () {
    return {
    }
  },
  async asyncData() {
    const baseUrl = 'テストで作成したURLを入れてください'
    axios.get(baseUrl)
      .then((res) => console.log(res))
  }
}
</script>

<style lang="scss" scoped>
</style>
```

awaitをすっかり忘れていました😀笑
async/awaitでセット、
awaitがPromiseにあたる部分でしたね。
次で追加しましょう✍️

##テンプレートで表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/61f215e1-69a5-0e01-3f51-aebd84c2016a.png)

とりあえず表示ができることが
確認できたので、
次は画像やタイトルなどを
見やすく調整していきましょう♪

```index.vue
<template>
  <div class="page">
    <ul>
      <li
        v-for="result in results"
        :key="result.id"
      >
        {{ result }}
      </li>
    </ul>
  </div>
</template>


<script>
import axios from 'axios'

export default {
  data () {
    return {
      results: [],
    }
  },
  async asyncData() {
    const baseUrl = 'テストで作成したURLを入れてください'
    const res = await axios.get(baseUrl)
    return { results: res }
  },
}
</script>

<style lang="scss" scoped>
</style>
```

ちなみにasyncData部分を
こうするとエラーです。
この辺はまた別記事にて。
**TypeError: Cannot set property 'results' of undefined**

```index.vue
  async asyncData() {
    const baseUrl = 'テストで作成したURLを入れてください'
    await axios.get(baseUrl)
      .then((res) => this.results = res)
  },
```

```index.vue
  async asyncData() {
    const baseUrl = 'テストで作成したURLを入れてください'
    await axios.get(baseUrl)
      .then((res) => { this.results = res })
      .catch((error) => {
        console.log(error)
      })
  },
```

##見やすく調整①

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/84857c1c-8c46-7167-0ab6-27a5c606a6ae.png)

まずはitemNameだけ表示させてみます🍒

```index.vue
<template>
  <div class="page">
    <ul>
      <li v-for="result in results" :key="result.id">
        {{ result.Item.itemName }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      results: [],
    }
  },
  async asyncData () {
    const baseUrl = 'テストで作成したURLを入れてください'
    const res = await axios.get(baseUrl)
    return { results: res.data.Items }
  },
}
</script>
```

###データの加工について

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/cde7f51c-9b31-4720-dde3-31f072cd98fa.png)

私は最初に勘違いをしていて
consoleでresのみを表示していた時は
{ "Items": [{ "Item": { "itemName": "商品名" }}, { "Item": {"itemName": "商品名" }} ]}
となっていたので
res.Itemsとしていましたが、
本来はdataの中のItemsなので…
data: { "Items": [{ "Item": {"itemName": "商品名" }}, { "Item": {"itemName": "商品名" }} ]}
res.dataにしなければ
いけないみたいですね🤔💭

ただ参考にさせていただいた記事では
res.Itemsで表示できていたので
formatによってできるのかもしれません💡

res.data.Itemsの中の
Item1つ1つを並べたいので
results: []には
res.data.Itemsまでを入れます🎈🧸

表示はresultのItemの中の
itemNameなので
result.Item.itemNameです。

##見やすく調整②
あとは好きなパラメータを追加するだけです❤️
とりあえず画像はいれましょう！

```index.vue
<img :src="result.Item.mediumImageUrls[0].imageUrl" alt="">
```

商品をリンクにしたいので
aタグで囲ったりして完成！
(外部リンクなのでnuxt-linkは使えません)

CSSは最低限🌸

```index.vue
<template>
  <div class="page">
    <h1>Rakuten Developers使ってみた</h1>
    <ul class="list">
      <li
        v-for="result in results"
        :key="result.id"
        class="item"
      >
        <a
          :href="result.Item.itemUrl"
          class="link"
        >
          <img
            :src="result.Item.mediumImageUrls[0].imageUrl"
            alt=""
            class="img"
          >
          {{ result.Item.itemName }}
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      results: [],
    }
  },
  async asyncData () {
    const baseUrl = 'テストで作成したURLを入れてください'
    const res = await axios.get(baseUrl)
    return { results: res.data.Items }
  },
}
</script>

<style lang="scss" scoped>
  .page {
    > .list {
      list-style: none;
      display: flex;
      flex-wrap: wrap;

      > .item {
        width: 25%;

        > .link {
          color: #c6c6c6;
          text-decoration: none;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 10px;

          > .img {
            width: 50%;
          }
        }
      }
    }
  }
</style>
```

#まとめ
データの形が分かれば
簡単に表示させることができますね✨

勘違いをしていたと書きましたが、
それによって
テストの使い方が違うのか❓
パラメータの理解が間違っているのか❓
など色々想定していたら
時間を取られてしまいました…😂
そもそも.catchでerrorがないなら
データの加工が違うと分かるんですけどね…
慣れです。慣れ。。。