どうもです。ヒロと申します。

今回はwp-rest-apiとreact.jsを使って色々試してみました。ついでにcss-modulesにも初トライしてみました。
css-modulesについては別記事で書きました。

今回作った物はこのgithubのリポジトリに一式ありますので、良ければ覗いてみてください。

今回のゴール

wp-rest-apiの使い方をざっくり理解する
デザインを簡略化する為にmaterial-uiを使用する

というわけで早速作った物をご紹介します！

ブログサイトの記事をwp-rest-api経由で取得して表示する何かを作った

本当はwindow size 400pxくらいにして見て頂きたいですが、一応こんな感じのページを作りました。

wp-rest-apiについて

まずはwp-rest-apiを使用する為に、記事を引っ張ってくる元のwordpressに以下のプラグインをインストールします。
- WordPress REST API (Version 2)

プラグインをインストールし、プラグインを有効化したらwordpress側の設定は完了です。

wp-rest-apiの基本的な使い方について

container/Main.jsx

import request from 'superagent';
const url = {
  req: 'http://ここにドメインを入れる/wp-json/wp/v2/posts'
}
...
receive() {
    request
    .get(url.req) //リクエストするurl
    .end((err, res) => {
      if(err) {
        console.log(err)
      } else {
        this.setState({
          body: res.body,
          loader: false
        })
      }
    });
  }
...

やることは凄くシンプル。'http://ここにドメインを入れる/wp-json/wp/v2/posts'これがリクエストするドメインのフォーマットになります。今回はsuperagentを使用していますが、ajaxでもfetch apiでaxiosで何でもOKです。

またthis.setState()でレスポンスのbody内のデータを突っ込んで、処理しています。

個別記事ページについて

記事一覧ページとやっていることは変わらないのですが、違いとしてはサムネイル画像を読み込んでいます。
サムネイル画像をwordpress側から引っ張ってくるにはhttp://mohu-para.com/wp-json/wp/v2/mediaにリクエストしなければならず、果てさてどうした物か困り果てました。
今回はベーシックに
- 個別ページのドメインhttp://localhost:8080/9999←ここの9999の部分が記事IDなのでそれを頼りにその記事のデータだけまず引っ張ってくる
- 次に引っ張って来たjsonの中にあるfeatured_media(これはサムネイル画像のID)をリクエストURLに詰め込んでサムネイルの情報をリクエストする
- サムネイルの情報がレスポンスで返って来たらコンポーネントに反映する。

詳しくはassets/container/Post.jsxを見て頂ければと思います。

全体を通しての感想

初めてwp-rest-apiをやってみようと思った時はなんだかやり方がよくわからず、モヤモヤしていましたが、今は日本語のリファレンスもあったり、色々な方が説明している記事を書いていたりで導入の敷居本当低くなったなぁと感じます。
今回は記事の作成や削除といった認証が必要な処理周りのやり方は扱いませんでしたが、その周りもドキュメント見た感じ敷居低そうな気がしました。

wordpressは1年と数ヶ月前までゴリゴリ書いてたりしましたが、PHPがあまり好きではないので正直あんまりwordpressは使いたくないと思っていました。しかし、wp-rest-apiの存在を知り実際に使ってみてまだまだwordpress良いじゃんと思った、、、というか大分フロントエンドフレンドリーになったんだなぁと感じました。

今後やってみたいこととしてはwp-rest-apiとreact-nativeを使ってAMやmeryみたいなアプリを作ってみたいなぁと思いました。

参考資料

wp-rest-apiリファレンス
http://ja.wp-api.org/reference/

wp-rest-apiとreact.jsを使って色々試してみた話し