WordPress REST API とリアクティブプログラミング

WordPress REST API とリアクティブプログラミング
SaCSS Special 08

自己紹介
名前田中広将（ひろましゃ）
住所札幌市
職業 SIer 所属のインフラエンジニア
WordPress歴 2005年～
WordPress Bench 札幌発起人（すいません…）

本日の内容
本日は、WordPress 4.4 から実装された
WordPress REST API と、
昨今定着してきた「リアクティブ」系
JavaScript ライブラリを組み合わせて、
ウェブサイトを構築する手法を
解説したいと思います

本日の内容
1.WordPress REST API とは
2.リアクティブプログラミングとは
3.Vue.js と WordPress REST API を組合せた活用

WP REST API の歴史
● WordPress REST API は、バージョン 4.4 からコア実装
された、コンテンツの内容を JSON（JavaScript）形式で
返すための仕組みです。
● 従来、WordPress においてコンテンツを出力するために
「テーマ」を用いていましたが、REST API の追加により、
新しい出力先が追加された形です。
● WordPress 4.7（近日リリース）ではさらに、標準的な API
も実装され、複雑な抽出操作も、ドキュメントに従い簡単に
取り扱えるようになります。

WordPress REST API の活用
● WordPress REST API は「エンドポイント（URL）」
に対して JavaScript などから REST リクエストを行
うことで、コンテンツの内容を取得できます。
●
エンドポイントは自分で設計し拡張することができま
す。

WordPress REST API の活用
REST API を活用すると、WordPress で次のようなこ
とが実現可能です。
– 静的サイトへの WordPress コンテンツの記載（本日紹介）
– 画面遷移のない検索の実装（本日紹介）
– ニュースサイトで見られるような、コンテンツの遅延ロード
– バックエンドのコンテンツリポジトリとしての WordPress の
活用
– 等々...

WordPress REST API を体験する
WordPress サイトの URL のおしりに /wp-json/ を付与し
てみてください。
/wp-json/
サイトが持っている「エンドポイント」が確認できるエンドポ
イントです。

WordPress REST API を体験する
その情報を元にさらにエンドポイントをたどります。
/wp-json/oembed/1.0/embed/
指定した URL の投稿の抜粋が JSON 形式が取得できます。

WP REST API と JavaScript の関係
● 静的サイトや WordPress テーマが、WordPress REST
API を通じてコンテンツを取得するために、JavaScript
を使います。
● JavaScript から AJAX を用いて「エンドポイント」に対し
て REST リクエストを行い、戻された JSON 形式を入
力とし、HTML に展開するのが大きな流れになります。
● 閲覧している人の操作に応じて、REST のリクエストを
変化させ、必要な情報を取得します。（条件付き検索な
どで活用できます）

WP REST API と JavaScript の関係
これらを従来のプログラミング手法で実装すると、
煩雑な処理がたくさんでてきます。
そこで登場してきたのが「リアクティブ」系と言われる
JavaScript ライブラリです。

従来のプログラミング手法を使った
REST API 活用の際の課題点
● プログラマーは、ユーザの操作に応じて JSON を
取得し、DOM（HTML）を操作しコンテンツを整形し
て出力するプログラムをかきます。
● 現在画面に表示されている HTML ツリー状態
（ノード）を把握し、必要に応じて HTML タグの追加
や削除を行います。

従来のプログラミング手法を使った
REST API 活用の際の課題点
● ある操作の後は、この HTML タグがあるので削除する・・・
● ある操作の後は、この HTML タグがないので追加する・・・
●
ひとつの操作だけではなく、前回、前々回…、いろいろなパターンで変
化していく HTML の状態をすべて把握して、プログラミングしなけれ
ばならないのため、特定の操作順に対する考慮不足といった不具合
も起きやすいです。
このような課題に対応すべく登場したのが、
JavaScript のリアクティブ系のライブラリになります。

2. リアクティブプログラミングとは

