Nuxt.jsでのSPA開発 axios-moduleを使ってQiita APIを叩いてみる

Vue.jsキッカケでNuxt.jsを追ってみると、Firebaseと組み合わせてWebサービスを作る方をちらほら見かけますが、Firebaseはスケーラブルなサービスを爆速で開発できるとべた褒めする方も多く、その波に乗れるよう、何かしらのフロント技術に精通しておきたいのが心情。

Vue.jsをはじめNuxt.jsでも良質な参考書が揃ってきましたが、今回はこちらのChapter2を参考に、Nuxt.js上でaxios-moduleを活用したQiita API呼び出し迄を確認してみました。

ちなみにVue.js製フレームワークなのでVueやECMAScript2015を知っている必要があります。

もし触ったことが無ければ、こちらの初学者向けの参考書がオススメ!!

最終的な成果物はこちら

プロジェクト初期化

公式ドキュメント通り、Yarnでプロジェクト初期化。

開発環境にYarnが導入されていない場合はYarn導入。

素早く開発に着手するため、create-nuxt-appでプロジェクト初期化。

プロジェクト初期化後に「yarn dev」でHello Worldと表示されればOK!!

axios-module導入

axios-moduleはNuxtコミュニティで公式にメンテナンスされている拡張モジュール。

Promise based HTTP client for the browser and node.js

ブラウザやnode.js上で動くPromiseベースのHTTPクライアント。

axios-moduleはそのaxiosをより便利(リクエストのフックなど実装可能)に扱えるモジュールです。

axiosモジュールを読み込むためにnuxt.config.jsに追記。

Qiita API呼び出し

まずは参考書どおりにaxiosを使ってQiita APIを呼び出してみます。

Nuxt.jsのaxios-moduleでは、全てのVueコンポーネントに$axiosという名称でaxiosが格納され、その$axiosから$get/$postなどリクエストの送受信が可能なので、随分と楽チンです。

またaxios-moduleの利用で統一的なインターフェイスの元、開発が可能となるので、こちらのモジュール利用が推奨されているようです。

Vuexストアで呼び出し

バージョン2.4からクラシックモードは非推奨ですが、参考書に倣ってクラシックモードで実装。

アクションで非同期処理(Qiita API)を実行し、ミューテーションでステート更新、ステートの値を参照したい場合はゲッターと取得、このあたりはvueと同じなので知ってれば違和感ないかと。

参考書とおりに進めれば躓く箇所はないと思いますが、Qiita APIはトークンを取得していないとアクセス制限がかかるので、事前のトークン発行が良いでしょう。

あとちょこちょこ記載誤りがあるのでこちらの正誤表の参照も必要。