yuheijotaki.com

Vue.js / JSON から情報を引っ張ってくる その1

Vue CLI を使って JSON から情報を引っ張る。
とりあえず WordPress の /wp-json/ から。

Vue CLI の導入

こちらとだいたい同じですが、SassとリセットCSSとaxiosを追加。

Sass

scssを有効化

npm install sass-loader node-sass --save-dev

リセットCSS（normalize.css）

normalize.css を読み込む

npm install -D normalize.css

App.vue の js に追加

// normalize.css を読み込む
import "normalize.css";

axios

npm install --save-dev axios

App.vue の js に追加

// Ajax通信ライブラリ
import axios from "axios";

Vue CLI のコマンド

# serve with hot reload at localhost:8080
# ローカルサーバー起動、コード監視
npm run dev

# build for production with minification
# ビルド（ `/dist/` へ書き出し）
npm run build

WordPress の /wp-json/

知らなかったのですが、以前までパラメータ与えると投稿をフィルタして取得できたのですが、4.7から仕様が変わったようです。

Wordpress4.7からfilterパラメーターは削除されているので、プラグインを利用してfilterパラメーターを利用できるようにする WP REST API v2を利用し、カスタム投稿タイプの記事をカスタムタクソノミーでフィルタリングして取得する - エンジニアうまの日記

とりあえず JSON であればなんでも良いので https://blog.yuheijotaki.com/wp-json/ から引っ張る

App.vue

<div id="app">
  <ul>
    <li>name: {{results.name}}</li>
    <li>home: {{results.home}}</li>
    <li>timezone_string: {{results.timezone_string}}</li>
  </ul>
</div>

// normalize.css を読み込む
import "normalize.css";
// Ajax通信ライブラリ
import axios from "axios";
// JSON の URL
const jsonUrl = "https://blog.yuheijotaki.com/wp-json/";

export default {
  name: "App",
  data() {
    return {
      results: []
    };
  },
  mounted() {
    // JSON取得
    axios.get(jsonUrl).then(response => {
      this.results = response.data;
    });
  }
};

結果

f:id:jotaki:20190120164159p:plain

まとめ

GitHub

  • sass の導入で少しつまずく。CLIじゃないともう少し面倒な模様。
  • JSONのURLが固定の場合は axios は必要ないらしいのですが、axios.get() 以外にJSON持ってくる方法がわからなかった。
  • Instagram や Twitter APIから引っ張るつもりでしたが、Instagram => JSON の形式が難解、Twitter => APIの利用申請が難解、のために断念しました。
  • Vue CLI で Router を入れてみて、ざっくりざっくりした概念は分かったような気がしました。
  • 次回は投稿データをループして表示させるようにする。