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

## はじめに

少し 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](https://github.com/nuxt-community/axios-module) を導入する
* `asyncData` メソッドを使ってサーバーサイドレンダリングする

## 確認手順

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

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

```bash
$ yarn create nuxt-app github-trending-sample
```

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

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

```bash
$ yarn dev
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/222030/5ff4ee99-21bb-204b-0971-b1649fa6642a.png)


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

Nuxt.js アプリケーションから API へのリクエストが出来るように、[axios-module](https://github.com/nuxt-community/axios-module) をインストールします。

インストール手順は [axios-module のドキュメント](https://axios.nuxtjs.org/setup) を参考にします。

```bash
$ yarn add @nuxtjs/axios
```

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

```javascript:nuxt.config.js
module.exports = {
  //中略
  modules: [
    '@nuxtjs/axios',
  ],

  axios: {
  },
  //中略
}
```

### GitHub Trending のデータを表示

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

```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` にアクセスすると、結果は以下のような形になります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/222030/ba113164-2f2c-5485-afe0-a8e5ab8b187a.png)

#### GitHub Trending データの取得元

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

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

https://github-trending-api.now.sh/repositories?language=javascript&since=weekly

```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](https://ja.nuxtjs.org/guide/async-data) メソッドはページコンポーネントが呼び出される前に実行されます。またサーバーサイドでデータを取得、レンダリングまでしたい場合に利用できます。

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

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

#### データ表示

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

## おわりに

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

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

## 参考

* [Nuxt.js ドキュメント](https://ja.nuxtjs.org)