WordPressで理解する「REST API」の基礎と活用例

APIとは、開発者がプログラムによってサービスやソフトウェアのシステムにアクセスするためのシステムです。APIはかなり広義です。例えば、ブラウザのコンソールに値を表示するconsole.log関数は、JavaScriptのconsoleオブジェクトでありJavaScriptのAPIの一部です。つまるところプログラミングはあらゆるAPIの組み合わせる作業とも言えます。

一方、フロント開発において「APIを叩く」と言われた時は、「"REST API"にアクセスしてシステムを利用する」ことになります。

この記事では、REST APIとはどういうものなのか、何ができるのかについて詳しく解説します。

REST APIとは

REST APIとは、WEB APIの一種でHTTPリクエスト（ブラウザにURLを入力するなど）し、そのリクエストによってサーバーが処理を行い、処理の結果を応答するAPIのことを言います。

簡単な例を挙げます。（仮想のAPI例です。）

このようにクライアントが求めた情報に応じてサーバーが返答するAPIがREST APIです。

HTTPリクエストは、POSTリクエスト・GETリクエスト・PUTリクエスト・DELETEリクエストなどがありますが、どのリクエストを許容しているかはそのAPIのプログラムによって決まっています。使用したいAPIのリファレンスに応じてリクエストの種類を判断する必要があります。

WordPressに用意されているREST API

WordPressでは初期状態で多くのAPIが用意されています。投稿の情報を取得できるAPIや、認証情報（管理者であることを確認する情報）を利用することでアクセスできる投稿を更新・削除できるAPIなども用意されています。

それでは早速、簡単にアクセスできるAPIをみてみましょう。「https://blog.zaty.jp/wp-json/wp/v2/posts」このURLにアクセスしてみてください。ChromeやSafariの場合は大量の文字列が、Firefoxの場合はJSON形式が折り畳まれた画面が表示されます。

このAPIは、ブログの記事情報を10項目、新着順に応答するAPIです。投稿のIDや投稿の日時、タイトル、記事の内容などあらゆる情報が記載されています。

GETリクエストのAPIはFirefoxが最も見やすいので、REST APIを使った開発をする際にはFirefoxで確認することをおすすめします。

それではGETリクエストでper_post=20というパラメータを追記してアクセスしてみましょう。「https://blog.zaty.jp/wp-json/wp/v2/posts?per_page=20」先ほどの倍の項目表示されていることがわかります。per_pageパラメータは取得する項目数を決められるパラメータです。

このようにパラメータを変更することで、取得できる情報を操作することができます。記事一覧を取得するAPIが他にどのようなパラメータでどのような処理がされるのか詳しく知りたい方は公式リファレンスをご覧ください。

WordPressのREST APIで何ができるのか

さて、記事一覧の情報を取得するAPIがわかりました。それではこのREST APIはどのように活用できるのでしょうか。

外部サイトからAPIを叩く

WordPressはPHPによってデータベースにアクセスし、結果を表示しています。データベースにアクセスするためにはデータベースの認証情報が必要なのですが、REST APIを利用することで公開されている情報は認証情報なしでアクセスすることができます。

つまり、外部サイトからREST APIにアクセスすることで情報を取得することができることになります。

例えば、この私たちのWEB制作についてWEBサイト（https://web-production.zaty.jp）をご覧いただくと「ZATYのBLOG」というコンテンツが下部にあり、このブログのリンクが表示されています。WordPressは"blog.zaty.jp"のディレクトリにインストールされており、"webproduction.zaty.jp"ではインストールされていないのでWordPress関数（WP_Queryなど）は使用できません。

このコンテンツはJavaScriptで、ブログのAPIを叩き（アクセスし）返ってきた情報をサイトに表示しているのです。

望まない外部サイトからAPIが叩かれないように設定することも可能です。

内部サイトでAPIを叩く

内部サイトではWordPressがインストールされているので、WordPress関数を使用すればデータベースにアクセスできるので一見意味のないように思うかもしれません。

ですが、APIの必要な情報だけ取得することができることは内部サイトでも有用です。

このブログの記事一覧ページをご覧ください。この記事一覧ページでは、投稿の絞り機能を実装しています。例えば、カテゴリー「プログラミング」で絞り込むと、ページ全体の読み込みをせずに記事の内容が変更されていることがわかります。ここではカテゴリーやタグ、表示順についての情報をパラメータとしてREST APIにJavaScriptで渡しコンテンツ部分だけを変更しています。

APIを利用することで、ページ読み込みをせず投稿情報のみを変更すること機能を実現することができます。無駄にスタイルシートやヘッダーフッター部分など、読み込みし直さずに情報を更新することによって、読み込み時間も軽減されユーザーエクスペリエンス（UX）の向上も図れます。

JavaScriptでAPIを叩く

それではJavaScriptで、どのようにREST APIを使用できるか確認します。

JavaScriptの非同期通信（Ajax）でAPIにアクセスします。fetch関数を利用することでとても簡単にREST APIからの情報を取得することができます。

fetch( 'https://blog.zaty.jp/wp-json/wp/v2/posts' )
  .then( response => response.json() )
  .then( data => {
    console.log( data );
  } );

fetch関数の第一引数にREST APIのURLを指定します。APIから返答がきてから一つ目のthenオブジェクトメソッドが起動します。一つ目のthenは返ってきたレスポンスを配列化してリターンしています。

二つ目のthenで配列化したデータをコンソールに表示しています。

行っていることは以下と同じです。

fetch( 'https://blog.zaty.jp/wp-json/wp/v2/posts' )
  .then( response => {
    return response.json();
  } )
  .then( data => { //ここのdataと上のresponse.json()は完全に同じです。
    console.log( data );
  } );

data変数に格納されているのはREST APIから取得した情報の配列なので、foreachなどを利用しコンテンツに表示することができます。

このようにAjaxを利用することで、REST APIに簡単にアクセスして情報を取得することができます。この例ではGETリクエストです。POST送信の場合はfetch関数の第二引数を利用する必要があります。POST送信について詳しくはこちらのブログ記事「JavaScriptのfetchでPHPにPOSTしよう」をご覧ください。

まとめ

今回は、WordPressで用意されているREST APIのシステムを確認しながらAPIの仕組みと活用例、使用方法を解説しました。

昨今REST APIはあらゆるWEBサービスに組み込まれています。有料REST APIのマップをカスタマイズできる「Google Maps API」や今話題のAIを利用できる「OpenAI API」などを利用することで、WEBサイトをより使いやすくすることもできます。

REST APIの仕組みを完全に理解してWEB開発を効率的に進めていきましょう。