WooCommerceは、ECサイトの構築に人気の高いWordPressプラグイン。従来のWordPressサイトにWooCommerceをインストールするだけでなく、ヘッドレスソリューションとしても使用することができます。

今回は、KinstaにデプロイしたReactアプリケーションと組み合わせて、ヘッドレスWooCommerceサイトを構築する方法をご紹介します。

ヘッドレスWooCommerceとは

ヘッドレスECサイトは、フロントエンドからバックエンド（ヘッド）が切り離されたECサイトを意味します。ヘッドレスアーキテクチャは、APIを通じて、ECソリューションのプレゼンテーション層（フロントエンド）とアプリケーション層（バックエンド）間でリクエストを受け渡します。

APIは仲介者間の相互作用を定義し、アプリケーション層の機能を妨げることなく、プレゼンテーション層を変更したり、複数のアプリケーション層に商品を更新、編集、追加することを可能にします。

ヘッドレスWooCommerceサイトの場合は、WooCommerce APIが仲介役となって、フロントエンドとバックエンド間の通信が行われます。上のような利点に加えて、柔軟でスケーラブルなフロントエンド開発も実現可能です。ReactやVueのような最新の技術スタックを使用して、魅力的で動的なユーザーインターフェースを構築しやすくなります。

さらに、変化し続ける顧客の要件や技術の進化に適応しながら、優れたECインフラストラクチャを維持することができます。バックエンドのWooCommerceプラットフォームの安定性と信頼性は損なうことなく、フロントエンドのコンポーネントを簡単に更新可能です。

従来のCMSとヘッドレスCMSの比較
従来のCMSとヘッドレスCMSの比較

この新たなアプローチは、従来のWordPressを使ったECサイトと比較して、優位な点が多数あります。

ヘッドレスWooCommerceサイトの概要とメリットがわかったところで、早速実際の構築手順をご紹介します。WordPress、React、WooCommerceプラグインを使ってECサイトを作成し、Kinstaにデプロイするまでを見ていきます。

前提条件

これからご紹介する手順には、以下が必要になります。

ECサイトをヘッドレス化する利点

WooCommerceサイトのヘッドレス化には様々なメリットがありますが、特に1つのバックエンドで様々なフロントエンドを扱うことができる高い柔軟性は大きな強みです。

他にも、以下のようなメリットが挙げられます。

  • カスタマイズ性の向上：任意のウェブフレームワークを使用し、WooCommerceサイトを柔軟に構築することができる。
  • サイトパフォーマンスの改善：ReactやVueのような高速ウェブフレームワークを利用することで、サイトのパフォーマンスが劇的に改善される。
  • SEO：目標を達成するためのSEO戦略をより柔軟に制御できる。
  • より良いスケーラビリティ：サイトを効率的に拡張できるため、トラフィックが集中する時期にも高いパフォーマンスが確保される。
  • 独自の顧客体験の構築：従来のテンプレートの制約から解放され、革新的でパーソナライズされた体験を買い物客に提供できる。

ヘッドレスWooCommerceサイトをセットアップする

WooCommerceサイトを設定する手順は以下のとおりです。

  1. MyKinstaにログインする
  2. 「サービスを追加」＞「WordPressサイト」を選択（または、左サイドバー「WordPressサイト」＞「サイトを追加する」＞「新規サイト作成」）
  3. 「WordPressをインストール」を選択
  4. 「新規WordPressサイトの追加」画面の「サイトの設定」に必要情報を入力し、「続行」をクリック
  5. 「WordPressの設定」に必要情報を入力し、「WooCommerceをインストールする」にチェックを入れた上で、「続行」をクリック
WordPressとWooCommerceプラグインをインストール
WordPressとWooCommerceプラグインをインストール

WooCommerceプラグインを有効にする

  1. MyKinstaで、左サイドバーの「ドメイン」を開く
  2. 「WordPress管理画面を開く」をクリック
  3. WordPress管理画面にログインし、「プラグイン」に移動してWooCommerceプラグインを有効化する
WooCommerceプラグインを有効化
WooCommerceプラグインを有効化

WooCommerceでヘッドレス化の設定を行う