プログラミングできる人
突然ですが問題です。
● "プログラミングができる人"とはどのような人で
しょう?
● 高度な CSS が記述できるのに、プログラミングが
苦手という事象が起きるのはなぜでしょう？

プログラミングできる人（答え）
●
「変数」があるからです。
● CSS には変数がありません。
●
プログラミングができる人は、上から順に流れてい
くソースコードの変数の状態を常に把握し、コント
ロールする術を知っています。
●
手続き型、構造化プログラミング、オブジェクト指向
などなど、様々なプログラム言語が持つ仕組みは、
いかに大量の変数の状態を把握しやすくするかと
の戦いの中で生まれました。

プログラミングの例
（FizzBuzz 問題）
● FizzBuzz 問題
プログラマーの基本的な素養をみるための、ごく簡
単な問題。

（FizzBuzz 問題）
●
問題
1から順に数を表示するプログラムを書け。
ただし3の倍数のときは数の代わりに「Fizz」と、
5の倍数のときは「Buzz」と表示し、
3と5両方の倍数の場合には「FizzBuzz」と表示すること。
●
回答の出力例
1, 2, Fizz, 4, Fizz, Buzz, 7, 8, Fizz, Buzz, 11, Fizz,
13, 14, FizzBuzz, ...[省略]..., 97, 98, Fizz, Buzz

（FizzBuzz 問題・回答）
var i; // 変数
for (i = 1; i <= 100; i++) { // ループ
if (i % 3 == 0 && i % 5 == 0) {
console.log('FizzBuzz');
} else if (i % 3 == 0) {
console.log('Fizz');
} else if (i % 5 == 0) {
console.log('Buzz');
} else {
console.log(i);
}
}

従来のプログラミングスタイル

従来のプログラミングスタイル
●
ソースコードが上から下に流れることを基本として、
ループで実行される命令の位置をコントロールす
る。
●
命令により変数の値を変化させ、実行中のプログラ
ムの状態を変化させ、望みの処理をさせる。
●
プログラミング言語から外の世界に命令し、外部の
状態を変化させる。（画面出力等）
●
つらい…

CSSとプログラミング言語の比較
● CSS はプログラミング言語と異なり、実行行や変
数の状態などをもたず、宣言のみを行うため、シン
プルで分かりやすい。
●
このような宣言型のプログラミングスタイルが、従
来と異なる、リアクティブプログラミングの特徴のひ
とつです。

CSS で FizzBuzz 問題
●
問題
1から順に数を表示するプログラムを書け。
ただし3の倍数のときは数の代わりに「Fizz」と、
5の倍数のときは「Buzz」と表示し、
3と5両方の倍数の場合には「FizzBuzz」と表示す
ること。

CSSで FizzBuzz 問題・回答
<ol>
<li></li>
<li></li>
...[省略]...
<li></li>
<li></li>
</ol>

li:nth-child(3n):before {
content: "Fizz";
}
content: "Buzz";
}
content: "FizzBuzz";
}
li:nth-child(3n), li:nth-child(5n) {
list-style: none;
}

● 入力（HTML）を与えれば「宣言」通りオートマティッ
クに表示が変わる。
●
これがリアクティブな動きです。
● というわけで、JavaScript リアクティブ系プログラミ
ングも、従来なプログラミングに慣れている方より、
最初から CSS などで宣言的コーディングをしてい
る方のほうが、とっつきやすいかもしれません。

JavaScript を使ったリアクティブな例
●
この例は「時間」を入力として、キャラクターを動かす例
です。
http://pararaehon.com/
● JavaScript で画面を書き換えるプログラムを簡潔にか
こうとすると、リアクティブな宣言的プログラミングにたど
りつくような気がします。

JavaScript を使ったリアクティブな例
hitsuji01: {
image: 'images/page02/02_hitsuji01.png',
update: function() {
this.y = 600 + (1 - Math.exp(-6 * (this.tick / 60))) * -280;
}
},

