wordpress javascript jquery 投稿日：2017/09/07

WordpressのREST APIをJavascriptで非同期取得するサンプルコード3種

Wordpressに実装されているREST APIは、予め定義されたルーティング（インターフェース）に対し適切なプロトコルでリクエストすることで、追加や削除などのあらゆる操作を行うことができる。まずは基本である記事のGETを3種のjavascript方言から取得してみる。

REST APIを実装したことで、Wordpressはアプリケーションプラットフォームとしての可能性を見出しました。

単純なブログのようなウェブサイトには恩恵が少ないかもしれませんが、我々のようなWordpressを自由に操る製作者はREST APIを学ぶことで、WEBサイトデベロップメント以上の大きな市場に挑戦する権利を得ます。これは革新的なことです。

この記事はREST APIを学ぶ上での第一歩として、ja.wordpress.orgの記事一覧をREST APIから取得し、シンプルなjavascriptで表示することを目指します。

念のため、ES5、ES6、jQueryの方言3種で実装しています。

要件定義

画面ロード時に非同期で記事一覧を取得します。

取得に成功したらボタンをアンロックします。

ボタンをクリックすると記事が表示されます。

HTMLのサンプル

ビューの要素はボタンbutton#getBtnと記事を流し込む箱div#resultの2つだけです。

スタイルは適当にBootstrapを読み込んでいます。

<html>
<head>
    <title>WordpressのREST APIから記事をGETして表示するよ</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
    <style>
        body {max-width: 768px;padding: 1em;}
        img {max-width: 100%;height: auto;}
    </style>
</head>
<body>
    <button id="getBtn" class="btn btn-primary" disabled>記事を表示する</button>
    <hr />
    <div id="result"></div>
    <script>
        // ここにscriptを埋め込むよ
    </script>
</body>
</html>

javascriptのサンプル

方言3種です。

ES5(ES2010)の場合

var __url = "https://ja.wordpress.org/wp-json/wp/v2/posts"
    , $__btn = document.getElementById("getBtn")
    , $__result = document.getElementById("result");
var __json;

document.addEventListener("DOMContentLoaded", function (eve) {
    console.log(__url + 'からjsonを読み込んでいます...');
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            __json = this.response;
            console.log(__json);
            $__btn.disabled = false;
        }
    }
    xhr.open('GET', __url, true);
    xhr.responseType = 'json';
    xhr.send(null);
}, false);

$__btn.addEventListener('click', function () {
    for (var i in __json) {
        console.log(__json[i]);
        var $post = document.createElement('div')
            , $title = document.createElement('h2')
            , $content = document.createElement('div');
        $title.classList.add('post-title');
        $content.classList.add('post-content');
        // IDとタイトル
        $title.innerHTML = __json[i].id + ":" + __json[i].title.rendered;
        // 記事内容
        $content.innerHTML = __json[i].content.rendered;
        $post.appendChild($title);
        $post.appendChild($content);

        $__result.appendChild($post);
    }
});

大したことしてないのに冗長ですね。
当然、XHRのコールバックを拡張するとネストします。

ES6(ES2015)の場合

const __url = "https://ja.wordpress.org/wp-json/wp/v2/posts"
    , $__btn = document.getElementById("getBtn")
    , $__result = document.getElementById("result");
let __json;
document.addEventListener("DOMContentLoaded", function (eve) {
    console.log(__url + 'からjsonを読み込んでいます...');
    fetch(__url).then(function (res) {
        return res.json();
    }).then(function (json) {
        __json = json;
        console.log(__json);
        $__btn.disabled = false;
    });
}, false);

$__btn.addEventListener('click', function () {
    for (const i in __json) {
        console.log(__json[i]);
        const $post = document.createElement('div')
            , $title = document.createElement('h2')
            , $content = document.createElement('div');
        $title.classList.add('post-title');
        $content.classList.add('post-content');
        // IDとタイトル
        $title.innerHTML = __json[i].id + ":" + __json[i].title.rendered;
        // 記事内容
        $content.innerHTML = __json[i].content.rendered;
        $post.appendChild($title);
        $post.appendChild($content);

        $__result.appendChild($post);
    }
});

fetch、constくらいしか使ってないですが、やはり安心感があります。

jQuery+ES5の場合

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>

等でjQueryを読み込んだ上で、

var __url = "https://ja.wordpress.org/wp-json/wp/v2/posts"
    , $__btn = $("#getBtn")
    , $__result = $("#result");
var __json;

$(function () {
    console.log(__url + 'からjsonを読み込んでいます...');
    $.ajax({
        type: 'GET',
        url: __url,
        dataType: 'json',
        success: function (response) {
            __json = response;
            console.log(__json);
            $__btn.removeAttr('disabled');
        }
    });
});
$__btn.on('click', function () {
    $.each(__json, function (idx, val) {
        var $post = $('<div></div>')
            , $title = $('<h2></h2>').addClass('post-title').html(val.id + ":" + val.title.rendered)
            , $content = $('<div></div>').addClass('post-content').html(val.content.rendered);
        $post.append($title);
        $post.append($content);

        $__result.append($post);
    });

});

DOM操作周りのダイエットが凄まじいです。
なんだかんだでjQueryはありがたいですね。

$.ajax関数はコールバックを拡張するとネストしてしまいますが、[$.Deferred関数](https://api.jquery.com/deferred.then/)に置き換えることでPromiseによる並列処理が可能になります。

今回はGETだけでしたが、もちろんPOSTやUPDATE、DELETEなどのプロトコルであらゆる操作を行うことができます。機会があれば紹介してみたいと思います。

一応動作するサンプル

下のボタンを押してみて下さい。

comments powered by Disqus