ReactでWordPressの投稿記事を取得する

ゴール

Reactで作成したページにWordPressの投稿を表示する。

前提

React環境構築済（Vite）。
WordPress環境構築済。
開発環境はVSCode使用。

手順

まずはReact。
プロジェクトを作成するフォルダでVSCodeを開いて、プロジェクトを作成。

npm create vite@latest //自分で入力するコマンド
Project name: ... get_wp //プロジェクト名を入力する（今回はget_wp）
Select a framework: » React //いろいろ表示されるのでReactを選択
Select a variant: » TypeScript + SWC //いろいろ表示されるので左記を選択

Scaffolding project in C:\sample\get_wp… //準備してますー
Done. Now run: //準備完了

cd get_wp //get_wpに移動してね
npm install //移動したらnpm installしてね
npm run dev //インストールできたらnpm run devしてね

言われたとおりに実行

PS C:\sample> cd get_wp
PS C:\sample\get_wp> npm install
added 142 packages, and audited 143 packages in 18s
38 packages are looking for funding
run npm fund for details
found 0 vulnerabilities
PS C:\sample\get_wp> npm run dev
get_wp@0.0.0 dev
vite
VITE v5.4.3 ready in 245 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help

↓Local: http://localhost:5173/　の部分をクリックするとブラウザに表示される。

動作確認できたら、不要なフォルダ（assets）を削除。
cssファイルの内容を一旦削除（後で必要に応じて追加）。

App.tsxを下記の通り編集。

import "./App.css";

function App() {
  return (
    <>
     <h1>Hello World!!</h1>
    </>
  );
}
export default App;

ここまでで、ブラウザ上は下記の表示。
あとは下記の通り編集してWordPressの投稿を表示。

import { useEffect, useState } from "react";

// 型定義（WordPressのみの小規模であるためtypeで定義）
type Post = {
  id: number;
  content: {
    rendered: string; //本文
  };
  tags: number[];
};

function App() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    // 投稿を取得
    fetch("https://hogehoge.com/wp-json/wp/v2/posts")//自分のドメインで
      .then((response) => {
        if (!response.ok) {
          throw new Error(`リクエスト失敗: ${response.statusText}`);
        }
        return response.json();
      })
      .then((data: Post[]) => {
        setPosts(data);
      })
      .catch((error) => {
        setError(`例外発生: ${error.message}`);
      });
  }, []);

  return (
    <main>
      <header>
        <h1>
          <a href="index.html">本サイトの投稿を全て取得する</a>
        </h1>
      </header>

      {error && <p>Error: {error}</p>}

      <section>
        {posts.map((post) => {
          const parser = new DOMParser();
          const doc = parser.parseFromString(
            post.content.rendered,
            "text/html"
          );
          const aTag = doc.querySelectorAll("p");
          const urls = Array.from(aTag).map((p) => p);

          return (
            <div key={post.id}>
              {urls.map((url) => (
                <p>{url.textContent}</p>
              ))}
            </div>
          );
        })}
      </section>

      <footer>&copy; 2024 ひとりでできるもん</footer>
    </main>
  );
}

export default App;

すると、ブラウザ上には下記の通り投稿内容が表示されます。

8.サーバーに公開する場合は下記コマンドを実行してリリース用のフォルダを作成。

PS C:\sample\get_wp> npm run build　//npm run build を実行
get_wp@0.0.0 build
tsc -b && vite build
vite v5.4.3 building for production…
✓ 31 modules transformed.
dist/index.html 0.39 kB │ gzip: 0.28 kB
dist/assets/index-BOM02uIb.js 143.19 kB │ gzip: 46.29 kB
✓ built in 515ms

9.distフォルダ配下のファイルをアップロードして完了。

まとめ

ReactからWordPressの投稿記事を取得できました。
WordPressから投稿記事を取得するには下記を実行する。
https://ドメイン名/wp-json/wp/v2/posts