Help us understand the problem. What is going on with this article?

Nuxt.jsでaxiosを使ってサクッと小さなアプリを作る

(こちらの記事は、2018年時点での内容になるため、他のNuxt.js, axiosを扱った記事をご参考にされた方が良いかと思います。)

はじめに

本記事は We Are JavaScripters!【執筆初心者歓迎】 Advent Calendar 2018 (https://adventar.org/calendars/2972) の 12/4 担当分の記事です。

12/20のWeJSで勢いで「書きます」ってノリで登録してました。
記事駆動開発万歳。

やりたいこと

・Nuxt.jsを使いたい
・axiosを使いたい(今回は楽天商品検索APIを使って、カービィ関連の商品を探せるようにする)
・とりあえずモノを作りたい

ちなみにNuxt初めて2週間弱くらいです。ハードルは全力で下げさせていただきます!

環境

Vueのバージョンはこちらです。

環境
$ vue --version
3.2.1

準備作業

Nuxt.jsプロジェクト作成

vue cliを使ってNuxtプロジェクトを作成します。

Nuxtのプロジェクト作成
$ vue init nuxt-community/starter-template kirby-search

# この辺は全部Enter
? Project name kirby-search
? Project description Nuxt.js project
? Author mgr

次に、プロジェクトディレクトリ直下で以下をそれぞれ実行
$ npm install
$ npm run dev

localhost:3000にアクセス
スクリーンショット 2018-12-28 18.33.40.png

axios導入

デフォルトでaxiosは入ってないので、axiosを導入します。
参考: https://public-constructor.com/nuxtjs-with-axios/

axios導入
$ npm install --save @nuxtjs/axios
+ @nuxtjs/axios@5.3.6
added 16 packages from 14 contributors and audited 12849 packages in 12.265s
found 0 vulnerabilities

これだけじゃ使えないので、nuxt.config.jsに以下のように追記

nuxt.config.js
// 末尾の方に追加
  },
+  modules: [
+    '@nuxtjs/axios'
+  ],
+  axios: {
+  }
+}

楽天商品検索APIを使う準備

  1. Rakuten Developersに登録
    https://webservice.rakuten.co.jp/

  2. アプリIDの発行
    以下の水色の枠のところから発行します。
    必要な情報を入力するとアプリIDが発行できます。
    スクリーンショット 2018-12-28 18.31.30.png

こんな感じ
スクリーンショット 2018-12-30 15.39.16.png

実装

商品一覧の取得・表示

axiosを使って、楽天商品検索APIを取得します。
参考: https://public-constructor.com/nuxtjs-with-axios/

API呼び出し部分

scriptタグ内だけ抜粋します。

pages/index.vue
export default {
  data() {
    return {
      results: []
    }
  },
  async asyncData({ app }) {
    const baseUrl = 'https://app.rakuten.co.jp/services/api/IchibaItem/Search/20170706?'
    const appId = 'applicationId=xxxxxxxxxxxxxxxxxx'
    const keyword = '&keyword=カービィ' // カービィ以外認めません
    const getUrl = encodeURI(baseUrl + appId + keyword)
    const response = await app.$axios.$get(getUrl)
    return {
      results: response.Items
    }
  }
}

asyncDataというメソッドは、コンポーネントがローディングされる前に常に呼び出されるそうです。(ページコンポーネントのみ)。
画面を開いたタイミングで即時に結果を見たいときなんかはこれで良さそうですね。
参考: https://ja.nuxtjs.org/guide/async-data/

ほんで何でこのメソッドにasyncつけてるのっていう話はこちらの記事なんかがasyncについて詳しく解説してありました。とてもありがたい...!
https://qiita.com/soarflat/items/1a9613e023200bbebcb3

画面に表示させる

続いて画面表示の方です。
templateタグ内を抜粋します。

※スタイルは最低限の見栄え程度にやってます。

index.vue
<template>
  <section class="container">
    <div>
      <ul class="resultItems">
        <li class="resultItem" v-for="item in results" :key="item.id">
          <img :src="item.Item.mediumImageUrls[0].imageUrl" class="imgStyle">
          <dl class="dataStyle">
            <dt>
              <a :href="item.Item.itemUrl">
                Name: {{ item.Item.itemName.slice(0,20) + "..." }}
              </a>
            </dt>
            <dd class="price">
              ¥{{ item.Item.itemPrice }}
            </dd>
          </dl>
        </li>
      </ul>
    </div>
  </section>
</template>

<li>タグに対してv-forディレクティブを使用して検索結果となるresultsをitemとして展開していきます。
参考: https://jp.vuejs.org/v2/guide/list.html

ここではitemを用いて、
・商品画像
・商品名
・価格
をいい感じに展開してます。(なんとなくいい感じの見栄えになる程度に...)

表示結果

こんな感じになります。見た目はともかくとして、カービィが可愛いですね。
検索結果だけでかなりの癒しをもらえました。本当にありがとうございます。
スクリーンショット 2018-12-30 15.10.57.png

最後に

この記事はNuxt.jsのアプリケーションでaxiosを使って何かしてみたいーっていうフワっとした想いで書きました。
これだけだとNuxt.jsである必要性は皆無かなと思ってますが、こっからさらに画面数増やしたり、機能を追加したりってのがかなり簡単にできるかなと思うので、暇なときにサラサラと何かやってみようかなと思います。

余談

12月のWeJSで勢いで登録したはいいものの、かなり何をするか悩みました。
「ゆるくでええんやで」と言われつつも、「あぁぁぁぁぁぁぁでもな〜〜〜しっかりしないと周りの人たちすごいしなああああ」と悩みに悩んだ挙句、やろうと思ってたネタが

  • Twitter APIを使ったwejsに触れた何か
  • FacebookのGraph APIを使ってwejsに触れた何か

だったんですが、時間的な兼ね合いでやめました()

年明けからモノ作りのペースとか加速させていきたいので、そこでのんびりやろうかなと思います。。。
(上記のボツネタの実装とかは登壇ネタになると思ってるのでまあいっかって気持ちで...)

mgr
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした