Movable Type の Data API から取得したJSONデータを Vue.js で表示する #JavaScript

最近何かと話題の Vue.js。Movable Type と組み合わせて、ちょっと触ってみました。

やること

Movable Type の Data API から、記事データを取得する。
Vue.js を使って、記事のタイトルデータをループ処理して表示する

流れ

XMLHttpRequestで Movable Type のData API から記事データをJSONで取得する
Vue.jsでJSONデータを読み込み、タイトルだけを<ul>でループ表示する

コード

下記のコードで、記事のタイトルをループ表示できました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>Vue.js でMovable Type から記事タイトルを表示するサンプルコード</title>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>

  <script>

// XMLHttpRequest 用の変数を定義する

    let xhr = new XMLHttpRequest();

// html読み込み時に Movable Type の Data APIへアクセスし、JSONデータを取得

    xhr.onreadystatechange = function() {
      if (this.readyState === 4 && this.status == 200) {

// 取得したJSONデータを、変数 entries へ格納
        const entries = this.response;

// 変数 entries を利用して、Vue.js のインスタンスを生成

        const example1 = new Vue({
          el: '#example-1',
          data: entries
        })
      }
    }

// Movable Type のData APIから取得するデータを定義。今回は記事データを取得。

    xhr.open('GET', 'http://MTのDataAPIのurl/v3/sites/ブログID/entries', true);
    xhr.responseType = 'json';
    xhr.send(null);
  </script>

</head>

<body>

  <ul id="example-1">
    <li v-for="item in items">
      {{ item.title }}
    </li>
  </ul>

</body>
</html>

参考URL

https://jp.vuejs.org/v2/guide/list.html
https://www.movabletype.jp/developers/data-api/
https://www.movabletype.jp/developers/data-api/v3-reference.html

備考

Vue.js で REST API から何かデータを取得する場合、別ライブラリの[vue-resource]というライブラリを使っていたようですが、現在は推奨から外れているとのこと。

Vue.js を使ってAjax 通信を行うには、XMLHttpRequestやjQueryなどの、別ライブラリで行う必要があるようです。

(そのうちVue.jsにAjax通信用のライブラリか何かが実装されるのかもしれないけど)

Movable Type の Data API から取得したJSONデータを Vue.js で 表示する

やること

流れ

コード

参考URL

備考

Movable Type の Data API から取得したJSONデータを Vue.js で表示する