WordPressのWeb APIを使う

ここで掲載するWeb APIは、HTTP通信で、JSON形式でデータのやり取りを行う仕組みです。

従来のWEBシステムは、画面でデータの入出力を行う度にデータベースの読み書きをするので、システムが重くなり、大規模なシステムを構築する際に、大きな壁になっていました。

特に、ユーザーがページを閲覧する度にページを更新するため、アクションの度に画面更新が発生して、閲覧者は操作の都度、画面更新を、待つことになります。

スマホ全盛時代に、このような反応が遅いサイトは見てもらえなくなり、離脱率が問題になっていました。

これを解決した１つの方法が「SPA（Single Page Application）」です。

SPAでは、基本的に、Web APIは、HTTP通信で、JSON形式でデータのやり取りを行う仕組みで、JavaScript系のVue.jsやReact.jsなどを使って、Node.jsなどでJSON形式のデータ（主にテキスト配列）でやり取りをしています。

従来のWebアプリケーションの構成

SPA の話をする前に、複数の画面から構成される Webアプリケーションの構成について解説します。

Webサーバーの代表的なものに Apache, NGINX(エンジンエックス) があります。

SPAの場合

まずはブラウザから Web サーバーに対して静的なリソースをリクエストします(図の黒い矢印)。
このときに返される JavaScript は Vue.jsやReact などのライブラリを使用して作られた SPA の本体部分になります。

初回アクセス時に必要なリソースの多くをダウンロードすることになるため、SPA では初回表示のロード時間が長くなりがちです。

WebAPI

JavaScript の読み込みが完了したら、以降のブラウザとWebサーバーとのやり取りは青い矢印の部分に移ります。

ユーザーからの操作などをトリガーに、ブラウザからWebサーバーに対してリクエストが送られます。

Webアプリケーションではこのリクエストに対してHTMLではなく JSON などのデータをレスポンスとして返します。このような Webアプリケーションのことを WebAPI と呼びます。

ブラウザはレスポンスを受け取ると JavaScript によってページの一部が更新されます。

このように SPA では画面全体ではなく必要な箇所のみを更新することでアプリケーションの機能を提供します。

フロントエンド/バックエンド

Webアプリケーションの開発において

• HTMLやCSS、JavaScript といったブラウザ上で動く部分を フロントエンド
• リクエストを受け取ってデータベースなどを操作してレスポンスを返す部分を バックエンド

というふうに呼びます。
それぞれの領域を専門で扱う人のことを フロントエンド エンジニア、バックエンド エンジニア と呼称することもあります。

一般的なWebアプリケーションでは HTML をレスポンスとして返すことから、バックエンドとフロントエンドは不可分なところがありました。

SPA ではレスポンス (JSON) をどのように表示するかはフロントエンドに任せ、バックエンドはデータの取得・加工を担当する、というふうに役割分担が明確になります。

Webサーバーの役割の分割

SPAの構成図において、黒い矢印の部分と青い矢印の部分は役割が異なります。

黒い矢印の部分は一般的なWebアプリケーションの構成でもあった、静的なリソースを返すWebサーバーです。

青い矢印の部分はSPAと頻繁にやり取りするWebAPIです。

これらは役割が異なるので、大規模なシステムであれば分けて構築します。

それぞれのサーバーが単一の限定された役割を担うように分割しておくと、スケールアウトしやすい柔軟なシステムとなります。

サーバーレス構成

役割を分割し、スケールアウトしやすくした構成の最たるものが サーバーレス と呼ばれるものです。

各サーバーの役割をクラウドサービスに置き換える事で、サーバーを無くしてしまう手法です。

大手クラウドサービスは負荷状況に応じて自動でスケールアウトしてくれるので、突発的にアクセスが集中するような場合に有効な構成です。

まとめ

JavaScript 系の Vue.jsやReact などのライブラリを使用して作られた SPA の仕組みをPHP言語の中に組み込むことで、PHP言語のシステムであっても、可能な限り画面遷移が少ないWebシステムを実現できるようになりました。Wordpressでも JavaScript 系の Vue.jsやReact などのライブラリを使用してWeb APIでJSON形式のデータの仕組みにすることで、画面遷移のほとんど無いWebシステムを実現することができます。

JSONに慣れよう

SPAに慣れるには、JSONに慣れる必要があります。

「配列」が苦手、更にJSONは、もっとダメと言う人が多いと思いますが、一度、簡単なサンプルで経験すれば、簡単な仕組みということが判ります。

壁を破って頑張りましょう。

そして、クリックする度に画面遷移する「古い世界」から脱皮しましょう。

関連記事:

Vue.js を使って WP REST API で取得した他サイトの投稿データを自サイトに表示する 管理画面を使わず、Vue.js と WP REST API を使って、Webページから直接記事データ等を更新する WP REST API でアドバンストカスタムフィールドの値を取得する WordPress製 売上管理システム （専用テーマ販売）の事例 functions.phpでカスタム投稿とカスタムタクソノミーを作成する方法 イベントカレンダーをつくる 一覧ページの記事の並び順を複数のカスタムフィールドの値で制御する 記事の表示順をカスタムフィールドの値で制御する 親ページがある投稿のIDのリストを取得する メモリエラーの解決 ページ遷移しない投稿一覧のページネーションを、jQueryで手軽に実装する ページネーションのある投稿一覧ページで、最新の投稿１件だけレイアウトを変える 固定ページにページネーション機能を持たせる トップページに設定した固定ページでページネーションする カスタムフィールドを含む記事レコードの一括インポート アドバンストカスタムフィールドの複数選択チェックボックスの値をCSVインポートする ウィジェットをショートコードにして任意の場所で表示する カテゴリページの投稿一覧の取得条件をカテゴリごとに変える 人気記事を取得・表示するプラグイン「WordPress Popular Posts」のカスタマイズ 言語設定が「英語」のブラウザからのアクセスの時、英語ページに強制的にリダイレクトさせる プラグインなしで多言語サイト（英語サイトなど）の作り方 【頻出】よく使う便利なテンプレートタグ一覧【WordPress入門】 ECサイト構築例（大規模EC） PHP CRUD アプリケーション PHP TODO アプリケーション 予約システム クラウドソーシング オンラインスクール WordPressカスタマイズ上級編その１（関数） PHP-AdminLTEインストール