wordpress javascript nodejs 投稿日:2017/09/05

WordpressのビューにJavascriptテンプレートエンジンを使いたい!


Wordpressに実装されたREST API。流行りのJavascriptテンプレートエンジンを使ってphp製のビューを置き換えるためのアプローチは?またメリットはあるのか?少し考えてみたいと思います。




注:この記事は単なる思考実験です。参考になるようなコードの類は含まれていません。

モチベーション

なんかネット上でみんなReactとかVueとかRiotとか言っててカッコイイから!!!

のるしかない。このビッグウェーブに。

Javascriptテンプレートエンジンとは?

HTMLを書くのではなく、JavascriptでDOMを作ってJavascriptで描画するJavascriptのライブラリのこと。

何が嬉しいかというと、画面内で起こるあらゆる操作や状態の変化に対するDOM管理に秩序を持たせられる。

ピンと来ない方は、jQueryとかでDOMのステート管理、イベント管理を頑張ったことが無いのかもしれません。

なぜWordpressのビューに使いたいの?

WordpressにREST APIという機能が追加されたから!

APIの仕様に沿って特定のプロトコルで特定のエンドポイントを叩くと、取得したり、追加したり、削除したりできます。

つまりWordpressはWEBサイトの枠を超えて、アプリケーションプラットフォームとして利用ができるようになったという革命ですが、今回はビューに焦点を絞っていますので、単純にphpの代わりにAPIを叩いてjsテンプレートでサイトを表示したい!という趣旨になります。

問題点

従来通り、LAMP構成にWordpressを乗せて、ビューをJSテンプレートにしたとしましょう。
すると以下の問題点が浮上致します。

  • (クライアントサイドで全て描画するので)遅い
  • (表面上、HTMLが空なので)SEOが効かない(可能性が高い)

\致命的/

※Googleはある程度jsを解釈してくれます。しかしある程度。

問題点を解消するために

以下に取り組む必要があります。

  • 描画は絶対に何が何でもサーバサイドで行う

上記を解決するアプローチは?

PHPを使う

\本末転倒/

nodejsを使う

\なにそれオシャレ/

node.jsサーバはサーバサイドでjsを実行できるので、その出力結果のHTMLをクライアントに返せるのです!これで速度とSEOの問題は解決です!

ではnodejsサーバでWordpressを動かしましょう!

まずはWordpressの動作環境を確認。

PHP バージョン 5.6 以上
MySQL バージョン 5.6 以上

ふむふむ。

ではnodejsサーバにPHPをインストールするのかな?

PHPの実行環境

Apache  ←サーバ
or
Nginx   ←サーバ

あれ?

nodejs  ←サーバ(!?)

共存できませーん!

結論から言うと、nodejsサーバにWordpressをインストールすることはできません!ドンッ!

じゃあどうするか

nodejsの公開サーバと、WordpressのAPIサーバを別に立てる

↑流行りのWEBアプリ構成みたいでカッコイイけど、サーバ2つとか難しいよ~><

どうしよう

「nodejs wordpress」←ぐぐる

「新しいWordPress「Calypso」のインストール手順と動作」

なにっ?新しいWordpress?

「Node.jsでフルリプレイスされた新しいWordPressのCalypsoをインストールして動作させる所まで試したので記事にします。所要1時間ぐらいです。」

おおっ!きたこれ!

しかし・・・

「API経由でWordPress.comから情報が取得できて正常に動作しているのが分かります」

ドッギャーン! 結局Wordpress.comのAPI使ってるだけかい!

まとめ

  • 普通のサイトでWordpressのビューをjsテンプレート化するメリットは無し!
  • node.js用の新しいWordpress「Calypso」は、Wordpress.comへのただのブリッジ!

ただし、Calypsoはまだ赤ちゃん。今後化けるかも?

見つけたもの

KeystoneJS

WordpressみたいなnodejsのCMS。ビューはReact。

すげー…
夢が詰まっている…
みんなこういうの作れるの?ついていけない…

comments powered by Disqus