vue.jsとAxiosを使ってWP REST APIからタグを取得してみる

REST APIと私とvueと、みたいなのが流行っているらしいとは聞いていましたが、静的コンテンツまで生成出来るとか聞いて、ガタっとなりました。それ私がやりたいやつじゃん、と。GW最終日のネタに決定。

でもまあ、先ずはvueもREST APIも全然分からんので、取り敢えずWordPressからデータを取得するアレコレを触ってみたのでメモしておきます。

要るもの

vue.js — Javascriptのフレームワーク。たぶん。簡単簡単って書いてあるけど、まだ全然仲良くなれない。最近人気らしい。
axios.js — ブラウザとNode.jsのためのHTTPクライアント。かしこい。
wordpress — ディファクトスタンダードなCMS。腐れ縁。4.7から勝手にREST APIを出すようになってます。肥大化したCMSの起死回生なるか。

・・・これしか要らない、という意味では超簡単かも。コマンドラインも基本必要ない。

使い方

WordPressを普通にインストール。既存のWordPressでも4.7以降なら良いので、空のテーマを作成します。

どう書いても良いので、htmlを用意して、ヘッダーに

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

2019/01/10更新：unpkg.comが不安定なのでcloudflareに変更しました。

を入れる。ともう使えます。（vue.jsのCDNは色々あるので最適なものを選んでください。）

const vm = new Vue({
  el: '#app',
  data: {
    posts: []
  },
  created() {
    axios.get("/wp-json/wp/v2/posts")
    .then(response =&amp;gt; {this.posts = response.data;})
    .catch( error =&amp;gt; {
      window.alert( error );
    } );
  }
});

と書いたら、JSON取得出来ちゃうの。ほら超簡単。
で、ここからタイトルのリスト取ってくるとかは記事一杯あるんだけど。

じゃあ取り敢えず、アイキャッチ画像とタグとタイトルと抜粋取ってきて？

と思うじゃないですか？じゃないとサイト作れないじゃないですか？

タイトルまでは確かに簡単なんだけど、アイキャッチ画像とかタグになると途端に面倒になるWP REST API。全然RESTじゃない。

_embedでアイキャッチ画像情報を取得

axios.get("/wp-json/wp/v2/posts?_embed")

って書くとアイキャッチ画像とかAuthorとかカテゴリーとかがJSONに入ってきます。（いやアイキャッチ画像のパスだけで良いんだけど、ってなるし、ホントに欲しいのはサムネイル画像のパスなんだけどなーってなる。）

タグ（タクソノミー）を取得するにはカスタムしなきゃ駄目

むしろアイキャッチ画像がこの扱いなら分かるんだけど、何故タグ情報をそんな出し渋るのか。これは参照URLにもある、

投稿が所属するタームを全て出力する

をご参照ください。function.phpにつらつらと、APIの拡張の関数を書いて、add_actionすべし。この辺りは、公式の、

レスポンスを修正する | WP REST API v2 Documentation

に書いてあるみたいです。私みたいな勝手な文句ばかり言い立てる人が居るのでしょうか、こちらの公式にしっかりと何故こういう構成なのかとかフォローが書いてあるので粛々と拝読しましょう。いつも貰ってばかりですみません。

vue.jsでJSON解析

そんな訳で万人のためのAPIなのでJSONが複雑になるのはしょうがない。後は、vue.jsにおまかせだ！という訳で、JSONからvueでif文とかfor文回したりします。これが中々分からなかった。

vue.jsは公式の日本語ドキュメントがむちゃくちゃ充実しているので、しっかりココを読み込めば分かるようになっているのですが、phpのリファレンスほど懇切丁寧ではなくスタイリッシュに書いてあるので、さるあたまにはちょっと時間がかかりました。

v-forで配列を展開するには

v-forの中でv-forを回すやり方がちょっと分からなくて混乱したのですが、これもちゃんとリストレンダリング — Vue.js に書いてあって、

v-for="(item, index) in items"

という風に書くんだけど、itemsの中身をitemとするところがピンとこなくて、itemsの中のキーじゃないと駄目なのか、好きな名前付けられるのか、？？？てなったポイント。結論としては付けられる模様。

HTMLをそのまま出すには

もいっこ、抜粋とか本文はHTMLで入ってるので、そのままのHTMLを出すにはテンプレート構文 — Vue.jsにあるように、v-htmlを使いましょう。

で、こんな感じになりました。

直近3件のポストから、アイキャッチ画像とタイトル、抜粋、タグを出力できる。はず。

便利なもの

公式にサラッと書いてあるので見落としそうになるんだけど、

vue-devtools

というのが超便利なので、vue.jsを使うなら絶対入れましょう。あ、知ってる？見落としたの私だけですかね・・・。