[nuxt.js] RESAS-APIから人口データを取得する(その1)

 Vue.js アプリケーションを効率的に作成できるフレームワーク「nuxt.js」を使って、地域経済分析システム「RESAS-API」から兵庫県の人口データを取得するアプリケーションを作成していきます。

プロジェクトの作成

まずはターミナルで「create-nuxt-app」。yarnでもインストールできます。詳しくは公式ドキュメント参照。プロジェクト名は「resas-population-hyogo」とします。

create-nuxt-app resas-population-hyogo

幾つか設定項目が出てきます。今回は下記の通り設定しました。

? Project name: resas-population-hyogo
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/Jamstack hosting)

インストールが完了すると、プロジェクト名のディレクトリが作成されているはずですので、そのディレクトリに移動します。

プロジェクトのビルド

プロジェクトのディレクトリに移動して、ターミナルで下記コマンドを実行します。

npm run dev

ビルドが成功したら、ブラウザからlocalhost:3000にアクセスします。初回起動では下記画面が表示されるはずです。

nuxt/axiosをインストール

APIを利用する場合、最近ではPromise ベースの HTTP クライアントである「axios」を利用することが多いようです。

ここでは、nuxt.js用のブラグインである「nuxt/axios」をインストールしていきます。

まずはターミナルで下記コマンドを実行してバッケージをインストールします。

$npm install --save @nuxtjs/axios

--save をつけることでpackage.jsonに自動で追加されます。package.jsonに追加すると、別環境で動作させたい時や、同じプロジェクトをメンバー間で共有したい時に、npm installするだけで同じ環境(プラグインやライブラリが同じ状態)になります。

次に、インストールした@nuxtjs/axiosが有効になるように、プロジェクト直下のファイル「nuxt.config.js」に下記の通り追加します。

nuxt.config.js
modules: [
    "@nuxtjs/axios",
],

これでnuxt/axiosを利用する準備が整いました。

RESAS-APIから人口構成を取得するためのURL

地域経済分析システム「RESAS-API」の人口構成データを取得していきます。

上記リンク先に説明のある通り、APIを取得するためのパラメータは下記の通りです。

URLapi/v1/population/composition/perYear
prefCode都道府県コード
cityCode市区町村コード
「すべての市区町村」を選択する場合は「-」を送ります。

兵庫県の都道府県コードは「28」なので、兵庫県全体の人口構成データを取得したい場合は、下記のURLとなります。「https://opendata.resas-portal.go.jp/」はAPIのbaseURLです。

https://opendata.resas-portal.go.jp/api/v1/population/composition/perYear?prefCode=28&cityCode=-

nuxt.jsでRESAS-APIを利用するときの共通処理

上述した通り、RESAS-APIを利用する場合、エンドポイント(baseURL)は「https://opendata.resas-portal.go.jp/」となります。

また、RESAS-APIを利用するためには、APIキーも必要となります。

そこで、公式ドキュメントに従って、baseURLとheader(API-KEY)を共通処理化していきます。プロジェクトディレクトリの「plugins」配下に、「axios.js」と「api.js」を作成します。

plugins/axios.js
export default function ({ $axios, redirect }) {
  $axios.onRequest(config => {
    console.log('Making request to ' + config.url)
  })

  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status)
    if (code === 400) {
      redirect('/400')
    }
  })
}
plugins/api.js
export default function ({ $axios }, inject) {
    // Create a custom axios instance
    const api = $axios.create({
        headers: {
            common: {
                Accept: 'application/json',
            },
            'X-API-KEY': 'ここにAPIキーを記載',
            'Content-Type': 'application/json',
        },
        data: {},
    })

    // Set baseURL to something different
    api.setBaseURL('https://opendata.resas-portal.go.jp/api/v1')

    // Inject to context as $api
    inject('api', api)
}

'X-API-KEY’の部分に、取得したRESAS-APIのAPIキーを入力してください。

次に、「axios.js」と「api.js」を有効化するために、「nuxt.config.js」に下記の通り追記します。

