Nuxt.js の axios-module で GitHub Trending のデータ表示を試す #JavaScript

はじめに

少し Nuxt.js を触り始めてみています。今回は試しに、API で取得したデータを画面に表示するということを試してみました。

環境前提

Vue 3.1.3
Nuxt.js 2.3.4
node 9.11.2
Max OS X 10.13.6
Yarn 1.9.4

tl;dr

nuxt community が提供している axios-module を導入する
asyncData メソッドを使ってサーバーサイドレンダリングする

確認手順

初期アプリケーション準備

以下コマンドで Nuxt.js アプリケーションのひな形を作成します。

$ yarn create nuxt-app github-trending-sample

いくつかプロンプトで質問がありますが、 Choose a package manager のみ yarn にして、あとはデフォルトを選択して作成します。

完了したらローカルサーバを起動し、http://localhost:3000/ にアクセスできるか確認します。

$ yarn dev

axios-module インストール・設定

Nuxt.js アプリケーションから API へのリクエストが出来るように、axios-module をインストールします。

インストール手順は axios-module のドキュメントを参考にします。

$ yarn add @nuxtjs/axios

インストールできたら、nuxt.config.js に axios-module を利用する設定を追加します。

nuxt.config.js

module.exports = {
  //中略
  modules: [
    '@nuxtjs/axios',
  ],

  axios: {
  },
  //中略
}

GitHub Trending のデータを表示

pages/github_trending.vue に、以下のようなコードを実装します。

pages/github_trending.vue

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        <h3><a :href="item.url" target="_blank">{{item.name}}</a></h3>
        <span>Stars:{{item.stars}}</span>
        <p>{{item.description}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData({ app }) {
    const items = await app.$axios.$get('https://github-trending-api.now.sh/repositories?language=javascript&since=weekly');
    console.log(await items);
    return { items };
  }
}
</script>

http://localhost:3000/github_trending にアクセスすると、結果は以下のような形になります。

GitHub Trending データの取得元

GitHub Trending のデータですが、JSON 形式のレスポンスを返却してくれる github-trending-api という素敵なプロジェクトを見つけたので、そちらを利用しています。

以下のような URL で GET リクエストを投げると、以下のような JSON レスポンスを返却してくれます。

 {
    "username": "vuejs",
    "name": "vuejs",
    "url": "https://github.com/vuejs",
    "avatar": "https://avatars0.githubusercontent.com/u/6128107",
    "repo": {
      "name": "vue",
      "description": "🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.",
      "url": "https://github.com/vuejs/vue"
    }
  },
  {
    "username": "agalwood",
    "name": "Dr_rOot",
    "url": "https://github.com/agalwood",
    "avatar": "https://avatars3.githubusercontent.com/u/1032175",
    "repo": {
      "name": "Motrix",
      "description": "A full-featured download manager.",
      "url": "https://github.com/agalwood/Motrix"
    }
  },

`asyncData` メソッドでデータ取得

GitHub Trading データ取得ための API リクエストを asyncData 関数内で実行しています。

asyncData メソッドはページコンポーネントが呼び出される前に実行されます。またサーバーサイドでデータを取得、レンダリングまでしたい場合に利用できます。

そして、await app.$axios.$getの処理によって、axios-module を使った API リクエストを実行し、結果を items 変数に格納しています。await を書いておくことで、API リクエストの取得が完了するまで待機させておきます。

console.log はデバッグ用に JSON のキーの値を確認するために入れてあります。確認完了したら削除してOKです。

データ表示

最後に <template> 内で取得したデータを表示しています。v-for で items ごとにループしていたり、キーの値をそのまま表示したりと、特に難しいことはしていません。

おわりに

試しに Nuxt.js で API からのデータ表示を確認してみましたが、かなり簡単に実装できるなという印象がありました。

まだ最低限のことしか試していないので、ここからいろいろなことを試していきたいと思います。

参考

Nuxt.js ドキュメント

Nuxt.js の axios-module で GitHub Trending のデータ表示を試す