WPGraphQLとREST APIを使ってWordPressをヘッドレス化する方法

今日のウェブ開発では、フロントエンドとバックエンドのシステムを切り離すことが通例となり、「ヘッドレスCMS」が徐々に一般化しています。

従来のコンテンツ管理システム（CMS）には、フロントエンドと結合されていることで柔軟性やスケーラビリティが制限されるなど、多くの課題があります。しかし、最新のヘッドレスCMSでは、あらゆるフレームワークで構築されたフロントエンドをバックエンドから切り離すことができます。

ヘッドレスCMSとは

ヘッドレスCMSは、サイトのバックエンドのみを管理するコンテンツ管理システムです。従来のCMSとは異なり、コンテンツがフロントエンドにどのように表示されるかを指示することはありません。その代わりに、開発者がコンテンツを取得し、あらゆるデバイスやプラットフォームに配信するのにAPI（アプリケーションプログラミングインターフェース）を利用します。

現在、数え切れないほどのヘッドレスCMSプラットフォームがありますが、すでにWordPressに慣れ親しんでいる方にとっては、わざわざコンテンツを移行するのは億劫に感じるかもしれません。そんなときは、「ヘッドレスWordPress」という選択肢があります。

ヘッドレスWordPress

WordPressは、使いやすさとコンテンツ作成・管理の柔軟性で知られる人気CMS。従来のWordPressはヘッドレスではなく、バックエンド（コンテンツ管理）とフロントエンド（見え方の指示）が一緒になった従来のCMSです。

最近では、REST APIを使用してWordPressをヘッドレス化する開発者が増えています。この場合でも、WordPressはコンテンツを作成、管理、保存するCMSとして機能することに変わりはありませんが、WordPressのテンプレートやテーマを通じてフロントエンドやサイトを直接レンダリングする代わりに、フロントエンドの表示がバックエンドから切り離されます。

この方法により、使い慣れたWordPressのコンテンツ管理機能を活用しながら、異なる技術やフレームワークを使ったアプリケーションの構築が可能に。デフォルトの構成ではないものの、WordPressをヘッドレスCMSとして機能させることができます。

以下、ヘッドレスWordPressからフロントエンドフレームワークにデータを取得する方法をご紹介します。これには、WPGraphQLまたはREST APIを使った２種類の方法があります。

REST APIを使用してWordPressをヘッドレス化する

REST APIは、JSON形式でデータを取得できる仕組みで、WordPress開発の基本です。WordPress 4.7以降は、WordPressに組み込まれているため、プラグインは不要です。

サイトのコンテンツへのデータアクセスを可能にし、同じ認証制限が実装されています。サイト上で公開されているコンテンツは、通常REST API経由でアクセス可能ですが、非公開コンテンツ、パスワードで保護されたコンテンツ、内部ユーザー、カスタム投稿タイプ、メタデータなどは、認証が必要な場合、または特別に設定した場合にのみアクセスできます。

WordPressのデータをJSON形式で取得するには、WordPressサイトのURLに/wp-jsonを追加します。

http://yoursite.com.com/wp-json

http://yoursite.com/wp-jsonへのアクセス時に、JSON APIがデフォルトで有効になっていない場合は、WordPressの「設定」＞「パーマリンク設定」を開き、「投稿名」または「基本」以外のものを選択して有効にしてください。

投稿、固定ページ、コメント、メディアなどのエンドポイントを提供する、ローカルおよび公開済みのWordPressサイトで動作します。

http://yoursite.com/wp-json/wp/v2/posts
http://yoursite.com/wp-json/wp/v2/comments
http://yoursite.com/wp-json/wp/v2/media

REST APIでできるその他の操作はこちらでご紹介しています。

WPGraphQLを使用してWordPressをヘッドレス化する

2012年、Facebook（現Meta）がAPI上でのデータ取得を可能にするGraphQLを発表し、革命を起こしました。その宣言的な性質と選択的なデータ取得は、従来のREST APIに代わる優れた代替手段となりました。

その後2015年、Jason Bahl氏がGraphQLの柔軟性とWordPressのコンテンツ機能を組み合わせたソリューションの需要を受け、WordPress開発者向けにWPGraphQLをリリース。

WPGraphQLはGraphQLベースのプラグインで、データクエリに対してより効率的で調整されたアプローチを提供する画期的なソリューションです。単一のエンドポイントを提示し、正確なデータ検索を可能にし、REST APIの主な課題であるオーバーフェッチ（過剰取得）の問題を軽減します。

WPGraphQLの使用方法

WPGraphQLを使用するには、以下の手順に従ってください。

1. WPGraphQLのインストール─まずは、WordPressサイトにWPGraphQLプラグインをインストールします。WordPressの管理画面から検索してインストールするか、WordPressの公式プラグインリポジトリからダウンロードしてください。

   

2. GraphQL Playgroundを使ってみる─インストールすると、WPGraphQL組み込みの「GraphQL Playground」が使用できるようになります。WordPress管理画面に出現する「GraphQL」からアクセス可能です。

   

   GraphQL Playgroundでは、スキーマの探索、クエリの実行、ミューテーションのテストをインタラクティブに実行することができます。

3. クエリの作成─GraphQLの性能を活用するため、特定のデータ要件に合わせてクエリを作成します。自己文書化されたGraphQLスキーマを使って、利用可能なデータと関係を理解しましょう。

   

