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

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

はじめに

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

12/20のWeJSで勢いで「書きます」ってノリで登録してました。

記事駆動開発万歳。

やりたいこと

・Nuxt.jsを使いたい

・axiosを使いたい(今回は楽天商品検索APIを使って、カービィ関連の商品を探せるようにする)

・とりあえずモノを作りたい

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

環境

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にアクセス

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が発行できます。
   
   
   
   

こんな感じ

実装

商品一覧の取得・表示

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を用いて、

・商品画像

・商品名

・価格

をいい感じに展開してます。(なんとなくいい感じの見栄えになる程度に...)

表示結果

こんな感じになります。見た目はともかくとして、カービィが可愛いですね。

検索結果だけでかなりの癒しをもらえました。本当にありがとうございます。

最後に

この記事はNuxt.jsのアプリケーションでaxiosを使って何かしてみたいーっていうフワっとした想いで書きました。

これだけだとNuxt.jsである必要性は皆無かなと思ってますが、こっからさらに画面数増やしたり、機能を追加したりってのがかなり簡単にできるかなと思うので、暇なときにサラサラと何かやってみようかなと思います。

余談

12月のWeJSで勢いで登録したはいいものの、かなり何をするか悩みました。

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

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

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

年明けからモノ作りのペースとか加速させていきたいので、そこでのんびりやろうかなと思います。。。

(上記のボツネタの実装とかは登壇ネタになると思ってるのでまあいっかって気持ちで...)