CodeCode

なんか色々おぼえ書き。だいたいweb制作関連。

Vue.jsでWP REST APIたたいてみる

最近、勉強しているVue.jsを使って、WordPressのREST APIを使って記事を出力する実験をやってみた。

実際のコードはGitHubに置いています。
https://github.com/takanashi66/vue_rest

Vue.jsとは

AngularJSやReactと並んで、人気が高まっているJavaScriptライブラリです。
リアクティブなデータバインディングや仮想DOMによる高速レンダリング、コンポーネント指向のUIが特徴です。
MVVM(Model・View・ViewModel)アーキテクチャをベースに、Viewに特化し、シンプルに作られているので学習コストが低く、簡単に導入ができます。
また、公式のドキュメントも日本語化されていて安心です。

WP REST API

REST APIとは、パラメータを指定して特定のURLにHTTPでアクセスすると、XMLやJSONなどでが返ってくるAPIです。
WP REST APIは、そのREST APIを使って、WordPressに投稿されている記事の一覧をJSONで取得したり、
記事の投稿、編集ができるWordPressのAPIです。

Vue.jsでWP REST APIのJSONを取得する

今回は、REST APIのリクエストを処理するのに、axiosを使います。

今回の場合、http://rest.dev/wp-json/wp/v2/posts/にリクエストを送り、返ってきたデータをpostsに入れています。

今回は、JSONを取得して、タイトルと抜粋を表示させるだけなので、HTMLもシンプルです。

for of を使って、Vue側で入れたデータを取得します。
記事タイトルは、

に入っているので、

で、その値をとってきます。

抜粋も同様に、

に入っているので、

で値をとってきます。

まとめ

Vue.jsを使えば、部分的に表示程度であれば、簡単にWP REST APIを扱うことができます。
しかし、抜粋の部分はJSONをみてもらうとわかるのですが、pタグがついた状態になっています。
現状では、データを置換して外すしか思いつかないのですが、なんらかの関数またはやりかたがあるのかもしれません。
そのほかにも、サムネイルの表示も少々ややこしそうです。
また、調べて追記します。
496cbf2a291826c19501b751e8.js\">

今回の場合、http://rest.dev/wp-json/wp/v2/posts/にリクエストを送り、返ってきたデータをpostsに入れています。

今回は、JSONを取得して、タイトルと抜粋を表示させるだけなので、HTMLもシンプルです。

for of を使って、Vue側で入れたデータを取得します。
記事タイトルは、

に入っているので、

で、その値をとってきます。

抜粋も同様に、

に入っているので、

で値をとってきます。

まとめ

Vue.jsを使えば、部分的に表示程度であれば、簡単にWP REST APIを扱うことができます。
しかし、抜粋の部分はJSONをみてもらうとわかるのですが、pタグがついた状態になっています。
現状では、データを置換して外すしか思いつかないのですが、なんらかの関数またはやりかたがあるのかもしれません。
そのほかにも、サムネイルの表示も少々ややこしそうです。
また、調べて追記します。

トップへ戻る