nuxt.config.js
  plugins: [
    {
      src: '@/plugins/axios',
      ssr: true,
    },
    {
      src: '@/plugins/api',
      ssr: true,
    },
  ],

これでnuxt/axiosでRESAS-APIを利用する準備が整いました。

コンポーネントの作成

では実際に、RESAS-APIから人口構成のデータを取得して表示させるコンポーネントを作っていきましょう。

公式ドキュメントには、

  1. asyncDataで利用する場合
  2. methods/created/mountedで利用する場合
  3. storeで利用する場合

の3つの方法が例示されています。今回はコンポーネントでデータを取得するため、ページコンポーネントでしか利用できないasyncDataは使えません。そこで、methodsでデータを取得することとします。

components/Population.vue
<template>
  <p>{{ population }}</p>
</template>

<script>
export default {
  data() {
    return {
      population: []
    }
  },
  created() {
    this.fetchSomething()
  },
  methods: {
    async fetchSomething() {
      const res = await this.$api(
        'population/composition/perYear?prefCode=28&cityCode=-'
      )
      console.log(res.data.result)
      this.population = res.data.result
    }
  }
}
</script>

最後に、作成したコンポーネントをページコンポーネント「index.vue」で読み込みます。

pages/index.vue
<template>
  <population />
</template>

<script>
import Population from '@/components/Population.vue'
export default {
  components: {
    Population
  },
  data() {
    return {
      prefCode: '28'
    }
  }
}
</script>

http://localhost:3000/にアクセスすると、下記のJSONが表示されるはずです。

{
    "message": null,
    "result": {
        "boundaryYear": 2015,
        "data": [
            {
                "label": "総人口",
                "data": [
                    {
                        "year": 1960,
                        "value": 3906487
                    },
                    {
                        "year": 1965,
                        "value": 4309944
                    },
                          -----   中略   -----   
                ]
            },
            {
                "label": "年少人口",
                "data": [
                    {
                        "year": 1960,
                        "value": 1089072,
                        "rate": 27.8
                    },
                    {
                        "year": 1965,
                        "value": 1037393,
                        "rate": 24
                    },
                     -----   中略   -----   
                ]
            },
            {
                "label": "生産年齢人口",
                "data": [
                    {
                        "year": 1960,
                        "value": 2594822,
                        "rate": 66.4
                    },
                    {
                        "year": 1965,
                        "value": 3006974,
                        "rate": 69.7
                    },
                     -----   中略   -----   
                ]
            },
            {
                "label": "老年人口",
                "data": [
                    {
                        "year": 1960,
                        "value": 222593,
                        "rate": 5.6
                    },
                    {
                        "year": 1965,
                        "value": 265577,
                        "rate": 6.1
                    },
                     -----   中略   -----   
                ]
            }
        ]
    }
}

dotenvを利用してAPIキーを環境変数で設定する

このままではAPIキーが第三者に見えてしまいますので、dotenvを利用して、APIキーを環境変数として設定します。

まずはターミナルからnuxtjs/dotenvをインストール。

$npm install --save @nuxtjs/dotenv

プロジェクト直下に.envファイルを作成して、下記の通りAPI-キーを設定します。

.env
API_KEY='ここにAPIキーを記載'

nuxt.configでAPI_KEYを設定します。

nuxt.config.js
require('dotenv').config()
const { API_KEY } = process.env

export default {
  env: {
    API_KEY
  }
}

最後に、plugins/api.jsを修正します。

plugins/api.js
export default function ({ $axios }, inject) {
    // Create a custom axios instance
    const api = $axios.create({
        headers: {
            common: {
                Accept: 'application/json',
            },
            'X-API-KEY': process.env.API_KEY,
            'Content-Type': 'application/json',
        },
        data: {},
    })

    // Set baseURL to something different
    api.setBaseURL('https://opendata.resas-portal.go.jp/api/v1')

    // Inject to context as $api
    inject('api', api)
}

ソースコード

ここまでのコードをGItHubに公開していますので、自由にご利用ください。

次回は取得した人口構成データを使って、「highchart.js」でグラフを作成していきます。

こちらもご覧ください

本ブログの管理人がNuxt.jsで開発したサイトです。