続いて、WooCommerceでヘッドレス化の設定を行います。

  1. WordPress管理画面にログインし、左サイドバーから「WooCommerce」＞「設定」をクリック
  2. 「設定」ページの「高度な設定」タブを開き、「Rest API」をクリック
  3. 「キーを追加」をクリックする

    REST APIのキーを追加
    REST APIのキーを追加

  4. 「キーの詳細」ページで「説明」にREST APIの簡単な説明を加え、「権限」ドロップダウンで「Read/Write」を選択したら、「API キーを生成」をクリック

    WooCommerce APIキーを生成
    WooCommerce APIキーを生成

  5. 「Consumer Key」および「Consumer Secret」をコピーし、Reactアプリケーションで使用するために安全な場所に保管する
  6. 最後に、WP管理画面で「設定」＞「パーマリンク」を開き、パーマリンク構造を「投稿名」に設定する（これでAPIリクエスト時にJSONデータが返されるように）

次のステップに移る前に、ここでWooCommerceサイトに何点か商品を追加しておきます。WordPress管理画面の「WooCommerce」＞「商品」＞「新規追加」を開き、プロンプトに従って追加します（インポート可能なサンプル商品はこちら）。

以上で、WordPressとWooCommerceのヘッドレス化の設定が完了です。続いて、ヘッドレスECサイトのフロントエンドに着手します。

Reactプロジェクトをセットアップする

以下の手順で、Reactプロジェクトをセットアップしていきます。

  1. 任意のディレクトリで、以下のコマンドを使ってReactプロジェクトを作成 
    # <app-name>の部分を好みの名前に変更

# npx利用
npx create-react-app <app-name> && cd <app-name>

# yarn利用
yarn create react-app <app-name> && cd <app-name>
  2. プロジェクトのルートに.envファイルを作成して以下を貼り付ける 
    REACT_APP_CONSUMER_KEY=your_Woocommerce_consumer_key
REACT_APP_CONSUMER_SECRET=your_Woocommerce_consumer_secret

    先ほど生成したWooCommerceの「Consumer Key」と「Consumer Secret」に置き換えてください。

  3. 以下のコマンドで、ルートを管理するためのパッケージをインストール 
    ## npm利用
npm i react-router-dom

## yarn利用
yarn add react-router-dom
  4. 以下のコマンドでReactプロジェクトを起動 
    ## npm利用
npm start

## yarn利用
yarn start

ヘッドレスWooCommerceサイトのフロントエンド開発

ECサイトは、まず第一に商品を提示しユーザーの購入を促さなければなりません。まずは、WooCommerceサイトで商品をフロントエンドに表示することから始めます。これには、WooCommerce APIへのリクエストが必要です。

すべての商品を一覧表示するエンドポイントはwp-json/wc/v3/productsで、ホストURLに付加する必要があります。この変数を.envファイルに貼り付け、ベースURLとなるホストURLにproductsエンドポイントを追加します。http://example.comをWooCommerceサイトのドメインで更新してください。

REACT_APP_BASE_URL=http://example.com/wp-json/wc/v3/products

APIリクエストを行う際、Consumer KeとConsumer SecretもURLに付加します。URLは以下のようになります。


https://kinstawoocommerce.kinsta.cloud/wp-json/wc/v3/products?consumer_key=your_consumer_key&consumer_secret=your_consumer_secret

ReactアプリケーションでFetch APIを使用してAPIリクエストを行い、WooCommerceの商品を取得してみます。

  1. Reactアプリケーションで、srcディレクトリのApp.jsファイルを開き、その中身を以下のコードに置き換える 
    import {Link} from 'react-router-dom';
import {useEffect, useState} from 'react';

function App() {
    const BASE_URL = process.env.REACT_APP_BASE_URL;
    const CONSUMER_KEY = process.env.REACT_APP_CONSUMER_KEY;
    const CONSUMER_SECRET = process.env.REACT_APP_CONSUMER_SECRET;

    const [products, setProducts] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchProducts = async () => {
            const response = await fetch(`${BASE_URL}?consumer_key=${CONSUMER_KEY}&consumer_secret=${CONSUMER_SECRET}`);
            const data = await response.json();
            setProducts(data);
            setLoading(false);
        };

        fetchProducts();
    }, [BASE_URL, CONSUMER_KEY, CONSUMER_SECRET]);

    return loading ? (
        <div className="loaderText">
            <h2>商品を取得しています...</h2>{' '}
        </div>
    ) : (
        <ul>
            {products ? (
                products.map((product) => (
                    <li key={product.id}>
                        <Link to={`/product/${product.id}`}>
                            <img src={product.images[0].src} alt="製品バナー"/>
                            <h2>{product.name}</h2>
                            <p>Sale price: {product.sale_price}</p>
                            <strong>
                                {product.stock_status === 'instock'
                                    ? '在庫あり'
                                    : '在庫なし'}
                            </strong>
                            <button>カートに入れる</button>
                        </Link>
                    </li>
                ))
            ) : (
                <li>商品が見つかりませんでした</li>
            )}
        </ul>
    );
}