React、Vue、その他のフレームワークで構築されたフロントエンドアプリケーションにWPGraphQLを統合し、単一のGraphQLエンドポイントを使ってデータを効率的に取得し、UIを動的に更新することができます。

WPGraphQLの主な機能

WPGraphQLには、効率的で正確なデータ取得に役立つさまざまな機能があります。

正確にデータを取得するための単一エンドポイント

WPGraphQLは、特定のデータを効率的に取得できるよう、/graphqlに代表される単一のエンドポイントを提供します。この特徴は、同じデータの収集に複数のエンドポイントを必要とするREST APIとは対照的です。

REST APIの場合、特定の投稿とそのコメントに関する詳細を取得したい場合には、異なるエンドポイントに複数のリクエストを送信しなければなりません。

投稿に関する情報を取得する場合

http://yoursite.com/wp-json/wp/v2/posts/123

投稿に関連するコメントを取得する場合

http://yoursite.com/wp-json/wp/v2/comments?post=123

これに対して、WPGraphQLでは、1つのクエリで同様の結果を得ることができます。

{
  post(id: "123") {
    title
    content
    comments {
      edges {
        node {
          content
        }
      }
    }
  }
}

上の例では、GraphQLクエリが単一のエンドポイントに送信されます。クエリは、タイトル、コンテンツ、関連するコメントを含む、ID「123」の投稿に関するデータの取得を指示するものです。WPGraphQLはこのクエリを処理し、要求した正確なデータを含むレスポンスを一括で返します。

効率的に検索するためのターゲットクエリ

GraphQLでは、要件に応じた特定のクエリを作成できるため、必要なデータのみを要求し、過剰取得を最小限に抑えます。

例えば、すべての投稿の詳細（タイトル、著者名、日付）を取得したい場合、REST APIではこのようなことは実行できません。これらの情報を取得するには、次のようなエンドポイントが必要になります。

http://yoursite.com/wp-json/wp/v2/posts

このエンドポイントは、コンテンツ、カテゴリ、関連データを含むすべての投稿のデータセット全体を取得します。WPGraphQLを使用すれば、必要な特定のデータのみを取得するクエリを作成できます。

{
  posts {
    title
    date
    author {
      name
    }
  }
}

上の例は投稿の詳細を取得するもので、タイトル、日付、著者名のみをリクエストしています。このように、WPGraphQLでは必要なフィールドのみを要求できるため、より効率的で軽量なレスポンスを得ることができます。

複数のルートリソース

WPGraphQLでは、1つのリクエストで複数のルートリソースを問い合わせることができるため、柔軟で合理的です。

{
  posts {
    edges {
      node {
        title
        content
      }
    }
  }

  pages {
    edges {
      node {
        title
        content
      }
    }
  }
}

ヘッドレスWordPressのための「ヘッド」選び

WordPressのヘッドレス化に際して、適切な「ヘッド」、つまりユーザーインターフェースを強化し、優れたユーザー体験を構築するフロントエンド技術を選ぶことになります。

この選択は、ウェブアプリケーションのパフォーマンス、スケーラビリティ、保守性に直接影響するため、非常に重要です。ヘッドレスWordPressと互換性があるフロントエンドフレームワークと技術は複数あり、それぞれに長所と欠点があります。

例えば、静的サイトジェネレーター（SSG）を使って、Kinstaの静的サイトホスティングに無料でデプロイすることができます。この方法では、ヘッド（フロントエンド）を無料でホストできるため、WordPress（バックエンド）用のホスティングのみ用意すればOKです。

また、ReactのようなJavaScriptライブラリを使用して優れたフロントエンドを構築し、バックエンドの処理はWordPressに任せるなど、より堅牢なアプローチも考えられます。

まとめ

WPGraphQLとREST APIは、どちらもヘッドレスWordPressからデータを取得し、フロントエンドのアプリケーションにシームレスに統合する画期的な手段を提供してくれます。プロジェクト独自の要件と好みの取得方法に応じて、どちらかお好きな方を使用してみてください。

REST APIを選ぶと、WordPressに組み込まれたソリューションを使って、JSON形式のデータを簡単に取得できます。WPGraphQLは、GraphQLの機能を活用し、より新しく効率的なアプローチを実現できます。

ヘッドレスCMSが人気を伸ばす現在、ワークフローとプロジェクトの目標に適したツールを選択して、WordPressとお気に入りのフロントエンドフレームワークをシームレスかつ合理的に統合することができます。

Kinstaでは、WordPress（バックエンド）の構築と管理にぴったりなWordPress専用マネージドホスティングを提供しています。エッジキャッシュ、サイトのバックアップ、無料で使用できるCloudflare SSL証明書、Kinsta CDNなど、さまざまな機能が付帯します。

また、フロントエンドは、Kinstaのアプリケーションホスティング、またはSSG向けの静的サイトホスティングでデプロイすることができます。フロントエンドとバックエンドの両方をKinstaでホストすれば、1つのコントロールパネルから一元管理も可能です。

Joel Olawanle Kinsta

Kinstaでテクニカルエディターとして働くフロントエンド開発者。オープンソースをこよなく愛する講師でもあり、JavaScriptとそのフレームワークを中心に200件以上の技術記事を執筆している。

• ウェブサイト
• LinkedIn
• Twitter
• YouTube