【Nuxt, Vue】WP REST APIから記事一覧を取得する方法

ヘッドレス開発が進んできており、その際に重要になってくるのがAPIの活用です。

今回は管理画面はwordpress、フロントはフレームワークを使った開発を想定して説明を行っていきます。

今回作るものとしては、ブログの記事一覧を取得し、表示させるといった簡単なものになります。

環境とバージョンについて
axiosを使ってAPI通信
まとめ
1. Nuxt, Vue 初心者におすすめの参考書

環境とバージョンについて

mac OS 11.2.3
エディタ　VSCode
node v14.8.0
- https://nodejs.org/ja/
npm 6.14.7
- https://www.npmjs.com/

axiosを使ってAPI通信

nuxtを使う場合はaxiosを使ったAPI通信が王道かと思いますでの、今回はaxiosを使った方法で解説をしていきます。

全体のコード

<template lang="pug">
.page-post
  h1 ブログ記事一覧
  .post
    ul
      li(v-for="post in posts")
        p {{ post.title.rendered }}

</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      posts: '',
    }
  },
  mounted() {
    axios
      .get('https://pg-log.com/wp-json/wp/v2/posts?per_page=100&page=1')
      .then((response) => (this.posts = response.data))
  },
}
</script>

<style lang="stylus">
.page-post
  margin-top 30px
  margin-bottom 50px
  .post
    ul
      li
        margin-top 15px
        padding-left 15px
        box-sizing border-box
        position relative
        &::before
          position absolute
          top 0
          left 0
          bottom 0
          margin auto
          content ''
          width 5px
          height 5px
          border-radius 50%
          background main-color
</style>

今回、HTMLはPug、CSSはStylusを使用しています。

NuxtへのPug、Stylusのインストールは下記を参考に導入してみてください。

nuxtにstylusをインストールする方法
pg-log.com/nuxt-stylus/

nuxt.jsにpugをインストールする方法
pg-log.com/nuxt-pug/

Vue

<script>
import axios from 'axios'
export default {
  data() {
    return {
      posts: '',
    }
  },
  mounted() {
    axios
      .get('https://pg-log.com/wp-json/wp/v2/posts?per_page=100&page=1')
      .then((response) => (this.posts = response.data))
  },
}
</script>

WPから記事の情報を取得するURL

http://sample.net/wp-json/wp/v2/posts

取得したいサイトのURLの後ろに、wp-json/wp/v2/postsを付けることでjsonのデータが返ってきます。

Getで情報を取得

dataで定義した、postsに返ってきた値を代入し、そのデータを使いまわす形にします。

axios
    .get('http://sample.net/wp-json/wp/v2/posts')
    .then((response) => (this.posts = response.data))
},

Html (Pug)

<template lang="pug">
.page-post
  h1 ブログ記事一覧
  .post
    ul
      li(v-for="post in posts")
        a(:href="post.guid.rendered")
          p {{ post.title.rendered }}

</template>

postsに格納されているデータを表示します。

タイトルとは、{ title : { rendered : “タイトル名” } }といった形で格納されているので、post.title.renderedとドットでたどっていくことで、取得ができます。

リンクも同じ要領で取得してきます、リンクの場合は、{ guid : { rendered : “リンク” } }といった形で格納されています。

上記で取得できない場合は、一度格納されたデータをすべて表示させてみると理解しやすいと思います。

p {{ post }} //fot分で繰り返し処理をしているので、この場合はpostとなります。

まとめ

管理画面は機能が充実しているwordpressなどで作成を行い、フロント側はページを作成しやすいフレームワークを使用する開発が増えています。
NuxtでAPI通信する場合は、axiosを使う
APIのURLは取得したいサイトURLの後ろに、wp-json/wp/v2/postsを付ける
axiosを使って返ってくる値をdata本記事では ( 変数 : post ) に格納する
返ってきたデータをもとにほしい情報を抽出し表示

Nuxt, Vue 初心者におすすめの参考書

リンク

おまけ

リンク