3. Vue.js と WP REST API を組み合せた活用

Vue.js でできること
● Vue.js は JavaScript のリアクティブ系ライブラリの
ひとつです。
● 今日の Vue.js の任務は JSON を入力とし HTML
をリアクティブに変化させることです。
● WordPress REST API で取得した JSON を
HTML に展開する宣言します（データバインディン
グ）
● 宣言さえ完了すれば、取得した JSON データによっ
て勝手に画面が書き換わるイメージです。

Vue.js の特徴
● Vue.js は通常 HTML に付与された属性を手がか
りに、JavaScript と HTML を結びます。
● このため、既存の HTML や WordPress テーマ
（CMS）と相性が良いです。

Vue.js の特徴
● 多くのリアクティブ系の JS ライブラリは、コンポーネントの考え方のもと、処理したい
HTML を JavaScript ファイル側に持たせます。
● WordPress を始めとした多くの CMS では、テーマとなるファイルをその CMS で処
理して HTML を生成するため、 .js ファイルに HTML が移動すると、結構つらいです。
var Hello = React.createClass({
render: function() {
return (
<div>Hello {this.props.name}</div>
);
}
})

Vue.js を単体で使う（練習）
● Vue.js を単体で使ってデータを HTML に展開
<tbody id="latest">
<tr v-for="item in items">
<td>{{item.post_title}}</td>
<td>{{item.post_content}}</td>
</tr>
</tbody>

Vue.js を単体で使う（練習）
<script>
new Vue({
el: '#latest',
data: {
items: [
{
post_title: '佐賀県',
post_content : "佐賀市"
},
{
post_title: '岩手県',
post_content : "盛岡市"
},
]
}
});
</script>

静的ページで Vue.js を使い
WordPress からデータを取得
● functions.php で WordPress に REST API の口を作成する
add_action( 'rest_api_init', function () {
register_rest_route( 'sacss/v1', '/latest', array(
'methods' => 'GET',
'callback' => function() {
return get_posts(
array('orderby' => 'rand'
, 'posts_per_page' => -1));
}
) );
} );

静的ページで Vue.js を使い
● 静的 HTML に配置した Vue.js で HTML に展開する
<script>
new Vue({
el: '#latest',
data: {
items: []
},
created: function() {
this.$http.get('/wp-json/sacss/v1/latest', function (data) {
this.items = data;
})
}
})
</script>

WordPress テーマで Vue.js を使い
●
functions.php で WordPress に REST API の口を作成する
add_action( 'rest_api_init', function () {
register_rest_route( 'sacss/v1', '/cat/(?P<term_id>d+)', array(
'methods' => 'GET',
'args' => array(
'term_id' => array(
'default' => 1,
'sanitize_callback' => 'absint',
)
),
'callback' => function($request) {
return get_posts(array(
'cat' => $request->get_param('term_id'), 'posts_per_page' => -1));
}
) );
} );

● WordPress テンプレートファイル
<ul>
<?php foreach(get_categories() as $cat) : ?>
<li>
<a v-on:click="get(<?php echo $cat->term_id; ?>)" href="#">
<?php echo esc_html($cat->name); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<tbody>
<tr v-for="item in items">
<td>{{item.post_title}}</td>
<td>{{item.post_content}}</td>
</tr>
</tbody>

まとめ
● WordPress REST API は JSON 形式でコンテン
ツを取得できます。
● JSON 形式で取得したコンテンツは、リアクティブ
系の JavaScript で宣言的に HTML に展開すると
便利です。
● Vue.js は WordPress テーマなど CMS のテンプ
レートと組み合わせる場合に楽ができ、相性がいい
です。

ご清聴ありがとうございました。

WordPress REST API とリアクティブプログラミング

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie WordPress REST API とリアクティブプログラミング

Ähnlich wie WordPress REST API とリアクティブプログラミング (20)

WordPress REST API とリアクティブプログラミング