export default App;

    上のコードで、コンポーネントのマウント時にFetch APIを使って、WooCommerce APIエンドポイントから商品一覧を取得します（useEffectフック）。エンドポイントURLは、先に設定した環境変数を用いて構築されます。

    データを取得すると、setProducts(response)を使用してコンポーネントの状態（products）を更新し、setLoading(false)を使用してloadingをfalseに設定します。

    データの取得中は、ローディングメッセージが表示されます。データの取得が完了し、loadingがfalseに設定されると、products配列がマップされ、JavaScript XML（JSX）を使用して商品一覧がレンダリングされます。各商品は、react-router-domのLinkコンポーネントでラップされ、IDに基づいて各商品の詳細ページへのリンクが生成されます。

    各商品には、商品名、価格、説明文（dangerouslySetInnerHTMLを用いてHTMLコンテンツを注入してレンダリング）、在庫状況、およびボタンが表示されます。

  2. srcディレクトリでindex.jsファイルを開き、コードを以下に置き換える 
    import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./index.css";
import App from "./App";


ReactDOM.render(
    <React.StrictMode>
        <div className="container">
            <header>
                <h1>Kinstaストア</h1>
            </header>
                <BrowserRouter>
                    <Routes>
                        <Route exact path="/" element={<App />} />
                    </Routes>
                </BrowserRouter>

        </div>
    </React.StrictMode>,
    document.getElementById("root")
);

    ブラウザで/ルートが呼び出されると、Appコンポーネントがレンダリングされます。

  3. アプリを実行して変更を確認する 
    ## npm使用
npm start

## yarn使用
yarn start

    これで、ReactアプリケーションにWooCommerceサイトの商品一覧が表示されるようになります。

    WooCommerceサイトの商品一覧
    WooCommerceサイトの商品一覧

動的な商品ページの作成

ユーザー体験を向上するために、WooCommerce APIを使用して動的な商品ページを作成してみます。このAPIは、単一の商品に関するデータを取得するエンドポイントwp-json/wc/v3/products/<id>を提供します。ストア内の単一商品に関するデータを取得して表示する方法は以下のとおりです。

  1. srcディレクトリ内に、単一の商品に関するデータを取得して表示するコンポーネントProductDetail.jsを作成します。このコンポーネントは、単一の商品に関する情報を取得して表示します。この点以外は、App.jsファイルのコードと同じように動作します。 
    import {useState, useEffect} from 'react';
import {useParams} from 'react-router-dom';

function ProductDetail() {
    const BASE_URL = process.env.REACT_APP_BASE_URL;
    const CONSUMER_KEY = process.env.REACT_APP_CONSUMER_KEY;
    const CONSUMER_SECRET = process.env.REACT_APP_CONSUMER_SECRET;

    const {id} = useParams();
    const [product, setProduct] = useState(null);

    useEffect(() => {
        const fetchSingleProductDetails = async () => {
            const response = await fetch(
                `${BASE_URL}/${id}?consumer_key=${CONSUMER_KEY}&consumer_secret=${CONSUMER_SECRET}`
            );
            const data = await response.json();
            setProduct(data);
        };
        fetchSingleProductDetails();
    }, [BASE_URL, CONSUMER_KEY, CONSUMER_SECRET, id]);

    if (!product) {
        return (
            <div className="loaderText">
                <h2>商品情報を取得中...</h2>
            </div>
        );
    }

    return (
        <div className="product-detail">
            <h2>{product.name}</h2>
            <h4>Original Price: {product.regular_price}</h4>
            <h4>Sale price: {product.sale_price}</h4>
            <img src={product.images[0].src} alt="製品バナー"/>
            <strong>
                {product.stock_status === 'instock' ? '在庫あり' : '在庫なし'}
            </strong>
        </div>
    );
}

