React.jsを使ってヘッドレスWordPressサイトを構築する方法

WordPressは、最も人気のあるコンテンツ管理システム（CMS）の1つで、インターネット全体の41%に相当する8億1千万人が利用しています。シンプルでユーザーフレンドリー、多様なカスタマイズオプション、プラグインやその他のリソースの強力なエコシステムを誇り、ウェブサイトを素早く構築したい人にとって優れた選択肢となっています。

WordPressを最大限に活用する方法のひとつが、ヘッドレス化です。

ヘッドレスCMSは、ヘッドレスシステムとも呼ばれ、コンテンツの管理に使用されるバックエンドCMSの一種です。ヘッドレスCMSのAPIを呼び出すだけで、あらゆるシステムやウェブサイトにコンテンツを統合することができます。

ただし、この手法を選択する際には、フロントエンドを別途管理する必要があります。そこで登場するのがAPIです。

APIは、2つ以上のアプリケーションによるデータの交換を可能にします。この例で言えば、APIはCMSからフロントエンドのウェブサイトにデータを転送するために使用され、高い柔軟性と高性能なパフォーマンスを実現します。

この記事では、ヘッドレスCMSの基本、ヘッドレスCMS構築のメリット、そしてWordPressを使いヘッドレスCMSをセットアップする方法をご紹介します。

ヘッドレスWordPressとは

ヘッドレスWordPressサイトとは、WordPressをCMS（コンテンツ管理システム）として主に使用し、フロントエンドにReactやVueなどの他のフロントエンド技術を使用するタイプのサイトを指します。

ウェブサイトのコンテンツを表示するために、JavaScriptのライブラリやフレームワークが使われています。そのため、ヘッドレスWordPressでは、フロントエンドとバックエンドが分離しており、通信にはAPIが使用されます。

もっと簡単に言うと、ヘッドレスアーキテクチャとは、CMSはコンテンツの保存と管理にのみ使用され、ウェブサイトのフロントエンドは問わない、ということになります。

一方、フロントエンドの主な仕事は、コンテンツを表示することです。フロントエンドは、コンテンツを配信できる限り、コンテンツがどこに保存・管理されているかを気にすることはありません。

フロントエンドのリクエストはReactなどの高速な技術で処理し、バックエンドのみをWordPressで管理するため、ヘッドレスWordPressでは、パフォーマンスの向上が期待できます。フロントエンドとバックエンドを分離することで、コンポーネントを独立してスケールさせることが可能になります。

ヘッドレスWordPressの長所と短所

どのような開発手法にも言えることですが、ヘッドレスWordPressソリューションを採用することには、長所と短所の両方があります。決断を下す前に、その両方を理解しておくことが重要です。

ヘッドレスWordPressの長所

ヘッドレスWordPressの導入による主な利点は以下の通りです。

• 柔軟性：ヘッドレスWordPressでは、開発者は従来のWordPressテーマシステムに制限されることなく、カスタムフロントエンド体験を作成することができます。つまり、特定のニーズに合わせた独自のユーザーインターフェースや操作性を実現することが可能です。
• パフォーマンス：WordPressサイトのフロントエンドとバックエンドを分離すると、サーバーがリクエストごとにHTMLをレンダリングするのではなく、APIを介してデータを配信するだけなので、ウェブサイトの読み込みが速くなり、パフォーマンスが向上します。
• セキュリティ：フロントエンドとバックエンドを分離することで、WordPressのコードベースとデータベースへのアクセスを制限し、セキュリティの層を追加することができます。

ヘッドレスWordPressの短所

ヘッドレスWordPressの短所は以下の通りです。

• テーマがない：ヘッドレスWordPressは、構築済みのテーマに依存しないため、自分でテーマを作成する必要があります。これには時間がかかり、追加のリソースが必要となる可能性があります。
• コスト：ヘッドレスWordPressサイトは、従来のWordPressサイトと比較して、セットアップとメンテナンスに多くの技術的専門知識とリソースを必要とするため、開発コストが高くなる場合があります。
• プラグインの制限： WordPressプラグインは、WordPressテーマに依存し機能するため、ヘッドレスWordPressで動作しない場合があります。

WordPress REST APIとは

WordPress REST APIは、バックエンドとフロントエンドの間のインターフェースとして使用されます。APIはサイトのデータへのアクセス権を管理するため、APIを使用すると、データを簡単に送信したり取得したりすることができます。また、許可されたユーザーだけが操作できるように制限可能です。

APIはJSONを含む幅広いデータ形式をサポートするため、システムとのやり取りが容易になります。

WordPress REST APIは、サイト独自の機能の作成や他のサービスとの統合に加え、データの作成、更新、削除を行うことができる、開発者にとって便利な機能です。さらに、追加の認証方法を統合するなど、APIの機能を拡張するプラグインも用意されています。

Reactとは

