WordPress API + Reactで高速&インタラクティブなウェブ・サイトを構築する

11/9/2017

Headless CMSとはなにか?なぜ生まれたのか?

Reactとライバル達の登場で、ウェブ・フロントエンドが盛り上がっている今日このごろ。一方サーバーサイドでは、DBアクセスなどのモデルと、HTMLをレンダリングするビューのレイヤーを切り離し、APIを通じて結合を行うHeadless CMSが話題になっているようです。

Headless CMSは、いわばビューのないCMS。コンテンツやコンテンツに組み込む画像などのメディアを編集・管理する機能を提供する一方で、ユーザーにHTMLをレンダリングするウェブサイトとしての機能は切り離して、レンダリングはクライアントに任せる仕組みになっています。

従来はCMSとレンダラーは不可分な要素として一つのプロダクト(WordPress, Drupal)で動いていましたが、JavaScriptによるフロントエンドへの役割シフトや、Android/iOSで動くネイティブ・アプリケーションなどクライアントの多様化が進む現在のメディア状況に最適化が進んだと言えるでしょう(参考: 手を動かして学ぶCMSの新しい潮流「ヘッドレス」とは何か?)。

ReactでWordPressレンダラーを作ってみた

さて、そんな流れをいち早く実践してみるべく、ReactによるSingle Page ApplicationとCMSを組み合わせたインプリを行ってみました。これから説明するのは、いま皆さんが読んでいるこのサイトを稼働しているシステムです。バックエンドにWordPress、フロントエンドをReact(Next.js)で実装し、WordPress APIを通じてデータのやり取りをしています。では早速、実装の詳細を見ていきましょう。

システム構成

システム構成は上記の通りです。WordPressは管理画面以外はHTMLのレンダリングは行わないように、空白のWordPressテーマを設定してあります。

Next.jsでサーバサイドレンダリング

レンダラーは、Next.jsをベースにしたReactアプリケーションをサーバサイドで稼働しています。Next.jsは、React.jsをベースにサーバー・レンダリングをサポートしたフレームワークです。Node.jsを使用してHTMLをレンダリングし、配信先のブラウザで同じコードを使ってSingle Page Appを起動する、いわゆるIsomorphic(あるいはUniversal) の構成になっています。

ユーザーがサイトをブラウザで開くと、HTMLレンダラーはWordPress APIを通じて記事のデータをゲットし、Reactで記述されたビューを使ってHTMLをレンダリングします。ユーザーのブラウザに配信された記事コンテンツは、サーバでHTMLをレンダリングしたものと同じReactアプリケーションを起動し、ユーザーのインタラクションにあわせてコンテンツを動的に書き換えます。

レンダラーをサーバサイドでも稼働することで、確実なSEO対策(GoogleのインデックスbotはReactを含むJavaScriptを実行しますが、レンダリング結果は保障されていません)、様々なブラウザでのページ表示を可能にしています。

管理画面はWordPress

ユーザーがブラウズするサイトは、Next.jsによるHTMLレンダラーが配信しますが、管理画面は従来通りWordPressのものを使います。画像のアップロードや下書き保存など、かゆいところに手がとどくCMSを堪能できます。既にWordPressでコンテンツを持っている場合もそのまま新しいサイトで配信できますね。

CMSとビューを切り離すと何が嬉しいのか?

高速なウェブ体験

この構成の特徴は、2ページ目以降のレンダリングをブラウザ上のJavaScriptアプリケーションが行うことです。

ユーザーがページ中のリンクをクリックすると、ブラウザ上のアプリケーションがWordPress APIに直接リクエストを送り、新しいページのコンテンツ・データを取得。そのデータを使ってページを書き換えます。

API経由で送られるデータはページまるごとHTMLで送信するよりもサイズが小さく、ダウンロードの時間を短くすませることができます。また、ReactのVirtual DOMのお陰で、サイト内のコンテンツのみを効率よく書き換えるため、クリックから次のページへの遷移が一瞬で終わるようになります。

この記事を読み終わったら、是非ページの下にある関連記事のリンクを辿ってみて下さい。次々とページが書き換わる快適さを実感できると思います。

そもそもフロントエンドの比重は増してきている