export default ProductDetail;
  2. index.jsにルートを作成し、ProductDetailコンポーネントを割り当てます。これにより、ユーザーが商品リンクをクリックすると、それぞれの商品ページに誘導されるようになります。 
    // index.js
…
import ProductDetail from "./ProductDetail";

ReactDOM.render(
  <React.StrictMode>
	…
               <Router>
          <Routes>
            <Route exact path="/" element={<App />} />
		{/* 新しいルート */}
            <Route path="/product/:id" element={<ProductDetail />} />
          </Routes>
        </Router>
    </div>
  </React.StrictMode>,
  document.getElementById("root")
);

    ストア内の任意の商品をクリックすると、その特定の商品の詳細を表示するページにリダイレクトされます。

    ロゴTシャツの詳細情報
    ロゴTシャツの詳細情報

ここまでのコードの全貌は、GitHubリポジトリでご覧いただけます。

WooCommerceの主要機能を統合する

ECサイトに欠かせない以下のような機能を統合することで、ヘッドレスWooCommerceサイトで商品をリストアップする基盤を構築することができます。

  • ショッピングカート─買い物かごのデータをクライアント側で管理するか、ローカルストレージを利用して、ユーザーがシームレスに商品を追加、削除、更新できるようにする。
  • 決済プロセス─Reactコンポーネントを使って合理化された決済プロセスを設計。必要な情報を収集し、ユーザーの入力情報を検証し、スムーズな決済体験を実現する。
  • ユーザー認証─JWT（JSON Web Tokenの略）またはOpen Authorization 2.0（OAuth2）を使用して安全な認証を実装し、登録、ログイン、パスワードリセット機能などを提供することでユーザー体験を向上。
  • 決済処理─StripeやPayPalのような安全な決済ゲートウェイAPIを利用して、トランザクションと払い戻しを行う。
  • 注文管理─WooCommerce APIを使用して注文とステータスを効率的に管理。注文履歴、追跡、返品、返金などのユーザーフレンドリーな機能を実装し、Webhookやイベントドリブンアーキテクチャを用いてプロセスを自動化する。

ヘッドレスWooCommerceサイトをKinstaにデプロイする

ヘッドレスWooCommerceサイトを構築したら、KinstaのWordPress専用マネージドホスティングプラットフォームに簡単にデプロイすることができます。

Kinstaは、高パフォーマンス、堅牢なセキュリティ、スケーラビリティなど、さまざまな利点があり、ヘッドレスECサイトのホスティングにも理想的です。他のホスティングでWordPressサイトを運営されている場合は、簡単に移行することができます。

さらに、ReactアプリケーションはKinstaの静的サイトホスティングサービスに無料でデプロイ可能。任意のGitサービス（Bitbucket、GitHub、またはGitLab）にコードをプッシュするだけでOKです。

コードをプッシュしたら、以下の手順でサイトをデプロイします。

  1. MyKinstaにログインする
  2. 「サービスを追加」＞「静的サイト」を選択
  3. Gitサービスを選択し、「（サービス名）を接続」をクリックして接続する
  4. デプロイするリポジトリとブランチを選択すると、ビルド設定が自動検出される
  5. .envファイルから必要な環境変数を追加

    環境変数を追加
    環境変数を追加

  6. 最後に「サイトを作成」をクリックして、Reactアプリケーションをデプロイ

以上で、ヘッドレスWooCommerceサイトのデプロイが完了です。

まとめ

ヘッドレスWordPressとWooCommerceをセットアップし、動的でパフォーマンスに優れたオンラインストアを構築するメリットとその手順をご紹介しました。

フロントエンドをバックエンドから切り離すことで、サイトのカスタマイズの可能性が広がり、魅力的でパーソナライズされたショッピング体験を顧客に提供することができます。また高いパフォーマンス、堅牢なセキュリティ、スケーラビリティなどの恩恵も。

Kinstaでは、経験豊富な開発者からこれから開発を始める初心者まで、あらゆるお客様向けに、革新的なECソリューションの構築と管理に欠かせないサポート、ツール、リソースを提供しています。Kinstaのホスティングで、ぜひヘッドレスECサイトの可能性を探ってみてください。

ヘッドレスWooCommerceサイトについて、ご意見やご質問がありましたら、以下のコメント欄でお知らせください。

 

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).