Reactは、ユーザーインターフェース構築に特化したJavaScriptライブラリです。オープンソースかつ、再利用可能なコンポーネントをベースとしています。宣言的な構文を使用してユーザーインターフェース（UI）コンポーネントを構築できます。

Reactでは、インタラクティブなUIを作成可能です。データが変更されたときにコンポーネントがレンダリングされます。複雑かつ再利用可能なコンポーネントを作成し、状態を効率的に管理し、ユーザーインターフェースをリアルタイムで簡単に更新したい開発者の間で高い人気を誇るライブラリです。

Reactの開発者コミュニティにより、その機能を強化するツール、ライブラリ、リソースが公開されています。多くの組織や企業が、複雑でダイナミック、かつ高速なウェブアプリケーションを構築する技術としてReactを採用しています。

Reactが選ばれている理由

Reactは、複雑で動的なウェブアプリケーションの開発に有用です。

これを利用する主な利点をいくつかご紹介します。

• 宣言的な構文：Reactは、UIコンポーネントの構築に宣言的なアプローチを採用しているため、再利用可能かつ高効率なコンポーネントを簡単に作成することができます。
• 大規模なコミュニティとエコシステム：Reactには大規模で活発な開発者コミュニティがあり、機能を強化するさまざまなツールやライブラリが作成されています。
• 仮想DOM：Reactは、仮想DOMを使用してリアルタイムにUIを更新します。つまり、状態が変化したときに、ページ全体を再レンダリングするのではなく、変更が必要なコンポーネントのみが更新されます。
• 再利用性：React.jsのコンポーネントはアプリケーション間で再利用可能です。開発時間と労力の大幅な削減につながります。

ReactでヘッドレスWordPressサイトを作成する方法

それではいよいよ、Reactを使ってヘッドレスWordPressサイトを作成し、デプロイする方法について、手を動かして学んでいきましょう。

詳しくは以下の通りです。

前提条件

説明に進む前に、以下の条件をご確認ください。

• Reactについての知識があること
• Node.js v14以上がインストールされていること

ステップ1. WordPressサイトをセットアップする

Reactアプリケーションのデータソースとして使用するため、WordPressのウェブサイトをセットアップすることから始めましょう。すでにWordPressのウェブサイトをセットアップしている場合は、この説明をスキップしてかまいません。まだの場合は、このまま読み進めてください。

このチュートリアルでは、WordPressサイトの作成、開発、デプロイのために、高速かつ信頼性の高いローカル開発環境であるDevKinstaを使用することにします。公式サイトからダウンロードし、システムにインストールするだけで、完全に無料で使用することができます。

インストールが完了したら、DevKinstaのダッシュボードを開き「新規WordPressサイト」をクリックして、WordPressサイトを作成します。

このような必要な入力を記入し、「サイト作成」ボタンを押して続行します。

数分かかりますが、サイトが作成されたら、それぞれ「サイトを開く」または「WP管理画面」をクリックして、サイトと管理パネルにアクセスすることができます。

次に、JSON APIを有効にするために、サイトのパーマリンクを更新する必要があります。

WordPress管理画面で、「設定」へと移動し「パーマリンク」をクリックします。「投稿名」を選択し、「変更を保存」をクリックします。

また、Postmanなどのツールを使って、WordPress REST APIのテストやリクエストの送信を簡単に行うことができます。

ステップ2. Reactアプリケーションをセットアップする

WordPressのウェブサイトがセットアップできたので、フロントエンドの作業を開始しましょう。前述の通り、このチュートリアルでは、アプリケーションのフロントエンドにReactを使用します。

まずは、ターミナルで以下のコードを実行し、Reactアプリケーションを作成します。

npm create vite@latest my-blog-app 
cd my-blog-app 
npm install

上記のコマンドにより、Reactアプリケーションを作成し、必要な依存関係をインストールすることができます。

また、HTTPリクエストを行うためのJavaScriptライブラリであるAxiosをインストールします。以下のコマンドを実行してインストール可能です。

npm install axios

開発サーバーを起動するために、ターミナルでnpm run devを実行します。すると、http://127.0.0.1:5173でアプリの初期化が行われます。

次に、お好みのコードエディタでプロジェクトを開き、「assets」フォルダ、「index.css」、「app.css」など、必要のないファイルを削除します。

また、「main.jsx」と「App.jsx」の中のコードを以下に置き換えてください。

// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

// App.jsx

import React from 'react'

export default function App() {
  return (
    <App />
  )
}

ステップ3. WordPressから投稿を取得する

いよいよWordPressサイトから記事を取得します。

「App.jsx」の中に、以下の状態を追加し、React.Jsxから<code>useState</code>をインポートします。

const [posts, setPosts] = useState([])

useStateはReactの組み込みフックで、コンポーネントに状態を追加するために使用され、状態はデータまたはプロパティを参照します。

postsは状態からデータを取得するために使用され、setPostsは新しいデータをpostに追加します。また、デフォルトでstateに空の配列を渡しています。