従来のCMSは、バックエンドとフロントエンドが同じシステムで提供されていました。このため、HTMLのレンダリングもバックエンドの言語が担うことがほとんどでした。しかし、JavaScriptを使ってサイト内の表示をフロントエンド側のコードでダイナミックに変化させることが一般化し、最近ではフロントエンド部分がコードの半分以上を占めることも増えてきています。

バックエンドでレンダリングしたHTMLを、JavaScriptで少しだけ変化させるという手法から、JavaScriptで全てをレンダリングしてしまうやり方に変化しているのです。

バックエンドとフロントエンドの開発手法を分離できる

こうした、異なるベクトルでの進化に対して、パーツを分けることで最適化を極端に進めることができます。

最適化とは、それぞれに適した言語で開発を行うことです。バックエンドとフロントエンドを切り離すことで、サーバはサーバに適した言語で、フロントエンド(あるいはクライアント)はそれに適した言語でという切り分けが綺麗になります。

資産の再利用

バックエンドとフロントエンドが切り離されていることのメリットの一つは、既存のリソースを再利用しやすいことです。

例えばWordPressをベースに開発されたサイトが既にある場合、フロントエンドに重点を置くためにNode.jsなどにスイッチするとなると(この場合はユニバーサルJavaScriptを想定しています)大規模な改修を行うことになります。しかし、バックエンドはWordPressのままに、APIを通じて新しいフロントエンドと接続することで、システム全てをリプレイスする必要がなくなります。

あるいは、Reactをベースにウェブ・アプリケーションを開発した場合に、データを管理するバックエンドも開発する必要がありますが、WordPressなどの枯れたCMSを管理画面にすることで、開発のコストを圧縮することができます。

筆者は、これまでに関わったプロジェクトで3つのバックエンドを作ってきましたが、どれも似たような内容であるにもかかわらず、0からの作り直しを行ったため、いつも苦労してきました。バックエンドは非常に細かい要件が多く、なし崩し的に開発を始めると思った以上のリソースを必要とします。

せっかくフロントの開発がスピードアップしているのだから、APIを通じて既に存在する「枯れた」バックエンドを再利用して、カットした時間はサービスそのものを改善する時間に使いたいのです。

終わりに

Headless、あるいはDetachedなCMSが注目を集めるのは、ここに書いてきたような様々な外的・内的な理由が集約されているからだと思います。あるいは単純に、バックエンドを再利用できることで、フロントエンドの「楽しい」作業により多くの時間を使えるからかもしれません。また、フロントエンドから切り離せることで、バックエンドの性能向上などによりフォーカスを当てることができるかもしれません。

WordPressレンダラーはオープンソース化を予定

このサイトで活用しているWordPressレンダラーは、機能を整備した後により汎用的に使えるようにコードを整えてオープンソースのプロダクトとして公開したいと思っています。この記事で紹介した「Headless」構成に興味がある方、このレンダラーで自分のサイトを構築したい方は、筆者のTwitterをフォローするなどしてお待ち下さい。

お仕事お待ちしてます

また、WordPressを活用してダイナミックなサイトを構築するお仕事の依頼もお受けしています。その際は、このサイトの「仕事の問い合わせ」ボタンからご連絡ください。お待ちしています!

参考リンク

“『Monument Valley』などでも知られるウェブ&アプリ制作プロダクションustwoが、自社サイトをWordPress + React.jsで構築した事例をオープンソースにしていて、このアプローチに興味を持ちました。しばらく追いかけてみたところ他にも事例があったのでまとめてみました。”
ーーー WordPress + React.jsでのウェブサイト構築事例リサーチ – 海底2万トン by スタジオ・ピグボ

“こうしたジレンマを回避するには “ヘッドレス CMS” が役に立ちます。ヘッドレス CMS を使用すれば、シンプルな API 呼び出しを使ってコンテンツを取り出し、既存のスタイル資産を利用して、そのコンテンツをウェブサイトに簡単に統合できます。”
ーーー Google Cloud Platform Japan 公式ブログ: チュートリアル公開 : App Engine と ButterCMS によるウェブサイトの構築

“A List of Content Management Systems for JAMstack Sites”
ーーー headlessCMS | Top Content Management Systems for JAMstack Sites

シェアする