Nuxt.jsでRESAS-APIからデータを取得するまで

RESAS-APIを利用する準備

RESAS-APIの利用者登録とAPIキーの発行

公式サイトから利用者登録を完了する。

ログインしてマイページにアクセスすると、一番下にAPIキーが表示されているのでメモ。

APIキーを環境変数として利用

プロジェクト直下に.envファイルを作成して、取得したAPIキーをRESAS_API_KEYとして記載しておく。

1
RESAS_API_KEY = '○○○○○○○○○○○○○○○○○'

Nuxtv2.13以降ならdotenvを利用しなくても、Nuxtの標準機能で環境変数を利用できる。

公式サイトにあるとおり、nuxt.config.jspublicRuntimeConfigを定義する。

1
2
3
publicRuntimeConfig: {
RESAS_API_KEY: process.env.RESAS_API_KEY,
},

環境変数は$configのグローバルに定義されるので、どこからでも呼び出し可能。

GitHub Actionsで環境変数を利用

GitHub Actionsでビルドする場合、プロジェクト内で設定した.envは反映されないので、別途設定する必要がある。

GitHubのリポジトリにseacretを設定する

公式ドキュメントを参考に、SECRET 情報を登録する。

  1. リポジトリのメインページからSettings項目を選択し、設定ページに飛ぶ。
  2. 左のサイドバーからSecretsを押下する。
  3. New repository secretボタンを押下する。
  4. Nameに SECRET 情報の名前RESAS_API_KEYを、Valueに SECRET 情報を入力する。
  5. Add secretボタンを押下し、SECRET 情報を登録する。

workflowでseacretを読み込む

ワークフローのbuildセクションで、登録したSECRET 情報を呼び出す。
※詳しくは公式ドキュメント参照

1
2
3
4
5
jobs:
build:
runs-on: ubuntu-18.04
env:
RESAS_API_KEY: ${{ secrets.RESAS_API_KEY }}

nuxtjs/axiosのインストールと設定

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

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

インストール

1
yarn add @nuxtjs/axios

nuxt.config.jsで@nuxtjs/axiosを有効化する。

1
2
3
modules: [
"@nuxtjs/axios",
],

RESAS-APIを利用するときの共通処理

公式ドキュメントに従って、baseURLとheader(API-KEY)を共通処理化する。

プラグインの作成

Nuxtプロジェクト内にplugins/resas.jsを作成。プラグインの詳細は公式ドキュメント参照。

resas.jslink
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export default function ({ $axios, $config }, inject) {
const api = $axios.create({
headers: {
common: {
Accept: 'application/json',
},
'X-API-KEY': $config.RESAS_API_KEY,
'Content-Type': 'application/json',
},
data: {},
})

api.setBaseURL('https://opendata.resas-portal.go.jp')

inject('resas', api)
}

RESAS-APIのAPI概要にあるとおり、APIのエンドポイントはhttps://opendata.resas-portal.go.jp/となるので、これをBaseUrlに設定している。

1
api.setBaseURL('https://opendata.resas-portal.go.jp')

また、headersの’X-API-KEY’にRESAS-API-KEYを設定する。(環境変数から取得する)

1
2
3
4
5
6
7
headers: {
common: {
Accept: 'application/json',
},
'X-API-KEY': $config.RESAS_API_KEY,
'Content-Type': 'application/json',
},

最後に、injectで関数を共通処理化している。これで別のコンポーネントからthis.$resasで呼び出すことができる。

1
inject('resas', api)

プラグインの有効化

nuxt.config.jsでプラグインを有効化。

1
2
3
plugins: [
{ src: '@/plugins/resas', ssr: true, },
],

RESAS-APIのデータを取得

axiosの基本的な使い方(GET)

公式ドキュメントにあるとおり、クエリパラメータを指定する方法が2種類ある。

axios.getに指定するURLに直接記述する方法

1
axios.get('/user?ID=12345')

axios.getの第2引数に、オプション指定する方法

1
2
3
4
5
axios.get('/user', {
params: {
ID: 12345
}
})

ここでは、②の方法を利用する。

都道府県一覧の取得

都道府県一覧をAPIから取得する。

共通化した this.$resasのgetメソッドを利用する。
APIのURLはapi/v1/prefectures、パラメータはなし。

1
2
const url = 'api/v1/prefectures'
const { data } = await this.$resas.get(url)

市区町村一覧の取得

市区町村一覧をAPIから取得する。

APIのURLはapi/v1/cities
パラメータを指定しない場合、全都道府県の市区町村一覧を取得する。

1
2
const url = 'api/v1/cities'
const { data } = await this.$resas.get(url)

特定の都道府県を指定したい場合は、パラメータにprefCodeをセットする。

1
2
3
const url = 'api/v1/cities'
const params = { prefCode: 28 }
const { data } = await this.$resas.get(url, { params })