次に、WordPress REST APIから投稿を取得するために、stateの後に以下のコードを追加します。

const fetchPosts = () => {
    // Using axios to fetch the posts
    axios
      .get("http://headless-wordpress-website.local/wp-json/wp/v2/posts")
      .then((res) => {
        // Saving the data to state
        setPosts(res.data);
      });
  }


  // Calling the function on page load
  useEffect(() => {
    fetchPosts()
  }, [])

上記のコードが、ページ読み込み時にfetchPosts()関数を実行します。fetchPosts()関数の内部では、Axiosを使用してWordPress APIにGETリクエストを送信して投稿を取得し、先に宣言したstateに保存しています。

ステップ4. ブログコンポーネントの作成

ルートディレクトリの中に、「components」という名前の新しいフォルダを作成し、その中に「blog.jsx」と「blog.css」という2つのファイルを作成します。

まず、「blog.jsx」に次のコードを追加します。

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./blog.css";

export default function Blog({ post }) {
  const [featuredImage, setFeaturedimage] = useState();

  const getImage = () => {
    axios
     .get(post?._links["wp:featuredmedia"][0]?.href)
     .then((response) => {
      setFeaturedimage(response.data.source_url);
    });
  };

  useEffect(() => {
    getImage();
  }, []);

  return (
    <div class="container">
      <div class="blog-container">
        <p className="blog-date">
          {new Date(Date.now()).toLocaleDateString("en-US", {
            day: "numeric",
            month: "long",
            year: "numeric",
          })}
        </p>
        <h2 className="blog-title">{post.title.rendered}</h2>
        <p
          className="blog-excerpt"
          dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
        />
        <img src={featuredImage} class="mask" />
      </div>
    </div>
  );
}

上記のコードでは、WordPress APIからブログ記事に関する情報を含むpostsプロパティを受け取るカードコンポーネントを作成しました。

getImage()関数では、Axiosを使用してアイキャッチ画像のURLを取得し、その情報をstateに保存しています。

そして、コンポーネントがマウントされたらgetImage()関数を呼び出すためのuseEffectフックを追加しています。また、投稿データ、タイトル、抜粋、画像をレンダリングするreturn文も追加しました。

次に「blog.css」ファイルに以下のスタイルを追加します。

@import url("https://fonts.googleapis.com/css?family=Poppins");

.blog-container {
  width: 400px;
  height: 322px;
  background: white;
  border-radius: 10px;
  box-shadow: 0px 20px 50px #d9dbdf;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

img {
  width: 400px;
  height: 210px;
  object-fit: cover;
  overflow: hidden;
  z-index: 999;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.blog-title {
  margin: auto;
  text-align: left;
  padding-left: 22px;
  font-family: "Poppins";
  font-size: 22px;
}

.blog-date {
  text-align: justify;
  padding-left: 22px;
  padding-right: 22px;
  font-family: "Poppins";
  font-size: 12px;
  color: #c8c8c8;
  line-height: 18px;
  padding-top: 10px;
}

.blog-excerpt {
  text-align: justify;
  padding-left: 22px;
  padding-right: 22px;
  font-family: "Poppins";
  font-size: 12px;
  color: #8a8a8a;
  line-height: 18px;
  margin-bottom: 13px;
}

次に、App.jsxファイルのreturn文に以下のコードを追加して、ブログコンポーネントをレンダリングします。

<div>
	{posts.map((item) => (
		<Blog post={item} />
	))}
</div>;

すると、App.jsxは以下のようになります。

import React, { useEffect, useState } from 'react'
import axios from "axios"
import Blog from './components/Blog';

export default function App() {
  const [posts, setPosts] = useState([]);

  const fetchPosts = () => {
    axios
      .get("http://my-awesome-website.local/wp-json/wp/v2/posts")
      .then((res) => {
        setPosts(res.data);
      });
  }

  useEffect(() => {
    fetchPosts()
  }, [])

  return (
    <div>
      {posts.map((item) => (
        <Blog
          post={item}
        />
      ))}
    </div>
  )
}

ファイルを保存して、ブラウザのタブを更新してください。これで、ブログの記事がページ上にレンダリングされます。

まとめ

ヘッドレスWordPressは、スケーラブルなアーキテクチャで高速に動作するウェブサイトを作成できる、便利な手法です。ReactとWordPress REST APIを使用することで、WordPressをコンテンツ管理システムとして、ダイナミックかつインタラクティブなウェブサイトを簡単に作成できます。

さらにスピードを考慮し、WordPressサイトをどこでホストするかという点も重要です。Kinstaは、プレミアムティアネットワーク上の最高級Google C2マシンを採用。データ損失や悪意のある攻撃からサイトを保護するCloudflare統合により、光速のWordPressホスティング体験をお届けしています。

ReactでヘッドレスWordPressサイトを構築したことはありますか？または構築予定ですか？以下のコメント欄でお知らせください。